【问题标题】:Is it safe to omit </TD> and </TR> tags?省略 </TD> 和 </TR> 标签是否安全?
【发布时间】:2011-04-30 12:58:35
【问题描述】:

根据w3c&lt;/TD&gt;&lt;/TR&gt;标签是可选的,所以下表完全有效。

<table>
  <tr>
    <td>google
    <td>chrome
</table>

我测试过的所有浏览器都可以很好地呈现表格。我只是想问一下这是否通常被认为可以安全使用,或者我无法访问的旧浏览器是否会导致问题。谢谢。

它将包含许多表格的页面上的 gzip html 大小减少几个百分点。

【问题讨论】:

  • 如果替代您的人知道如何找到您,则不会
  • 某些版本的 IE 可能会报错!
  • 另外请记住,作为开发人员,您会发现许多编辑器不会遵循这一点,这使得使用编辑器的内置功能来查找/折叠到关闭标签变得更加困难。您还需要确保您使用的任何 XML DOM 解析器仍然可以正常工作。
  • 所有现代浏览器都可靠地支持这一点吗?几年前,对 omittags 的支持非常粗略,尽管这从一开始就是 HTML 的一部分。
  • 还有一点要记住,chrome\n 是表格单元格的内容。根据 CSS,与 &lt;td&gt; 在“chrome”之后立即关闭相比,这将导致视觉布局差异。

标签: html html-table w3c


【解决方案1】:

这是有效的 HTML,但无效的 XHTML。
它本质上没有任何问题。

如果您查看 Google's privacy policy(或他们的任何其他页面)的源代码,您会发现一些更简洁的 HTML。

这确实意味着您的页面将无法被 XML 解析器使用。

【讨论】:

  • 这可能是有效的,但它很恶心......个人意见
  • Google 的规模与我们大多数人不同;一个字节每天可以节省千兆字节。
  • 实际上,如果您从文档中删除最后一个脚本标记(无论如何都缺少惯用的 片段),它可以被 PHP 的 DOMDocument HTML 解析器读取。 .. 不完全是 XML,但仍然很有趣。
  • 哦,当然。谷歌很棒(因为这是政策,我相信它更像是千兆字节/小时或太字节/天)。但对于大多数项目来说,这是可怕的。
【解决方案2】:

它是安全的,因为标准中的可选性意味着所有浏览器(至少是那些远程重要的浏览器)都会实现这一点 - 并且浏览器标准合规性通常会运行到相反的一侧,试图正确地使用甚至是无效的 HTML,而不是因为缺少可选标签而失败。

话虽如此,我发现省略这些标签会使内容更难阅读,如果目标是尺寸优化,这对你来说可能很重要,也可能无关紧要。

附:另外,如果您有非常大的表,我想知道在处理此类结构时浏览器的 HTML 解析器是否会产生任何开销?如果没有基准测试或对 HTML 解析器的详细工作方式进行深入思考,我不确定,但如果发生这种情况,这可能是一个因素。

【讨论】:

  • 可读性不是问题,因为表格是由 Python 脚本自动生成的。但是,我注意到一个不同的问题。许多 TD 都附加了一个 mouseover/mouseout 事件以更改/恢复背景颜色,并且当省略关闭 TD/TR 时,IE 滞后于背景更改。其他浏览器没有。
  • @pdknsk - 我认为自动生成的 HTML 在可读性方面并不重要......直到我第一次不得不调试生成的 HTML/JS :)
  • 关于性能:我建议删除结束标签实际上改进了渲染时间。当你到达&lt;td&gt; 并且你已经在&lt;td&gt; 中时,浏览器知道这个元素不能直接嵌套并创建一个兄弟节点。使用结束标签,浏览器必须读取更多字符才能到达同一点。 (显然,即使是在一张大桌子上,这也只是微不足道的节省。)
【解决方案3】:

我强烈建议不要这样做,尽管它在 HTML4(和 5)中有效。与您产生的技术债务相比,节省的带宽是微不足道的。另请记住,它在 XHTML 中无效,因此请确保您的 doctype 设置正确。

【讨论】:

  • 哇;有人真的很喜欢他们未关闭的 HTML 标签!
  • 您承担了哪些技术债务?
  • 缺少一些结束 TD 标签不是“技术债务”。技术债务通常用于更大规模地描述与代码/领域相关的问题。
【解决方案4】:

HTML 从一开始就存在可选标签——它们是从 SGML 继承的特性,所以早期的浏览器一定能够处理它们。虽然 XHTML 摆脱了这一点并需要更统一的语法,但这不会影响您,除非您明确告诉浏览器以 XML 模式解析。在使用 HTML 4/5 的标准解析器时,我从未遇到过问题。

由于 HTML5 so carefully 描述了某些标签何时是可选的,我认为这意味着有人进行了大量测试以确保在这些情况下,大多数浏览器生成相同的文档树。

虽然节省的空间可以忽略不计,但我发现当我在标记中工作时,去掉 &lt;p&gt;&lt;li&gt;&lt;td&gt;&lt;tr&gt; 的结束标签只会让我的生活更轻松,并且让我不太可能犯错误。

