4

我总是会说不，但后来我从Semantic UI（和Fomantic UI）中发现了这段代码，这是一个非常流行的前端框架：

<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content">
    Account Settings
    <div class="sub header">Manage your account settings and set e-mail preferences.</div>
  </div>
</h2>

这段代码让我觉得很不寻常，原因有两个：(1)<i>标记已被重新用作图标的通用钩子，(2) 嵌套<div>在<h2>元素内部。我质疑第一个的语义，以及第二个的有效性。

现在我想代码在所有主流浏览器中都可以使用，或者他们不会使用它，但它看起来并不习惯。更重要的是，它是否有效？

注意：我在问题中使用了“块级元素”一词（每个人都理解），但正如MDN 文档指出的那样：

在 4.01 之前的 HTML 规范中使用了块级元素与内联元素的区别。在 HTML5 中，这种二元区别被一组更复杂的内容类别所取代。而“inline”类别大致对应于 phrasing content的类别，“block-level”类别并不直接对应任何HTML5内容类别，而是“block-level”和“inline”元素组合在一起对应流HTML5 中的内容 。

4

3 回答 3

3

这是令人讨厌的代码，完全不符合规范。在 h2 中，您只能使用内联元素来 表达内容元素，如span, strong,em等。<i>标签通常用于图标，所以没什么令人震惊的。但是divs ...？坏得令人震惊。将它们切换到<span>并且代码将有效。

这是 h1、h2 等可以包含的官方规范。所谓的“短语内容”：https ://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content

编辑：MDN 不是官方规范，正如评论中的原始海报所指出的那样。但是，它基于官方规范。HTML 的权威来源据说是来自 Web 超文本应用技术工作组 (WHATWG) 的 HTML 生活标准。它们提供了有关措辞内容和标题(h1-h6) 的良好信息。

于 2021-02-07T05:04:52.320 回答
2

HTML 源自 SGML，旨在标准化纸质文档的布局。在这个逻辑中，标签H1到H6是为不同级别的标题制作的，所以简单地说标题是一种广告，它必须简短而简短。

因此，原则上，H 标签不应包含分层级别的信息。

此外，SGML 中不存在 div 标签，早期的 HTML 版本中也不存在。DIV 标签是微软为取代 LAYER 标签而制作的，这是许多旨在消除除 IE 之外的其他浏览器的策略的结果。这个故事众所周知，微软也因其中几个事实而受到谴责。

于 2021-02-07T05:34:37.147 回答
0

根据 HTML5 规范，它是无效的……但是很多 UI 库并不遵循这种严格的语义方式，甚至谷歌<center>也在其主页中使用 HTML5 Doctype 的标签。所以这不是“必须”，也许只是“应该”......遵循规范是一种很好的做法，但开发人员不应该在这方面付出太多努力。

另外，检查html标记的有效性是谷歌的做法，检查下面的链接...... https://validator.w3.org/nu/#textarea

于 2022-01-26T00:42:52.047 回答