HTML中的pre 和 code 详解

这两个标签的嵌套顺序可以是任意的

code标签

1. 定义:<code>标签， 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式，那么这个<code>标签就是为软件代码编写者设计的， code标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。
2. 应用：只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上
3. 作用：

• 将文本变成等宽字体
• 暗示这段文本是源程序代码

4. 示例

<div >
    用"code"标签 :<br>
    <code>
        document.getElementById("id1"); <br>
        document.getElementById("id2"); <br>
        document.getElementById("id3"); <br>
    </code>
    不用"code"标签: <br>
    document.getElementById("id4");
</div>

执行结果如下：

pre-code.png

pre 标签

1. 定义：<pre>标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本
2. 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>

执行效果如下：

code.png