-
pre
- 定义:用来定义预格式化的文本,包含在pre的文本会保留空格和换行符,文本呈现为等宽字体
pre包含的内容:
- 定义计算机源代码时使用[符号实体]表示特殊字符,(在HTML中使用“<”代表"<",">" 代表 ">","&" 代表 "&"。)
- 制表符(tab)以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用<pre>
标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
- 不能包含导致段落断开的标签(<p>
、<address>
……尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的
- 示例:
<body>
<p>pre标签的使用</p>
<pre>
document.write("这是code标签的Hello world !");
document.write("Hello world ! ");
</pre>
</body>
- 效果:
pre.png
-
code
- 定义计算机代码文本。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来
- 暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找 code 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。
- 示例:
<p>code标签的使用</p>
<code>
document.write("这是code标签的Hello world !");
document.write("Hello world ! ");
</code>
效果:
codde.png
-
pre和code的比较
相同点:应用于浏览器显示计算机中的源代码
不同点:
code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,浏览器可以做出自己的样式处理,pre标签则没有
pre标签可以保留文本中的空格和换行符,保留文本中的空格和换行符是计算机源代码显示所必须的样式,code标签则不能
联系:pre标签和code标签能够相互嵌套
示例:
<body>
<pre>
<code>Hello World !</code>
</pre>
<code>
<pre>Hello World !</pre>
</code>
</body>
效果:
cp.png