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

標籤，其在使用上與
等其他標籤沒有太大區別，但由於其會保留標籤中所有的空白與換行，因此在新抓使用時還是有幾個地方是需要結按道注意的。
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；
，就能去掉多餘的換行：
TAG:Pre換行空白標籤White