聊一聊HTML<pre>標(biāo)簽

pre標(biāo)簽

HTML里的pre元素，可定義預(yù)格式化的文本。在pre元素中的文本會(huì)保留空格和換行符。文本顯現(xiàn)為等寬字體。
下面我們看一個(gè)示例，這里我使用的是一段css代碼，你也可以換成其它的。如下：

body{
 background:#fff;
 font: 12px/24px 1.66;
}

當(dāng)我們用pre包裹它們時(shí)

body{
 background:#fff;
 font: 12px/24px 1.66;
}

會(huì)在瀏覽器上直接得到

可以看出上面的tab，空格，換行都完整的保留下來(lái)了。
我們可以把這段css代碼放到其它元素下，如得到下面的圖。

很完美，以后就可以用pre來(lái)標(biāo)識(shí)代碼了。哪里想用放哪里，但這里還有一些可以?xún)?yōu)化。

語(yǔ)義化

pre元素并不能代碼放入，里面的內(nèi)容是什么，可以是歌詞，可以是代碼，可以是其它文本。當(dāng)pre元素來(lái)展示源代碼的時(shí)候最好的方式是用code元素來(lái)包裹代碼，這樣既可以保持格式又可以代表語(yǔ)義，一舉數(shù)得。如上面的代碼可以改寫(xiě)為：

body{
 background:#fff;
 font: 12px/24px 1.66;
}

嵌套html其它標(biāo)簽

pre中最好不要包含可以導(dǎo)致段落斷開(kāi)的標(biāo)簽（如:p,標(biāo)題），雖然主流瀏覽器對(duì)此解析沒(méi)有問(wèn)題，但最好不要這樣使用。存在著語(yǔ)義不明的情況，比如無(wú)法判斷是想顯示結(jié)構(gòu)的不同展示，還是想把標(biāo)簽作為代碼的一部分顯示，最好對(duì)這里只包含代碼文本，對(duì)于標(biāo)簽進(jìn)行轉(zhuǎn)義如'>'對(duì)應(yīng)'>'。
pre元素中允許的文本可以包括物理樣式和基于內(nèi)容的樣式變化，還有鏈接、圖像和水平分隔線。當(dāng)把其它標(biāo)簽放到pre塊中時(shí)，會(huì)被直接渲染為正常元素。
示例如下：

[ti:凡人歌]
[ar:李宗盛]
[al:凡人歌]
[00:00](music)
[00:28]你我皆凡人，生在人世間；
[00:35]終日奔波苦，一刻不得閑；
[00:43]既然不是仙，難免有雜念；
[00:50]道義放兩旁，利字?jǐn)[中間。

顯示出來(lái)樣式如下：

問(wèn)題

文本過(guò)長(zhǎng)時(shí)，溢出

如果我們?cè)趐re里放置的文本過(guò)長(zhǎng)，中間也沒(méi)有換行，由于pre會(huì)保持文本的格式，導(dǎo)致文本溢出。
演示如下：

[ti:凡人歌][ar:李宗盛][al:凡人歌][00:00](music)[00:28]你我皆凡人，生在人世間；[00:35]終日奔波苦，一刻不得閑；[00:43]既然不是仙，難免有雜念；[00:50]道義放兩旁，利字?jǐn)[中間。

瀏覽器中的表現(xiàn)

解決方法1：給pre標(biāo)簽定義橫向滾動(dòng)條

pre{
 overflow:auto;
}

解決方法2：使用text-wrapping
直接定義pre標(biāo)簽里的css屬性white-space的值為pre-wrap。

pre{
 white-space:pre-wrap;
}

渲染html元素

上面已經(jīng)提到過(guò)，html元素會(huì)在pre標(biāo)簽中直接被解析。如果我們想顯示這些標(biāo)簽，只要把這些特殊符號(hào)轉(zhuǎn)換為符號(hào)實(shí)體，就可以了。如： "<" 代表 "<"，">" 代表 ">"。

<ul class="main-list"> 
 <li><a href="#">藏新線才是最西藏的進(jìn)、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進(jìn)、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進(jìn)、出線</a></li> 
 </ul>

也可以使用一些線上的工具去完成這個(gè)轉(zhuǎn)義的過(guò)程，這里可以百度一下，隨便找了一個(gè)截了個(gè)圖

意外的空格

有時(shí)候我們把代碼直接復(fù)制到頁(yè)面時(shí)，編輯器會(huì)給我們自動(dòng)縮進(jìn)對(duì)齊，這里其實(shí)是很好的，但這里遇到pre標(biāo)簽就有麻煩了，比如:

 
<ul class="main-list"> 
 <li><a href="#">藏新線才是最西藏的進(jìn)、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進(jìn)、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進(jìn)、出線</a></li> 
 </ul>

結(jié)果效果如下：

建議使用下面的形式來(lái)對(duì)代碼進(jìn)行排版。

第一行
//中間代碼進(jìn)行格式化
最后一行

擴(kuò)展

定義一下tab的大小

pre{
 tab-size:2;
}

但這個(gè)IE瀏覽器支持情況不太好。視情況來(lái)選擇吧。

使用等寬字體

可以方便排版，看起來(lái)比較舒服。

使用語(yǔ)法高亮

這個(gè)要借助一些庫(kù)來(lái)完成，比如highlight.js，具體怎么使用，大家百度吧。

總結(jié)

上面的這些只是一些小的總結(jié)，如果有什么其它方式的應(yīng)用，或這里沒(méi)提到的黑科技，大家可以在評(píng)論里提出來(lái)，一起討論。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com