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>標籤就是為軟體程式碼編寫者設計的， code標籤內的文字將會用等寬、類似電傳打字機樣式的字型（Courier）顯示出來。 ######      2、code標籤的應用，應該是只用在表示電腦程式原始碼或其他機器可以閱讀的文字內容。 <code> 標籤的功能有：將文字變成等寬字體；還有一個功能就是暗示這段文字是原始程式碼。那麼根據第二個功能，將來瀏覽器可能會根據自己的實際情況添加效果。例如，程式設計師的瀏覽器可能會尋找<code> 片段，並執行某些額外的文字格式化處理，如###循環###和###條件判斷###語句的特殊縮排等。 ######      3、code標籤的範例，我們可以看看下面不加code標籤的文字片段和加上code標籤的文字片段之間的格式上的差異。要注意的是，這裡只是示範了code標籤的第一個功能，至於暗示瀏覽器這段程式碼時原始程式的功能，需要在特定的瀏覽器上才能顯示。 ######      如下程式碼在瀏覽器端的顯示效果為：###<pre class='brush:php;toolbar:false;'>1 &lt;code&gt; 2 document.getELementById(&quot;id1&quot;); 3 document.getELementById(&quot;id2&quot;); 4 document.getELementById(&quot;id3&quot;); 5 &lt;/code&gt; 6 &lt;br&gt; 7 document.getELementById(&quot;id4&quot;);</pre>###      顯示效果為：################      看到不同了吧，哈哈##########      看到不同了吧，哈哈。下面接著看pre標籤啦。 ######      pre標籤：###<p>      1、pre标签的定义，</p> <pre class="brush:php;toolbar:false">标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。&lt;p&gt;      2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、&lt;/p&gt;&lt;p&gt; 和 &lt;/p&gt;&lt;address&gt; 标签）绝不能包含在 &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 &lt;a&gt; 标签）放到 &lt;br&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。&lt;p&gt;      3、pre标签的示例：下面的代码(html中的源代码)&lt;/p&gt;&lt;p class=&quot;cnblogs_code&quot;&gt;&lt;br&gt;&lt;/p&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 1 &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;   2     100db36a723c770d327fc0aef2ce13b1   3     93f0f5c25f18dab9d176bd4f6de5d30e   4     8f1fce76f77d4e6f6c69e7fe3c3a1bbb   5     2cacc6d41bbb37262a98f745aa00fbf0   6     9c3bca370b5104690d9ef395f2c5f8d1   7     6c04bd5ca3fcae76e30b72ad730ca86d   8     8019067d09615e43c7904885b5246f0a   9     xmlDoc=77893f97a0dd82388e0d49872b282c31loadXMLDoc5db79b134e9f6b82c0b36e0489ee08ed(&quot;books.xml&quot;);  10     document.write(&quot;xmlDoc is loaded, ready for use&quot;);  11     2cacc6d41bbb37262a98f745aa00fbf0  12     36cc49f0c466276486e50c850b7e4956  13     73a6ac4ed44ffec12cee46588e518a5e  14 </pre></pre><p>      在浏览器中的显示效果为：</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/194/9473f9affd96e026e773b6f20db6ad9f-4.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p>      左边的灰色的线是浏览器视窗的最左端呢，跟代码在文档中距离左边边距的距离是一样的呢。</p><h2 id="四-code标签和pre标签之间的关系">四、code标签和pre标签之间的关系</h2><p>      通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。 但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。</p></pre></a></pre> </address></pre>

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