HTML宝典(第 1 版)
2.3.14 code元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

time元素

dfn元素

abbr元素

mark元素

cite元素

q元素

s元素

u元素

b元素

i元素

small元素

strong元素

文本元素

code元素

code元素用来定义计算机程序的源代码或其他机器可以阅读的文本,如计算机程序、或函数名、XML元素名、或文件名等。

由于浏览器会将网页中所有额外的回车和空格进行压缩,并根据窗口的大小自动换行。因此,人们常常使用 pre 元素类包裹 code元素,以便 code元素中的文本能够按预先定义好的格式原样显示。

有时候,希望通过脚本对源代码进行语法高亮显示,也可以使用 class属性来指定源代码所使用的编程语言类型,以便脚本能够使用正确的规则。如:

<pre class="js">
<code>
function fact(x) {
    if(x < 1) {
        return 1;
    } else {
        return x * fact(x - 1);
   }
}
</code>
</pre>

上述代码指定源代码所使用的编程语言为 js,以便脚本使用 js 的语法规则进行高亮显示。运行结果如图 2‑28 所示:

code元素
图2-28 code元素

如果源码中包含HTML代码,还应该使用 &lt; 和 &gt; 来替换 '<' 和 '>' 字符,否则,浏览器会将这些代码当做HTML元素进行处理,而不会当做文本进行处理。

在实际应用中,只需替换标签中的 '<' 字符即可,这样的话,就不存在开始标签,浏览器也就不会把它解析为HTML元素。如:

<pre class="html">
<code>
&lt;!DOCTYPE html>
&lt;html>
    &lt;head>
    ...
    &lt;/head>
    &lt;body>
    ...
    &lt;/body>
&lt;/html>
</code>
</pre>

运行结果如图 2‑29 所示:

code元素
图2-29 code元素

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验