作為技術博客，難免會在文章中插入一部分代碼塊，代碼具有一定的格式，所以很自然就會使用

標簽，其在使用上與 等其他標簽沒有太大區別，但由于其會保留標簽中所有的空白與換行，因此在使用時還是有幾個地方是需要注意的。

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在文章中显示代码块 - 文章教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。