HTML <pre> 标签与<code>标签的作用与用法

目录
[隐藏]

HTML <pre> 标签

定义和用法

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

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

可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

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

提示和注释

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

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

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,pre 元素的 "width" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,pre 元素的 "width" 属性是不被支持的

<html>
<body>
<p>pre 标签很适合显示计算机代码:</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
</body>
</html>

HTML <code> 标签

定义和用法

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

软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。

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

点赞 (0)
  1. 益酷网说道:

    学习一下!!顺便转转

  2. Firm说道:

    刚开始研究的时候,有研究到这些

  3. 周舟说道:

    这个还真的不知道呢

  4. 威言威语说道:

    <pre> 我是知道的,一般我很少用到。
    [reply=任侠,2010-10-27 09:38 PM]呵呵,在看搜搜的回答代码时看到这个标签,就顺便学习下了,这个应该是都不常用到的东西,不过基础嘛,还是不能忽略[/reply]

  5. 这方面的知识比较基础,不过越基础就要越深入的学习。 谢谢博主分享。

  6. 木本无心说道:

    和瓶子一样,pre真没听过……
    [reply=任侠,2010-10-27 09:42 PM]呵呵,那就了解下好了。发现这个PRE标签倒还真是有点用的,它能保持所有的空格和换行格式[/reply]

  7. 龙城瓶子说道:

    code我知道
    pre不清楚
    。。。
    [reply=任侠,2010-10-27 09:40 PM]呵呵,我也是才看到这个,应该是不常用的标签[/reply]

回复 周舟 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Captcha Code