No.17 pre标签 与 code标签

pre标签、特性

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

<pre>的基本作用效果：1.pre标签中文本的空格和换行符会被保留，然后在浏览器中被解析显示出来。
                    2.文本会呈现出等宽字体的效果。

如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，
那么就需要使用符号实体来表示特殊字符，比如  "&lt;" 代表 "<"   ，  "&gt;" 代表 ">"。否则浏览器将无法解析这些特殊字符。
（如图所示）

code标签

<code> 用于表示计算机源代码或者其他机器可以阅读的文本内容。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。因为，虽然 <code> 标签通常只是把文本变成等宽字体，
但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。
例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。


<code>的基本作用效果：1.code标签中的文本会呈现出等宽字体的效果。
                     2.提示用户、浏览器，被<code>包围的文本是一段“源程序代码”。

pre标签 与 code标签 的关系

<pre>、<code>都应用于浏览器显示计算机中的源代码。
它们都可以让文本字体变成等宽的样式，但<code>不能保留内容中的空格、换行符。<pre>相比<code>,它虽能保留内容中的空格、换行符，但<pre>
缺少了“语义化”。
我们可以把这两个标签结合起来嵌套使用，这样就能让<code>保留内容的空格以及换行符。