zoukankan      html  css  js  c++  java
  • 可省略的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

    机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
  • 相关阅读:
    docker命令大全
    centos mysql 实战 第二十六节课 mysql in docker
    赋予楼宇“智慧大脑”:厦门双子塔3D可视化
    智慧矿山-选矿工艺数字 3D 可视化
    数字孪生赋能工业发展:可视化“智”造航天新里程
    浅谈可视化设计-数据时代的美味“烹饪师”(下篇)
    工业互联网背景下的高炉炉体三维热力图监控系统
    浅谈可视化设计-数据时代的美味“烹饪师”(上篇)
    加速城市轨道交通发展,数字化运营新基建搭建地铁管理系统
    加油站三维可视化监控系统,安全管理智慧运营
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2799538.html
Copyright © 2011-2022 走看看