前些日子一同事問了我一個關於code標籤和pre標籤的問題，嗯，是的，這兩個標籤湊到一塊，便出現了問題。於是總結了一下。此文就重點談code標籤和pre標籤嘍，談談他們的定義，區別，應用以及這兩個傢伙湊到一塊應該怎麼使用。以及當這兩個標籤嵌套使用時，不同的瀏覽器對這個嵌套的解析是什麼。
code標籤和pre標籤是可巢狀使用的，需要指出的是，某一版本在火狐之前某一版本在解析code標籤和pre標籤的巢狀時，順序不當會出現瀏覽器將DOM結構解析錯誤的問題呢。這只是火狐自己的問題啦，而且最新版本已經能夠正確解析出來啦。正確解析指的是能夠將DOM結構正確解析出來喲。總而言之，現在這兩個標籤的嵌套順序可以是任意的哦。不會出現DOM結構解析錯誤的現象啦。
當我們寫如下的程式碼：
<pre class="brush:php;toolbar:false">
<code>
hello world </code>
瀏覽器是正確解析為：
HTML5
下的省略規則 最新的HTML5規格定義了可以省略結束標籤的標籤，如標籤可以寫成標籤，將結束標籤省略掉。 pre標籤和code標籤也是跟p標籤一樣呢，是可以省略結束標籤呢，在HTML5標準下像下面這樣也是正確的呢。解析出來的和上面的解析結果是一樣的哦。
<pre class="brush:php;toolbar:false">
<code>
hello world標籤，用於表示電腦原始碼或其他機器可以閱讀的文字內容。軟體程式碼的編寫者習慣了寫程式碼時的程式碼格式，那麼這個標籤就是為軟體程式碼編寫者設計的， 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 <html>
3 <head>
4 <script type="text/javascript" src="loadxmldoc.js">
5 </script>
6 </head>
7 <body>
8 <script type="text/javascript">
9 xmlDoc=<<font color="blue">a href="dom_loadxmldoc.asp">loadXMLDoc</a></font>("books.xml");
10 document.write("xmlDoc is loaded, ready for use");
11 </script>
12 </body>
13 </html>
14
登入後複製在浏览器中的显示效果为：
左边的灰色的线是浏览器视窗的最左端呢，跟代码在文档中距离左边边距的距离是一样的呢。
通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。 但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。
以上是html中code標籤和pre標籤詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
