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>
相关文章
HTML输出特殊字符详细方法
以下是部分特殊字符代码表,它们的完整应用代码格式为:`&#××××;`用下面的四位数字替换×,将得到对应的符号。(注意:应用这些代码,编辑器应该切换到HTML模式)
|
7月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
265 0
|
6月前
HTML中如何插入空格,HTML空格代码,多种HTML空格写法
HTML中如何插入空格,HTML空格代码,多种HTML空格写法
181 0
|
7月前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
432 0
|
7月前
|
前端开发 搜索推荐
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
87 0
|
移动开发 前端开发 开发工具
HTML——格式化文本与段落
文本格式化标签分为字体标签、文本修饰标签。字体标签和文字修饰标签包括对于字体样式的一些特殊修改,段落格式化分为段落标签、换行标签、水平分割线标签等。通过文本和段落格式化知识的学习,能够掌握页面内容的初步设计,理解并掌握HTML标题字标签,空格及特殊符号的使用。理解格式化标签中文本修饰标记,计算机输出标签,引用和术语标签的语法及字体font标签语法及使用。
HTML——格式化文本与段落
|
移动开发 HTML5
HTML5注释标签和特殊字符
HTML5注释标签和特殊字符
|
前端开发
html 空白汉字占位符
前端开发中,大家可能会遇到这样的问题:标题存在字数不一样的情况,但是产品大哥,让你要对齐。还必须对齐。他说他有强迫症
1213 0
【HTML】常用的特殊符号
【HTML】常用的特殊符号
218 0
【HTML】常用的特殊符号
在div标签中显示特殊字符(包括html标签)
在div标签中显示特殊字符(包括html标签)