【讨论】:

    【解决方案5】:

    我个人认为这不是一个好的做法。查看规范并没有提供很多信息。我知道 XHTML 需要它,所以我查阅了 HTML 5 规范。 HTML 5 似乎与您链接的 HTML 4 相同,但给出了a little more information:

    如果 td 元素后面紧跟着 td 或 th 元素,或者父元素中没有更多内容,则可以省略 td 元素的结束标记。

    【讨论】:

      【解决方案6】:

      我建议总是关闭你的标签。没有太多的理由不这样做。浏览器可以处理一些不正确关闭的标签,但为了安全起见(这是一种很好的编程习惯!),关闭你的标签!

      【讨论】:

      • 我们不是在谈论关闭不当的标签。该标记是正确的,并且标签根据语言标准正确关闭。
      【解决方案7】:

      出于以下几个原因关闭 HTML 中的所有标签:

      1. 不允许关闭标签,但现代 XHTML 不正确。它被弃用的方式与 HTML 样式属性支持 CSS 的方式相同
      2. 如果您关闭标签,下一个人的可读性会更高
      3. 如果更严格地遵守规则,浏览器实际上会更轻松地解析您的源代码,即使这会使源代码更长

      【讨论】:

      • 为什么冗长的关闭标签是 HTML,因为它在另一种语言中是必需的?您是否使用 $ 标记所有全局 JavaScript 变量,因为它在 Ruby 中是必需的?只使用不可变数据结构,因为 Haskell 需要它?
      • @Chuck:多么失败。 JavaScript 不是 Ruby 的更新版本。你的例子很可笑。这更像是比较 C90 和 C99。此外,HTML 中的结束标记并不冗长,很清楚。这就像说使用超过 1 个字符的变量名是冗长的。
      • @Rafe Kettler:XHTML 不是 HTML5 的更新版本——它是作为 XML 方言的 HTML 的重新表述。我说“详细关闭”是因为标签已经关闭,只需创建另一个tr 或关闭table。写出结束标签是一种更详细的方式来完成与不写出结束标签相同的事情。是否清楚是主观的,但毫无疑问更冗长。并且说它“更严格地遵守 HTML 的规则”显然是错误的。
      • 就像我在回答问题时所说的那样,1.) 更清晰,2.) 更兼容,3.) 更现代。你可以整天为糟糕的风格辩护,但归根结底有更好的方法来做到这一点。
      • 那么你有“它更清晰”——这是主观的,但我同意它——还有两个谎言。 HTML5 是最新的(即现代的)HTML 标准,它说结束标记是可选的,所以“更现代”是错误的。而且它兼容每一个 HTML 标准和每一个浏览器 AFAIK,所以在 HTML 的上下文中,“更兼容”是错误的。欢迎您发表自己的意见,但您仍然无法编造自己的事实。
      【解决方案8】:

      当然,如果你只使用 HTML,那绝对没有问题,但 XHTML 不是这种情况,但我认为你不能得到那么多,我建议不要滥用表格,记住 div 比表格更好

      【讨论】:

      • Divs 在显示表格数据方面并不比表格好。
      • 它们比普通的旧表更灵活,我更喜欢 Div 常规布局,而不是尝试用
      • @Necronet 但这可能不一定是关于布局,它可能是用于文字表,因为这些在显示表格数据时相当常见。
      【解决方案9】:

      可以使用静态页面而不是动态页面......进行调试

      【讨论】:

      • 我没有完全得到这个答案?....你是什么意思静态是但动态否?
      • @Necronet:我认为他试图理解的是,这种简写方式使得调试 HTML 生成器的输出变得更加困难(可能是因为它更难阅读)。
      【解决方案10】:

      如果可能,您应该关闭您的 &lt;TR&gt;&lt;TD&gt;标签,但并非总是如此,因为在某些情况下它可能会打扰您。这是因为 &lt;TR&gt;&lt;TD&gt;tags 可以被设置为 display:none&lt;/TR&gt; 标签不能。这意味着如果您使用&lt;/TR&gt;,您希望通过媒体查询扩展/限制显示的场景将失败。考虑以下代码:

      <style>
      @media (max-width : 480px) {
      .hidden-class {display:none;}
      }
      </style>
      
      <table>
         <tr>
            <td>cell 1</td>
         </tr class="hidden-class">  <!-- this will fail! -->
         <tr class="hidden-class">
            <td>cell 2</td>
         </tr>                       <!-- this could stay -->
      </table>
      

      这意味着你可以写成:

       <table>
         <tr>
            <td>cell 1</td>
         </tr>  <!-- this will now close the TR for every screen width, which will destroy your extenstion -->
         <tr class="hidden-class">
            <td>cell 2</td>
         </tr>                       <!-- this could stay -->
      </table>
      

      这意味着这样做的唯一方法是首先省略 THE:

           <table>
         <tr>
            <td>cell 1</td>
         <tr class="hidden-class">
            <td>cell 2</td>
         </tr>                       <!-- this could stay -->
      </table>
      

      【讨论】:

      • 现在为什么会有人将属性放在结束标签上?这在任何地方都是无效的。如果您发现自己经常这样做,那么您还有其他问题。
      • 嗯...#Jeff Mercado,关键是您不能将该属性放在结束标签上,但是您希望将其放在开始标签上。这意味着 将与表格不匹配,这是这​​个问题的重点......:你不应该总是使用
      • 如果这是你的意思,那么它与问题无关。您通过引入无效标记到底证明了什么?您所证明的只是您不应该放置无效标记,因为它会破坏事物。
      猜你喜欢
      • 2014-06-07
      • 2013-03-23
      • 2017-01-26
      • 1970-01-01
      • 2012-10-30
      • 2015-02-11
      • 1970-01-01
      • 2022-12-11
      • 2012-04-16
      相关资源
      最近更新 更多