html中code標籤和pre標籤詳解
- 黄舟原創
- 2017-07-08 11:33:265856瀏覽
前言
前些日子一同事問了我一個關於code標籤和pre標籤的問題，嗯，是的，這兩個標籤湊到一塊，便出現了問題。於是總結了一下。此文就重點談code標籤和pre標籤嘍，談談他們的定義，區別，應用以及這兩個傢伙湊到一塊應該怎麼使用。以及當這兩個標籤嵌套使用時，不同的瀏覽器對這個嵌套的解析是什麼。
一、巢狀順序
code標籤和pre標籤是可巢狀使用的，需要指出的是，某一版本在火狐之前某一版本在解析code標籤和pre標籤的巢狀時，順序不當會出現瀏覽器將DOM結構解析錯誤的問題呢。這只是火狐自己的問題啦，而且最新版本已經能夠正確解析出來啦。正確解析指的是能夠將DOM結構正確解析出來喲。總而言之，現在這兩個標籤的嵌套順序可以是任意的哦。不會出現DOM結構解析錯誤的現象啦。
當我們寫如下的程式碼：
<pre class="brush:php;toolbar:false">
<code>
hello world </code>
瀏覽器是正確解析為：
HTML5
下的省略規則 最新的HTML5規格定義了可以省略結束標籤的標籤，如e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤可以寫成e388a4556c0f65e1904146cc1a846bee標籤，將結束標籤省略掉。 pre標籤和code標籤也是跟p標籤一樣呢，是可以省略結束標籤呢，在HTML5標準下像下面這樣也是正確的呢。解析出來的和上面的解析結果是一樣的哦。
<pre class="brush:php;toolbar:false">
<code>
hello world 火狐和IE9以及Chrome都能正確解析呢。這裡建議大家讀一讀HTML5標準下標籤的省略規範嘍：也就是上面兩個寫法都是正確的。 但是要注意一點的是，IE9下預設標準的規格是下面這個圖。 ############ 而火狐和Chrome預設的標準就是下面這張圖。 ############### 總而言之，都是正確的囉。 DOM結構都是一樣的嘍。當然空格有可能會被當成節點呢。就不深入討論啦。 ######三、code標籤和pre標籤的定義###### code標籤：###### 1、code標籤的定義: ffbe95d20f3893062224282accb13e8f標籤，用於表示電腦原始碼或其他機器可以閱讀的文字內容。軟體程式碼的編寫者習慣了寫程式碼時的程式碼格式，那麼這個ffbe95d20f3893062224282accb13e8f標籤就是為軟體程式碼編寫者設計的， code標籤內的文字將會用等寬、類似電傳打字機樣式的字型（Courier）顯示出來。 ###### 2、code標籤的應用，應該是只用在表示電腦程式原始碼或其他機器可以閱讀的文字內容。 ffbe95d20f3893062224282accb13e8f 標籤的功能有：將文字變成等寬字體；還有一個功能就是暗示這段文字是原始程式碼。那麼根據第二個功能，將來瀏覽器可能會根據自己的實際情況添加效果。例如，程式設計師的瀏覽器可能會尋找ffbe95d20f3893062224282accb13e8f 片段，並執行某些額外的文字格式化處理，如###循環###和###條件判斷###語句的特殊縮排等。 ###### 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标签的定义，e03b848252eb9375d56be284e690e873标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。
2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、e388a4556c0f65e1904146cc1a846bee 和 208700f394e4cf40a7aa505373e0130b 标签）绝不能包含在 e03b848252eb9375d56be284e690e873 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 3499910bf9dac5ae3c52d5ede7383485 标签）放到
e03b848252eb9375d56be284e690e873 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
3、pre标签的示例：下面的代码(html中的源代码)
1 e03b848252eb9375d56be284e690e873 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=<76c0787f2ea8051109cc1ff3d616e7dea href="dom_loadxmldoc.asp">loadXMLDoc</a>e6e38b3c62e8df885fe2e3986461aa63("books.xml"); 10 document.write("xmlDoc is loaded, ready for use"); 11 </script> 12 </body> 13 </html> 14 bc5574f69a0cba105bc93bd3dc13c4ec
在浏览器中的显示效果为：
左边的灰色的线是浏览器视窗的最左端呢，跟代码在文档中距离左边边距的距离是一样的呢。
四、code标签和pre标签之间的关系
通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。 但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。
以上是html中code標籤和pre標籤詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
標籤與標籤的作用與用法下一篇：html中標籤與標籤的作用與用法