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中的pre标签表示空格或换行相关推荐

React中使用pre标签
React中使用pre标签--note1 pre标签------简单理解 HTML中的pre标签定义与用法: JSON格式数据转换字符串格式 JSON.stringify() JSON.parse() ...
html中的pre标签
html中是pre标签是一个双标记标签即 <pre>内容</pre> <pre>开始标签结束标签</pre> 它的作用:所见即所得,在里面编辑的内容 ...
php过滤句尾空格,php正则过滤各种标签，空格，换行符的实现方法
这篇文章主要为大家详细介绍了php正则过滤各种标签,空格,换行符的实现方法,具有一定的参考价值,可以用来参考一下. 经测试代码如下: $str=preg_replace("/\s+/&quo ...
oracle去除表中字段中特殊符号（'tab','空格'，'换行符','回车'）——目前没找到可以一次性替换表中所有异常数据的方法，只能对字段逐一去除,如果有还希望留言赐教
//去掉空格 update T_THIRD_SURVEY_PERSON SET CHECK_DES = trim(replace(CHECK_DES,' ',',')); //去掉换行符 update ...
Unity中的Text内容有空格导致换行，以及让每行首字符不出现标点符号
ps:本篇内容应该属于半转载半原创,因为空格换行和首字符不出现标点.都是查询资料后我借用别人的成果再进行的整理的.但是发布时转载和原创只能选择一个因此我就选择其一了. 先来说下错误换行的问题,Unit ...
php正则过滤html标签_空格_换行符的代码,php正则过滤html标签、空格、换行符的代码(附说明)_php技巧...
$str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/ $str=p ...
php正则过滤html标签_空格_换行符的代码,PHP 正则过滤 html 标签、空格、换行符的代码 (文章格式化)...
$str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/ $str=p ...
php过滤多空格_php正则过滤html标签、空格、换行符的代码(附说明)
$str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/ $str=p ...
html中pre使用方法,HTML中pre标签的用法
我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...

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

1、用法场景

2、作用

HTML中的pre标签表示空格或换行相关推荐

最新文章

热门文章