前端技巧展示代码,标签pre和标签code的区别是什么

展示代码,标签pre和标签code的区别是什么

大家浏览本站文章的时候经常遇到到html或CSS代码的展示,通常我们用pre标签来展示这类代码内容,而html还有一个标签code是专用来展示计算机源代码的,那么pre和code标签有什么区别呢?我们分别认识一下:pre标签的中文名是预格式化的文本,通常放在pre中的文本会保留空格和换行符,文本呈现为等宽字体,例如下面的这段文字,我将它放在pre标签里:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
</head>
<body>
<div>
<pre>
  锦瑟无端五十弦    一弦一柱思华年
  庄生晓梦迷蝴蝶    望帝春心托杜鹃
  沧海月明珠有泪    蓝田日暖玉生烟
  此情可待成追忆    只是当时已惘然
                      ——作者:李商隐
</pre>
</div>
</body>
</html>

大家浏览网页后可以看到,上面这首诗的文字之间并没有使用换行标签,而且每句之间也并没有打空格标签,却能够整齐的显示出来,这正是pre标签所起的作用。

pre标签.png

也就是说,pre标签用来展示这种本身就带有格式的文本,并不仅限于展示html等网页代码。英文单词code本身就是代码的意思,所以code标签与生俱来就是用于展示计算机代码的,但是它只用于展示单行的代码,它不具有预格式化展示的功能,因此本站展示多行代码的时候用了pre标签。

如果在pre标签中展示html代码,直接写html标签是不行的,比如我写<em>ABCD</em>这段语言到pre里,浏览的时候会发现ABCD几个字母变成了斜体,也就是说html标签被解析了,为了使标签不被解析,我们只能使用转义字符来表示html代码,所以刚才这段语句应该写作:

&lt;em&gt;ABCD&lt;/em&gt;

关于转义字符的写法,大家可以自己搜索一下,不需要刻意记住转义符,在一般的网页编辑器(如UEditor)中,如果输入了html代码,都会自动变成转义字符。当然,在code标签里如果要展示html代码的话也是一样。

简单的总结一下用于展示代码时,pre标签和code标签的区别:

1. pre标签一般用于展示多行内容,但是如果单行文本想用pre标签也是可以的。

2. code标签一般用于展示单行计算机代码,并不建议用于展示多行代码,如果想用code的话,就只能每行都加上code标签,或者手动在文字内加入换行标签了。 

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/41.html