作为技术博客，难免会在文章中插入一部分代码块，代码具有一定的格式，所以很自然就会使用

 标签，其在使用上与

等其他标签没有太大区别，但由于其会保留标签中所有的空白与换行，因此在使用时还是有几个地方是需要注意的。

Pre标签

 标签通常用于展示预格式化的文本，默认使用等宽字体，并且保留所有的空白和换行，效果如下所示：

清明

朝代：唐代

作者：杜牧

清明时节雨纷纷，路上行人欲断魂。

借问酒家何处有，牧童遥指杏花村。

通过查看样式可以发现，Chrome 中

 的默认样式为：

pre {

display: block;

font-family: monospace;

white-space: pre;

}

Monospace 也称为 fixed-width font(等宽字体，例如 Courier 和 Monaco)，即每个字符所占据的水平空间是一样的，很适合用于展示代码片段。white-space 属性则声明了如何处理元素内的空白，值

 会保留元素内的空白(一般 HTML 中的连续空白会当成一个空格来处理)，通过上述 pre 标签的展示，能很清楚的看出 pre 展示内容的特点。当然

 标签的字体等都是可以自己通过 CSS 来覆盖的。

使用Pre标签

pre 在使用时与 div 等元素没有太大区别，一般 pre 的场景是展示代码，这种情况下，需要对文本代码中的等字符实体进行转义，如下图所示。

如果没有进行转义，否则会被解析成 HTML 元素(pre 内的 标签主要是起一个语义化的作用)：

前面说到，pre 标签特有的性质是保留了所有的空白和换行，因此在使用时要特别注意如下几点。

文本溢出

默认情况下，pre 中的文本的展示如同其在源代码中的样子，因此第一个问题便是，如果文本的长度超过了 pre 的宽度，展示时不会自动换行而是会溢出，如下图所示：

若要自动换行，则需要加上 white-space 属性，即 white-space: pre-wrap;。white-space 属性设置了如何处理元素内的空白，pre-wrap 表示保留空白符序列，但是正常地进行换行，效果如下图所示：

字符空白

为什么需要这么一个 white-space 属性？

为什么在网页中显示多个空格通常要转义成多个？

实际上，网页的显示是对空白、换行做了特殊处理的，即对空白、换行进行了合并，因此在我们平常书写带缩进的代码时，感受不到这点。但是，假如我们对 body 元素设置 white-space: pre (保留空白)，那网页的样式将难以控制，如下图所示:

在 pre 中，由于保留了所有的空白，因此要额外注意前后的空白和换行。例如我们输出的某个格式化的源代码和其在网页中的效果如下图所示：

这样子达不到我们所预期的效果，因此在输出 HTML 时，要特别注意额外的空白与换行，正确的姿势如下，也就是说不要有额外的空白与换行：

当然，如果想要让 pre 的表现与 div 相似，则可以使用 white-space: pre-line;，表示合并空白符序列，也就是源代码中的多个空格，在展示时只作为一个空格，但是保留换行符。

Pre里面不能有块元素

还有一点需要注意的是，不要将可以导致段落断开的标签，例如

、

标签放在

 所定义的块里，否则会产生多余的换行，如下图所示：

不过万一真遇到了这种过不去的坎，可以给 p 加上 display: inline;，就能去掉多余的换行：

html 显示代码块,使用Pre在文章中显示代码块 - 文章教程相关推荐

文章中嵌入代码块_如何在您的文章中嵌入多项选择测验问题
文章中嵌入代码块 In my experience, supplementing study with practical exercises greatly improves my understa ...
好代码是管出来的——.Net中的代码规范工具及使用
上一篇文章好代码是管出来的--C#的代码规范介绍了编码标准中一些常用的工具,本篇就具体来介绍如何使用它们来完成代码管理. 本文主要内容有: Roslyn简介开发基于Roslyn的代码分析器常用的基 ...
R语言ggplot2可视化百分比显示实战：纵轴显示为百分比、在柱状图上显示百分比、按照因子变量绘制分组子图（纵轴显示为百分比）、可视化图中显示数据百分比
R语言ggplot2可视化百分比显示实战:纵轴显示为百分比.在柱状图上显示百分比.按照因子变量绘制分组子图(纵轴显示为百分比).可视化图中显示数据百分比目录
python代码块使用缩进表示-python中的代码块使用缩进来表示。
[填空题]Python 运算符中用来计算整商的是( ). (2.0分) [判断题]python中的多行语句可以使用反斜杠来实现. (2.0分) [填空题]在python中,int表示的数据类型是( ) ...
【代码笔记】iOS-在导航栏中显示等待对话框
一,效果图. 二,代码. ViewController.m #import "ViewController.h"@interface ViewController () @end ...
HTML阅读打开点击不了,如何让网页文章中的代码可以点击运行
在网页中运行代码 HTML5学堂:很多代码网站当中,都会提供运行代码段功能,便于查看代码效果,那么这个是如何实现的呢?一起来看一下--如何在网页中运行代码. HTML5学堂-刘国利said:应该是在2 ...
java中static代码块_static怎样在java中修改代码块？
代码是我们每个学编程的小伙伴都接触的内容,在代码块的修改上有很多方法,那么在java中又需要使用哪种方式来对代码块进行变动呢?哦们最近在学关键字的版块,其中有一个static用来修饰代码块的效果非常不 ...
excel中显示隐藏的行_在Excel中显示或隐藏用户提示
excel中显示隐藏的行 When you set up a worksheet for other people to use, data validation messages can help ...
html分级显示的下拉列表,javascript实现在下拉列表中显示多级树形菜单的方法
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项 ...

html 显示代码块,使用Pre在文章中显示代码块 - 文章教程

、

html 显示代码块,使用Pre在文章中显示代码块 - 文章教程相关推荐

最新文章

热门文章