pre标签:预先排版的文本展示标签

        <pre></pre>可以将文本预格式化,在代码编辑页面的排版布局可以直接显示在网页上,可以用一个标签更快的将文本排版布局来替代简单的多个区域、换行的div块布局。

        被包围在 <pre> 标签中的文本通常会保留空格和换行符。

一、空格

        对于空格,尽量使用空格键而不是tab制表符,虽然pre也可以识别起tab,也能够起到应有的作用，但是每个浏览器对tab的表现形式各不相同,可能会出现偏差。保险起见,文本尽量使用空格,来保证文本布局的正确显示。

二、换行

        对于换行符,在使用react框架时,由于jsx会自动去掉换行符,因此需要采用别的解决方法来手动加上换行符,解决方法如下:

方法一、加<br />标签

<pre>1<br />2</pre>

注意:pre是个块级元素,其内尽量不要嵌套会造成换行的块级元素,如<h1>,<p>标签,虽然浏览器也会简单的将他们识别为换行,但有可能会出现报错。

方法二、使用模板字符串

<pre>
{`1
2`}
</pre>

方法三、换行符

//方式1:\n
<pre>1{'\n'}2</pre>
//方式二:回车(其中为反引号)
<pre>1{`
`}2</pre>

三、嵌套标签

        pre内的文本可以包括物理样式和基于内容的样式变化，其内可以嵌套其它的标签,如链接(<a>)。但尽量不要嵌套会造成换行的块级元素,在其内嵌套的标签和div相似,可以设置其的样式。

        由于pre可以嵌套其它的标签,因此想要在其中显示和标签相关的符号时,需要进行转换,比如 "&lt;" 代表 "<"，"&gt;" 代表 ">","&amp;" 代表 "&"。

        如果想要使用<pre>标签来显示计算机源代码，如HTML源码，需要使用符号实体来表示特殊字符(标签特殊符号,如“<”,“>”等)。同时可以将<pre>和<code>结合使用，获得更加精确的语义。