html中code標籤和pre標籤詳解

 

前言

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

一、巢狀順序

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

      當我們寫如下的程式碼：

#

<pre class="brush:php;toolbar:false">
    <code>
        hello world    </code>

      瀏覽器是正確解析為：

 

 FF瀏覽器對上面程式碼的解析 

#二、關於pre標籤和code標籤在

HTML5

下的省略規則

      最新的HTML5規格定義了可以省略結束標籤的標籤，如

標籤可以寫成

標籤，將結束標籤省略掉。 pre標籤和code標籤也是跟p標籤一樣呢，是可以省略結束標籤呢，在HTML5標準下像下面這樣也是正確的呢。解析出來的和上面的解析結果是一樣的哦。

<pre class="brush:php;toolbar:false">
    <code>
          hello world

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

       但是要注意一點的是，IE9下預設標準的規格是下面這個圖。

############      而火狐和Chrome預設的標準就是下面這張圖。 ###############     總而言之，都是正確的囉。 DOM結構都是一樣的嘍。當然空格有可能會被當成節點呢。就不深入討論啦。 ######三、code標籤和pre標籤的定義######      code標籤：######      1、code標籤的定義: 標籤，用於表示電腦原始碼或其他機器可以閱讀的文字內容。軟體程式碼的編寫者習慣了寫程式碼時的程式碼格式，那麼這個標籤就是為軟體程式碼編寫者設計的， code標籤內的文字將會用等寬、類似電傳打字機樣式的字型（Courier）顯示出來。 ######      2、code標籤的應用，應該是只用在表示電腦程式原始碼或其他機器可以閱讀的文字內容。 標籤的功能有：將文字變成等寬字體；還有一個功能就是暗示這段文字是原始程式碼。那麼根據第二個功能，將來瀏覽器可能會根據自己的實際情況添加效果。例如，程式設計師的瀏覽器可能會尋找 片段，並執行某些額外的文字格式化處理，如###循環###和###條件判斷###語句的特殊縮排等。 ######      3、code標籤的範例，我們可以看看下面不加code標籤的文字片段和加上code標籤的文字片段之間的格式上的差異。要注意的是，這裡只是示範了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标签的一个常见的应用便是用来保存计算机中的源代码文本。</p><p>      2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre class="brush:php;toolbar:false"> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 <a> 标签）放到 <br/><pre class="brush:php;toolbar:false"> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。</p><p>      3、pre标签的示例：下面的代码(html中的源代码)</p><p class="cnblogs_code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 1 <pre class="brush:php;toolbar:false"> 
 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 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 

登入後複製

      在浏览器中的显示效果为：

      左边的灰色的线是浏览器视窗的最左端呢，跟代码在文档中距离左边边距的距离是一样的呢。

四、code标签和pre标签之间的关系

      通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。 但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。

以上是html中code標籤和pre標籤詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！