code標簽和pre標簽

 

前言

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

一、嵌套順序

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

      當我們寫如下的代碼時：

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

      瀏覽器是正確解析 就是：

 

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

 

二、關於pre標簽和code標簽在HTML5下的省略規則

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

<pre>
    <code>
          hello world

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

       但是需要注意一點的是，IE9下默認標准的規范是下面這個圖。

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

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

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

      code標簽：

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

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

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

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

<code>
    document.getELementById("id1");
    document.getELementById("id2");
    document.getELementById("id3");
</code>
<br>
document.getELementById("id4");

      顯示效果為：

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

      pre標簽：

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

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

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

<pre>
    &lt;html&gt;
    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=&lt;<font color="blue">a&nbsp;href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a&gt;</font>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

</pre>

 

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

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

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

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