HTML中的pre标签表示空格或换行

简介: HTML中的pre标签表示空格或换行

1、用法场景

保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式。不会像放在其它标签里那样,把换行和空格都自动折叠了。

2、作用

HTML里的pre元素,可定义预格式化的文本。在pre元素中的文本会保留空格和换行符。文本显现为等宽字体。
下面我们看一个示例,这里我使用的是一段css代码,你也可以换成其它的。如下:

body{
   
   
    background:#fff;
      font: 12px/24px 1.66;
}

当我们用pre包裹它们时

<pre>body{
   
   
    background:#fff;
      font: 12px/24px 1.66;
}</pre>

会在浏览器上直接得到
在这里插入图片描述

可以看出上面的tab,空格,换行都完整的保留下来了。
我们可以把这段css代码放到其它元素下,如得到下面的图。
在这里插入图片描述

很完美,以后就可以用pre来标识代码了。哪里想用放哪里,但这里还有一些可以优化。

语义化
pre元素并不能代码放入,里面的内容是什么,可以是歌词,可以是代码,可以是其它文本。当pre元素来展示源代码的时候最好的方式是用code元素来包裹代码,这样既可以保持格式又可以代表语义,一举数得。如上面的代码可以改写为:

<pre>
<code>body{
   
   
    background:#fff;
      font: 12px/24px 1.66;
}</code>


</pre>

除此之外,他还可以嵌套html其它标签

pre中最好不要包含可以导致段落断开的标签(如:p,标题),虽然主流浏览器对此解析没有问题,但最好不要这样使用。存在着语义不明的情况,比如无法判断是想显示结构的不同展示,还是想把标签作为代码的一部分显示,最好对这里只包含代码文本,对于标签进行转义如'>'对应'>'。
pre元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其它标签放到pre块中时,会被直接渲染为正常元素。

[00:50]<a href="#">道义放两旁</a>,利字摆中间。</pre>
相关文章
|
16天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
22 1
|
1月前
HTML文档基础标签(2)
HTML文档基础标签(2)
|
5天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
14 1
|
12天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
16天前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
9 0
HTML5中的语义化标签有哪些?
|
19天前
|
存储 移动开发 前端开发
html的常用标签
【4月更文挑战第1天】html的常用标签
19 4
|
1月前
如何在HTML中添加标签
如何在HTML中添加标签【2月更文挑战第26天】
33 5
|
1月前
HTML标签
【2月更文挑战第16天】HTML标签。
22 3
|
1月前
|
移动开发 搜索推荐 HTML5
HTML语义化标签
HTML语义化标签