3.1.4 预格式化标签<pre>??_HTML5/CSS3/JavaScript技术大全-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

3.1.4 预格式化标签<pre>❹❺

<pre>标签用于定义预先格式化的文本，也就是包含在该标签中的文本将会保持原先的格式，如回车、空格以及制表符都会被保留，文本会呈现为等宽字体。<pre>标签的一个常见应用就是表示计算机的源代码，通常会和后面介绍的<code>标签配合使用。另外该标签在显示由JavaScript的“document.writeln”方法输出的内容时，也非常有用。该标签需要结束标签</pre>。

语法格式：

<pre>预格式文本</pre>

语法说明：

该标签有一个width属性，用于定义每行的最大字符数，但是该属性只被HTML4支持，在HTML5中已被放弃。在该标签中不能放置<p>等段落标签，允许包括超级链接、图像等标签。

<pre>标签替代了早期的HTML中的<plaintext>标签和<xmp>标签。这两个标签能够直接输出HTML代码。

<pre>标签只能保持空格、回车以及制表符，对于一些特殊符号，如“<”、“"”的字符码，<pre>并不能保持其原格式，而是会转化成实际代表的字符输出（特殊字符将会在后面的文字内容中介绍）。

另外<pre>标签不能输出HTML中的标签，如果想输出<table>，则必须将标签的尖括号用字符码表示，即“<table>”。

应用举例（pre.html）：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content= "text/html; charset=gb2312" /> 
<title>使用预格式化标签</title> 
</head> 
 
<body> 
杨辉三角： 
<pre> 
                    1 
                     1      1  
                 1      2      1 
             1      3      3      1 
         1      4      6      4      1 
      1     5     10    10     5      1 
</pre> 
 
输出一段代码： 
<pre> 
&lt;script type=&quot;text/JavaScript&quot;&gt; 
    xmlDoc=&lt;a href=&quot;dom_loadxmldoc.asp&quot;&gt;loadXMLDoc&lt;/a&gt;(&quot;books.xml&quot;); 
    document.write(&quot;xmlDoc is loaded&quot;); 
&lt;/script&gt; 
</pre> 
</body> 
</html>

代码说明：

以上代码中，加粗的部分首先使用<pre>标签输出了杨辉三角，然后使用<pre>标签输出一段格式化代码。需要注意的是在输出格式化代码时，代码中包含了多个特殊字符的字符码，但是浏览器并没有输出字符码，而是输出了字符码实际代表的字符，如“<”输出为尖括号“<”，“"”输出为引号“"”。

在Chrome浏览器中显示效果如图3-4所示。

图3-4 使用预格式标签

读者可以尝试去掉<pre>标签，看看前后显示效果有什么区别。