HTML <code> 元素

HTML <code> 元素表示一段计算机代码。默认情况下,它以浏览器的默认等宽字体显示。

在常规文本后面,展示一段代码:

<p>This is how we declare a Javascript variable:<br/>
<code>var i = 0;</code>
</p>

尝试一下 »

截图

在常规文本后面,展示一段代码

特性

内容类别 流式内容短语内容可触知内容
允许的内容 短语内容
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
允许的 ARIA 角色 任意
DOM 接口 HTMLElement,在 Gecko 1.9.2(Firefox 4)之前,Firefox 使用 HTMLSpanElement 接口实现该元素。

属性

该元素包含全局属性

事件属性

<code> 标签支持 HTML 的事件属性

更多实例

高亮一段代码:

<code>&lt;<span style="color:#e45649">p</span> <span style="color:#986801">id</span>=<span style="color:#50a14f">"para"</span>&gt;这是一个段落&lt;/<span style="color:#e45649">p</span>&gt;
</code>

尝试一下 »

截图

高亮一段代码

一般和 <pre> 元素一起使用,实现多行代码高亮:

<pre><code >&lt;<span style="color:#e45649">h1</span>&gt;这是一个标题&lt;/<span style="color:#e45649">h1</span>&gt;
&lt;<span style="color:#e45649">p</span>&gt;这是一个段落&lt;/<span style="color:#e45649">p</span>&gt;
</code></pre>

尝试一下 »

截图

一般和 <pre> 元素一起使用,实现多行代码高亮

也可以使用 <br> 元素在代码中换行:

<code >&lt;<span style="color:#e45649">h1</span>&gt;这是一个标题&lt;/<span style="color:#e45649">h1</span>&gt;<br>&lt;<span style="color:#e45649">p</span>&gt;这是一个段落&lt;/<span style="color:#e45649">p</span>&gt;
</code>

尝试一下 »

截图

也可以使用 <br> 元素在代码中换行

注意

可以为 code 选择器定义 CSS 规则,来覆盖浏览器的默认字体。但用户设置的首选项可能优先于指定的 CSS。

规范

规范 状态 备注
HTML Living Standard
<code> 的定义
现行的标准 -
HTML5
<code> 的定义
推荐 -
HTML 4.01 Specification
<code> 的定义
推荐 -

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 1 支持 1 支持 支持 支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 1 支持 支持 支持

相关链接