HTML_pre和code的详解
2016-11-27 本文已影响49人
07120665a058
HTML <pre> 标签定义和用法
- 定义：
<pre>标签的意思是 “preformatted text”（预格式化的文本） - 示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML pre 标签示例</title>
</head>
<body>
<pre>
All
I have
to do
is learn
HTML
</pre>
</body>
</html>
- 运行图：
-
<pre>标签的功能： -
用来表示计算机的源代码
-
Note：
-
被包围在 pre 元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体。
-
可以导致段落断开的标签（例如标题、
<p>和<address>标签）绝不能包含在<pre>所定义的块里。 -
pre元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 -
当把其他标签（比如
<a>标签）放到<pre>块中时，在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置。 -
如果希望使用
<pre>标签来定义计算机源代码，比如 HTML 源代码，
请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
-
HTML <code> 标签定义和用法
- 定义：
<code>标签的语义：表示其中的文本是代码 - 示例：
<code>
document.getELementById("id1");
document.getELementById("id2");
document.getELementById("id3");
</code>
<br>
document.getELementById("id4");
-
运行图：
-
<code>标签的功能： -
将文本变成等宽字体；
-
暗示这段文本是源程序代码
-
Note：
-
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用
<code>标签。 -
根据标签的功能，将来的浏览器有可能会加入其他显示效果。(例如，程序员的浏览器可能会寻找
<code>片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等) -
如果只是希望使用等宽字体的效果，请使用
<tt>标签，或者如果想要在严格限制为等宽字体格式的文本中显示编程代码，请使用<pre>标签
code标签和pre标签之间的关系
- 共同点：应用上类似，都主要应用于浏览器显示计算机中的源代码。
-
不同点：
code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示所必须的样式。 -
pre是块级元素 -
code是行内元素 - 注意点：code标签和pre标签是可以嵌套使用的，不会报错，但是显示效果不同。
- 完整示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>test</title>
</head>
<body>
<pre>
<!-- pre中的h1 -->
<h1>a：hello world hello world</h1>
<!-- pre中的code -->
<code>b：hello world hello world</code>
<!-- pre中 -->
c：hello world hello world
<!-- pre中的pre -->
<pre>d：hello world hello world</pre>
</pre>
<!-- body中 -->
e：hello world hello world
<code>
<!-- code中 -->
f：hello world g：hello world
<!-- code中的pre -->
<pre>h：hello world hello world</pre>
</code>
<!-- xmp中 -->
<xmp>i：<h1>hello world hello world</h1></xmp>
</body>
</html>
-
运行图：
显示代码的两种方式：
- 第一种是
<code>标签。如果想要内联显示代码，那么应该使用<code>标签
<pre>
<code style="background-color: red">hello world</code>
<code style="background-color:green">hello sdftyworld</code>
<code>hello worldsdgh</code>
</pre>
- 第二种是
<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用<pre>标签
<code>
<pre style="background-color: red">hello world</pre>
<pre style="background-color:green">hello sdftyworld</pre>
<pre>hello worldsdgh</pre>
</code>
参考文章推荐：
code标签和pre标签
pre和code标签
