pre和code

<pre> 标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签(例如标题、<p>和<address>标签绝不能包含在 <pre> 所定义的块里。

<pre>int x = 0;
int y = 1;

int z = x + y; 
</pre>

效果:

<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容
<code>标签通常只是把文本变成等宽字体,同时暗示这行代码是源程序代码。

<code>一段电脑代码</code>

效果:<code>一段电脑代码</code>


两者之间的关系:
相同之处:
都主要应用于浏览器显示计算机中的源代码
不同之处:
code只显示单行编程代码;
pre则是显示一大段编程代码,而且会保留原文本中的空格和换行。
code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,浏览器可以做出自己的样式处理,pre标签则没有这项功能,但是pre标签可以保留文本中的空格和换行符。
code和pre能嵌套使用,但要注意嵌套的顺序。如下

<pre>
    <code>
        hello world
    </code>
</pre>

显示效果:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML <pre> 标签定义和用法 定义: 标签的意思是 “preformatted text”(预格式化的文...
    07120665a058阅读 5,573评论 2 4
  • pre标签 定义 pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也...
    落花的季节阅读 11,420评论 6 3
  • pre标签 1.pre标签的定义: 标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符,...
    zj_zxj阅读 21,247评论 0 1
  • 这两个标签的嵌套顺序可以是任意的 code标签 定义: 标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容...
    杨慧莉阅读 5,589评论 0 0
  • pre   - 定义:用来定义预格式化的文本,包含在pre的文本会保留空格和换行符,文本呈现为等宽字体 pre包含...
    heheheyuanqing阅读 5,127评论 0 1