<pre>标签学习

pre 是 Preformatted text（预格式化文本）的缩写,使用此标签可以把代码中的空格和换行直接显示到页面上。但是 < 、 > 和 & 等特殊文字需要用 < 、 > 和 & 的方式记述。

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

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

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

HTML代码

<pre>&lt;pre&gt;
&amp;lt;html&amp;gt;

&amp;lt;head&amp;gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;loadxmldoc.js&amp;quot;&amp;gt;
&amp;lt;/script&amp;gt;
&amp;lt;/head&amp;gt;

&amp;lt;body&amp;gt;

  &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
    xmlDoc=<code>&lt;a href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a&gt;</code>(&amp;quot;books.xml&amp;quot;);
    document.write(&amp;quot;xmlDoc is loaded, ready for use&amp;quot;);
  &amp;lt;/script&amp;gt;

&amp;lt;/body&amp;gt;

&amp;lt;/html&amp;gt;
&lt;/pre&gt;
</pre>

浏览器显示效果

<html>

<head>
  <script type="text/javascript" src="loadxmldoc.js">
</script>
</head>

<body>

  <script type="text/javascript">
    xmlDoc=loadXMLDoc("books.xml");
    document.write("xmlDoc is loaded, ready for use");
  </script>

</body>

</html>

HTML代码

<pre>
if (xx &gt; 5) {
    print "比5大！\n";
}
</pre>

浏览器显示效果

if (xx > 5) {
    print "比5大！\n";
}

提示：制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。

提示：如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。

提示：在 W3School 中，非常多页面中的源代码实例都是通过 <pre> 标签定义的，您可以参考这些页面，学习如何使用该标签。我们甚至把 <pre> 标签与 <code> 标签结合起来使用，以获得更加精确的语义。

猜你喜欢