Ruby's Louvre

每天学习一点点算法

导航

可省略的html标签及其实践 (本文不讨论xhtml、xml语法)

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

有些html元素的结束标签是可选的,如:bodycolgroupdddtheadhtmllioptgroupoptionptbodytdtfootththeadtr

这些标签不一定需要结束是因为在多数情况下,它们的结束标签通过文档中的另一个标签隐式声明了。例如:在多数web页中,一个段落 <p> 后面通常跟着另一个段落或其它块级标签,浏览器会根据下一个段落的开始标签结束当前段落。

而像 <colgroup> 这样的标签,它们可以包含或不含类似 <col> 这样的特定标签。如果 <colgroup> 没包含 <col> ,即使不写 </colgroup> 也不会引起任何错误(列数可以通过span属性定义)。

不写结束标签能提高页面加载速度

不写结束标签的最大好处是:由于这些标签实际占用了字符,省略它们可以让页面size变得更小。如果你正在寻找提高页面加载速度的方法,处理掉这些可选的结束标签是一个不错的开始。对那些有很多段落、表格的页面来说,这样做能节省不少开销。

不写结束标签能避免textNode出现在元素前后

我们知道根据white-space processing model,源码中标签前后的空白字符在生成dom时,会按照规则进行忽略或合并。后者将成空白字符合并为一个空格,这会带来不少麻烦。

例如将一组块级元素 displayinline|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>
<head>
  • 它是空的
  • 它的内容以元素作为开始
</head>
<body>
</body>
</li>
  • 在当前 li 元素后面的元素是 li
  • 当前 li 元素是父元素的最后一个子元素
</dt>
  • 在当前 dt 元素后面的元素是 dtdd
</dd>
  • 在当前 dd 元素后面的元素是 dddt
  • 当前 dd 元素是父元素的最后一个子元素
</p>
</rt>
  • 在当前 rt 元素后面的元素是 rtrp
  • 当前 rt 元素是父元素的最后一个子元素
</rp>
  • 在当前 rp 元素后面的元素是 rtrp
  • 当前 rp 元素是父元素的最后一个子元素
</optgroup>
</option>
<colgroup>
  • 它不能是空的
  • 它的内容以 col 元素作为开始,同时在它前面的元素不能是省略了结束标签的 optgroup
</colgroup>
</thead>
<tbody>
  • 它不能是空的
  • 它的内容以tr元素作为开始,同时在它前面的元素不能是省略了结束标签的 tbodytheadtfoot
</tbody>
  • 在当前 tbody 元素后面的元素是 tbodytfoot
  • 当前 tbody 元素是父元素的最后一个子元素
</tfoot>
  • 在当前 tfoot 元素后面的元素是 tbody
  • 当前 tfoot 元素是父元素的最后一个子元素
</tr>
  • 在当前 tr 元素后面的元素是 tr
  • 当前 tr 元素是父元素的最后一个子元素
</td>
  • 在当前 td 元素后面的元素是 tdth
  • 当前 td 元素是父元素的最后一个子元素
</th>
  • 在当前 th 元素后面的元素是 tdth
  • 当前 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

posted on 2012-12-03 15:10  司徒正美  阅读(1858)  评论(0编辑  收藏  举报