李宗輝

前言

      前些日子一同事問了我一個關于code標簽和pre標簽的問題，嗯，是的，這兩個標簽湊到一塊，便出現(xiàn)了問題。于是總結(jié)了一下。此文就重點談一下code標簽和pre標簽嘍，談談他們的定義，區(qū)別，應用以及這兩個家伙湊到一塊應該怎么使用。以及當這兩個標簽嵌套使用時，不同的瀏覽器對這個嵌套的解析是什么。

一、嵌套順序

       code標簽和pre標簽是可以嵌套使用的，需要指出的是，火狐之前某一版本在解析code標簽和pre標簽的嵌套時，順序不當會出現(xiàn)瀏覽器將DOM結(jié)構解析錯誤的問題呢。這僅僅是火狐自己的問題啦，而且最新版本已經(jīng)能夠正確解析出來啦。正確解析指的是能夠?qū)OM結(jié)構正確解析出來喲。總而言之，現(xiàn)在這兩個標簽的嵌套順序可以是任意的哦。不會出現(xiàn)DOM結(jié)構解析錯誤的現(xiàn)象啦。

      當我們寫如下的代碼時：

<pre>
    <code>
        hello world
    </code>
</pre>

      瀏覽器是正確解析 就是：

 FF瀏覽器對上面代碼的解析

二、關于pre標簽和code標簽在HTML5下的省略規(guī)則

      最新的HTML5規(guī)范定義了可以省略結(jié)束標簽的標簽，如<p></p>標簽可以寫成<p>標簽，將結(jié)束標簽省略掉。pre標簽和code標簽也是和p標簽一樣呢，是可以省略結(jié)束標簽呢，在HTML5標準下像下面這樣也是正確的呢。解析出來的和上面的解析結(jié)果是一樣的哦。

<pre>
    <code>
          hello world

      火狐和IE9以及Chrome都能正確解析呢。這里建議大家讀一讀HTML5標準下標簽的省略規(guī)范嘍：也就是上面兩個寫法都是正確的。

       但是需要注意一點的是，IE9下默認標準的規(guī)范是下面這個圖。

      而火狐和Chrome下默認的標準是下面這個圖。

     總而言之，都是正確的啦。DOM結(jié)構都是一樣的嘍。當然空格有可能會被當做節(jié)點呢。就不深入討論啦。

三、code標簽和pre標簽的定義

      code標簽：

      1、code標簽的定義: <code>標簽， 用于表示計算機源代碼或者其他機器可以閱讀的文本內(nèi)容。軟件代碼的編寫 者習慣了編寫代碼時的代碼格式，那么這個<code>標簽就是為軟件代碼編寫者設計的， code標簽內(nèi)的文本將用等寬、類似電傳打字機樣式的字體（Courier）顯示出來。

      2、code標簽的應用，應該是只用在表示計算機程序源代碼或者其他機器可以閱讀的文本內(nèi)容上。<code> 標簽的功能有：將文本變成等寬字體；還有一個功能就是暗示這段文本是源程序代碼。那么根據(jù)第二個功能，將來瀏覽器可能會根據(jù)自己的實際情況添加效果。例如，程序員的瀏覽器可能會尋找 <code> 片段，并執(zhí)行某 些額外的文本格式化處理，如循環(huán)和條件判斷語句的特殊縮進等。

      3、code標簽的示例，我們可以看看下面不加code標簽的文本片段和加上code標簽的文本片段之間的格式上的區(qū)別。需要注意的是，這里只是演示了code標簽的第一個功能，至于暗示瀏覽器這段代碼時源程序的功能，需要在具體的瀏覽器上才能顯示。

      如下代碼在瀏覽器端的顯示效果為：

1 <code>
2     document.getELementById("id1");
3     document.getELementById("id2");
4     document.getELementById("id3");
5 </code>
6 <br>
7 document.getELementById("id4");

      顯示效果為：

      看到不同了吧，哈哈。下面接著看pre標簽啦。

      pre標簽：

      1、pre標簽的定義，<pre>標簽用來定義預格式化的文本，被包圍在pre標簽中的文本通常會保留空格和換行符， 而文本也會呈現(xiàn)出等寬字體。同樣，pre標簽的一個常見的應用便是用來保存計算機中的源代碼文本。

      2、pre標簽的功能，pre標簽一個常見的應用便是用來保存計算機中的源代碼的文本。但是，需要注意的是， 可以導致段落斷開的標簽（例如標題、<p> 和 <address> 標簽）絕不能包含在 <pre> 所定義的塊里。 pre標簽允許的文本可以包括物理樣式和基于內(nèi)容的樣式變化，還有鏈接、圖像和水平分隔線。 當把其他標簽（比如 <a> 標簽）放到
<pre> 塊中時，就像放在 HTML/XHTML 文檔的其他部分中一樣即可。

      3、pre標簽的示例：下面的代碼(html中的源代碼)

 1 <pre>
 2     &lt;html&gt;
 3     &lt;head&gt;
 4     &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
 5     &lt;/script&gt;
 6     &lt;/head&gt;
 7     &lt;body&gt;
 8     &lt;script type=&quot;text/javascript&quot;&gt;
 9     xmlDoc=&lt;<font color="blue">a&nbsp;href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a&gt;</font>(&quot;books.xml&quot;);
10     document.write(&quot;xmlDoc is loaded, ready for use&quot;);
11     &lt;/script&gt;
12     &lt;/body&gt;
13     &lt;/html&gt;

14 </pre>

      在瀏覽器中的顯示效果為：

      左邊的灰色的線是瀏覽器視窗的最左端呢，跟代碼在文檔中距離左邊邊距的距離是一樣的呢。

四、code標簽和pre標簽之間的關系

      通過定義我們可以知道code標簽和pre標簽之間的關系，兩者的共同點是應用上類似，都主要應用于瀏覽器顯示計算機中的源代碼。 但是兩者之間還是有很大不同的，code標簽的一個功能是暗示瀏覽器code標簽所包圍的文本是計算機源代碼，瀏覽器可以做出自己的 樣式處理，pre標簽則沒有這項功能，但是pre標簽可以保留文本中的空格和換行符，保留文本中的空格和換行符是計算機源代碼顯示 所必須的樣式。那么這個時候我們可以想象一下，code標簽和pre標簽可不可以一塊使用呢？答案是可以的，code標簽和pre標簽是 可以嵌套使用的，但是必須注意兩者的嵌套順序。