首頁 > 其他

可省略的html標籤及其實踐 （本文不討論xhtml、xml文法）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

原貼地址：http://moonless.net/demo/optional-tags/

有些html元素的結束標籤是可選的，如：body、 colgroup、 dd、 dt、 head、 html、 li、 optgroup、 option、 p、 tbody、 td、 tfoot、 th、 thead、 tr 等

這些標籤不一定需要結束是因為在多數情況下，它們的結束標籤通過文檔中的另一個標籤隱式聲明了。例如：在多數web頁中，一個段落 <p> 後面通常跟著另一個段落或其它塊級標籤，瀏覽器會根據下一個段落的開始標籤結束當前段落。

而像 <colgroup> 這樣的標籤，它們可以包含或不含類似 <col> 這樣的特定標籤。如果 <colgroup> 沒包含 <col> ，即使不寫 </colgroup> 也不會引起任何錯誤（列數可以通過span屬性定義）。

√ 不寫結束標籤能提高頁面載入速度

不寫結束標籤的最大好處是：由於這些標籤實際佔用了字元，省略它們可以讓頁面size變得更小。如果你正在尋找提高頁面載入速度的方法，處理掉這些可選的結束標籤是一個不錯的開始。對那些有很多段落、表格的頁面來說，這樣做能節省不少開銷。

√ 不寫結束標籤能避免textNode出現在元素前後

我們知道根據white-space processing model，源碼中標籤前後的空白字元在產生dom時，會按照規則進行忽略或合并。後者將成空白字元合并為一個空格，這會帶來不少麻煩。

例如將一組區塊層級元素 display 為 inline|inline-block 後，處理其間的空格會很痛苦。

× 不寫結束標籤可能帶來的問題

這裡列幾個重要的：

寫結束標籤是為了約束結構
雖然省略了結束標籤的web頁能快速載入，但它也許馬上會變成你的維護負擔。
比如，為省略了結束標籤的表格添加新行或列時你可能會覺得很痛苦。雖然能用插入縮排來解決，但這同時抵消了不寫結束標籤提高的那一點點工作效率。
css、js依賴完整元素
雖然多數瀏覽器可以顯示並渲染標籤沒有閉合的元素，但主動閉合標籤能明確js和css的行為。
如果你在使用非常精確的布局，並省去結束標籤，這同時意味著放棄了對精度、健壯度的控制——你讓瀏覽器自行判斷標籤的結束位置，但有時它很棒，有時它很囧……
結束標籤有時不能省略
在HTML5中， </p> 標籤在後面直接跟大約25種元素時可以被省略。但HTML5中有超過100種元素，你能記住可省略結束標籤的每種情形嗎？也許不省略它們更容易些。
可選的html標籤及其約束

譯註1：下表中，如非特別說明， 空白字元 在文檔中、節點前後都是可以存在或忽略的

譯註2：“空白字元”是指：空格(U+0020)、定位字元(U+0009)、換行(U+000A)、斷行符號(U+000D)、換頁(U+000C)。

譯註3：下表中，“元素”均指 nodeType=1 的dom節點）

注1：省略元素的開始標籤並不意味著開始標籤不存在，它仍是隱式存在的。例如，一個HTML文檔總是有一個根html元素，儘管字串 <html> 並未在文檔中出現。）

注2：如果開始標籤含有任何屬性定義，開始標籤不能省略

可省標籤 省略前提
<html>
  • 它的內容不能以 注釋 作為開始
</html>
  • 當前 html 元素的後面不能出現 注釋
<head>
  • 它是空的
  • 它的內容以元素作為開始
</head>
  • 當前 head 元素的nextSibling不能是 空白字元 或 注釋
<body>
  • 它是空的
  • 它的內容不能以 空白字元、注釋、script 元素、style 元素作為開始
</body>
  • 當前 body 元素的後面不能出現 注釋
</li>
  • 在當前 li 元素後面的元素是 li
  • 當前 li 元素是父元素的最後一個子項目
</dt>
  • 在當前 dt 元素後面的元素是 dt 或 dd
</dd>
  • 在當前 dd 元素後面的元素是 dd 或 dt
  • 當前 dd 元素是父元素的最後一個子項目
</p>
  • 在當前 p 元素後面的元素是 address、 article、 aside、 blockquote、 dir、 div、 dl、 fieldset、 footer、 form、 h1、 h2、 h3、 h4、 h5、 h6、 header、 hgroup、 hr、 menu、 nav、 ol、 p、 pre、 section、 ul

    譯註5：規範裡 table 也在其中，但實際上它的預設 display 為 table ，在一些瀏覽器中也會閉合錯誤，所以大體上認為應增加一種約束，即：標籤的預設 display 應為 block

  • 當前 p 元素是父元素的最後一個子項目，同時父元素不能是 a
</rt>
  • 在當前 rt 元素後面的元素是 rt 或 rp
  • 當前 rt 元素是父元素的最後一個子項目
</rp>
  • 在當前 rp 元素後面的元素是 rt 或 rp
  • 當前 rp 元素是父元素的最後一個子項目
</optgroup>
  • 在當前 optgroup 元素後面的元素是 optgroup
  • 當前 optgroup 元素是父元素的最後一個子項目
</option>
  • 在當前 option 元素後面的元素是 option 或 optgroup
  • 當前 option 元素是父元素的最後一個子項目
<colgroup>
  • 它不能是空的
  • 它的內容以 col 元素作為開始，同時在它前面的元素不能是省略了結束標籤的 optgroup 。
</colgroup>
  • 當前 optgroup 元素的nextSibling不能是 空白字元 或 注釋
</thead>
  • 在當前 thead 元素後面的元素是 tbody 或 tfoot
<tbody>
  • 它不能是空的
  • 它的內容以tr元素作為開始，同時在它前面的元素不能是省略了結束標籤的 tbody、thead、tfoot 。
</tbody>
  • 在當前 tbody 元素後面的元素是 tbody 或 tfoot
  • 當前 tbody 元素是父元素的最後一個子項目
</tfoot>
  • 在當前 tfoot 元素後面的元素是 tbody
  • 當前 tfoot 元素是父元素的最後一個子項目
</tr>
  • 在當前 tr 元素後面的元素是 tr
  • 當前 tr 元素是父元素的最後一個子項目
</td>
  • 在當前 td 元素後面的元素是 td 或 th
  • 當前 td 元素是父元素的最後一個子項目
</th>
  • 在當前 th 元素後面的元素是 td 或 th
  • 當前 th 元素是父元素的最後一個子項目
參考資料：

http://webdesign.about.com/od/htmltags/qt/optional-html-end-tags-when-to-include-them.htm

http://www.w3.org/TR/html5/syntax.html#optional-tags

http://www.w3.org/TR/html5/syntax.html#raw-text-elements

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More