HTML的pre和code

2017-05-15 本文已影响52人 heheheyuanqing

- 定义：用来定义预格式化的文本，包含在pre的文本会保留空格和换行符，文本呈现为等宽字体
pre包含的内容：

- 定义计算机源代码时使用[符号实体]表示特殊字符，（在HTML中使用“&lt”代表"<"，">" 代表 ">"，"&" 代表 "&"。）

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

- 不能包含导致段落断开的标签（<p>、<address>……尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的
- 示例:

<body>
    <p>pre标签的使用</p>
    <pre>
        document.write("这是code标签的Hello world ！");
        document.write("Hello world ! ");
    </pre>
</body>

- 效果:

pre.png

- 定义计算机代码文本。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来

- 暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 code 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

- 示例:

<p>code标签的使用</p>
    <code>
        document.write("这是code标签的Hello world ！");
        document.write("Hello world ! ");
    </code>

效果:

codde.png

<body>
    <pre>
        <code>Hello World !</code>
    </pre>
    <code>
        <pre>Hello World !</pre>
    </code>
</body>

效果：

cp.png