这两个标签的嵌套顺序可以是任意的
code标签
- 定义:
<code>
标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式,那么这个<code>
标签就是为软件代码编写者设计的, code标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。 - 应用:只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上
- 作用:
- 将文本变成等宽字体
- 暗示这段文本是源程序代码
- 示例
<div >
用"code"标签 :<br>
<code>
document.getElementById("id1"); <br>
document.getElementById("id2"); <br>
document.getElementById("id3"); <br>
</code>
不用"code"标签: <br>
document.getElementById("id4");
</div>
执行结果如下:
pre 标签
- 定义:
<pre>
标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本 - pre标签一个常见的应用便是用来保存计算机中的源代码的文本
注意:可以导致段落断开的标签(例如标题、<p>
和<address>
标签)绝不能包含在<pre>
所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线
code 和 pre比较
相同点:主要应用于浏览器显示计算机中的源代码
不同点:
- code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,浏览器可以做出自己的 样式处理,pre标签则没有这项功能
- pre标签可以保留文本中的空格和换行符,保留文本中的空格和换行符是计算机源代码显示 所必须的样式
联系:<pre>
和<code>
可以互相嵌套。如以下代码所示:
<pre>
<code>
Hello World
</code>
</pre>
<code>
<pre>
Hello World
</pre>
</code>
执行效果如下: