html <pre>和<code>的区别详解

HTML

 标签</p>
<p style='box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 1.1; color: rgb(51, 51, 51); margin: 0px 0px 22px; font-size: 18px; white-space: normal; background-color: rgb(255, 255, 255);'>定义和用法</p>
<p>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</p>
<p><pre class="brush:php;toolbar:false"> 标签的一个常见应用就是用来表示计算机的源代码。</p>
<p>可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre class="brush:php;toolbar:false"> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种<a href="http://www.php.cn/php/php-tp-behavior.html" target="_blank">行为</a>在所有浏览器上并不都是一样的。</p>
<p>pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre class="brush:php;toolbar:false"> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。</p>
<p style='box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 1.1; color: rgb(51, 51, 51); margin: 0px 0px 22px; font-size: 18px; white-space: normal; background-color: rgb(255, 255, 255);'>提示和注释</p>
<p>提示：制表符（tab）在 <pre class="brush:php;toolbar:false"> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre class="brush:php;toolbar:false"> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。</p>
<p>提示：如果您希望使用 <pre class="brush:php;toolbar:false"> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示<a href="http://www.php.cn/wiki/88.html" target="_blank">特殊字符</a>，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"，"&amp;" 代表 "&"。</p>
<p style='box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 40px; color: rgb(51, 51, 51); margin: 15px -25px; font-size: 20px; padding: 0px 25px; border-left: 5px solid rgb(81, 173, 237); background-color: rgb(247, 247, 247); white-space: normal;'>HTML <code> 标签</p>
<p style='box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 1.1; color: rgb(51, 51, 51); margin: 0px 0px 22px; font-size: 18px; white-space: normal; background-color: rgb(255, 255, 255);'>定义和用法</p>
<p><code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。</p>
<p>软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。</p>
<p>只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件<a href="http://www.php.cn/code/6275.html" target="_blank">判断语句</a>的特殊缩进等。</p>
<p style="margin: 10px 0px; font-size: 21px; line-height: 1.5; color: rgb(0, 0, 0); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">code标签和pre标签的定义</p>
<p>      code标签：</p>
<p>      1、code标签的定义: <code>标签， 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式，那么这个<code>标签就是为软件代码编写者设计的， code标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。</p>
<p>      2、code标签的应用，应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code> 标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能，将来浏览器可能会根据自己的实际情况添加效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某 些额外的文本格式化处理，如循环和<a href="http://www.php.cn/code/10324.html" target="_blank">条件判断</a>语句的特殊缩进等。</p>
<p>      3、code标签的示例，我们可以看看下面不加code标签的文本片段和加上code标签的文本片段之间的格式上的区别。需要注意的是，这里只是演示了code标签的第一个功能，至于暗示浏览器这段代码时源程序的功能，需要在具体的浏览器上才能显示。</p>
<p>      如下代码在浏览器端的显示效果为：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><code>
    document.getELementById("id1");
    document.getELementById("id2");
    document.getELementById("id3");
</code>
<br>
document.getELementById("id4");

Salin selepas log masuk

显示效果为：

看到不同了吧，哈哈。下面接着看pre标签啦。

pre标签：

1、pre标签的定义，

标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。</p><p>      2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre class="brush:php;toolbar:false"> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 <a> 标签）放到 <br/><pre class="brush:php;toolbar:false"> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。</p><p>      3、pre标签的示例：下面的代码(html中的源代码)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false">
    &lt;html&gt;
    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=&lt;<font color="blue">a href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a&gt;</font>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

Salin selepas log masuk