程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)??

开发过程中遇到HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)?的问题如何解决?下面主要结合日常开发的经验,给出你关于HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)?的解决方法建议,希望对你解决HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)?有所启发或帮助;

我总是会拒绝,但后来我从非常流行的前端框架 Semantic UI(和 Fomantic UI)中发现了这段代码:

<h2 class="ui icon @R_404_5548@">
  <i class="setTings icon"></i>
  <div class="content">
    Account SetTings
    <div class="sub @R_404_5548@">Manage your account setTings and set e-mail preferences.</div>
  </div>
</h2>

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

现在我想代码在所有主要浏览器中都可以使用,否则他们不会使用它,但它似乎不太习惯。更重要的是,它甚至有效吗?


注意:我在问题中使用了术语“块级元素”(每个人都理解),但正如 MDN docs 指出的那样:

HTML 中使用了块级元素与内联元素的区别 规格高达 4.01。在 HTML5 中,这种二进制区别是 替换为一组更复杂的 content categories。 而“内联”类别大致对应于 phrasing content, “块级”类别不直接对应于任何 HTML5 内容类别,但是“块级”和“内联”元素组合在一起 在一起对应于flow content 在 HTML5 中。

解决方法

这是令人讨厌的代码,完全不符合规范。在 h2 中,您只能有 内联元素 措辞内容元素,例如 spanstrongem 等。{不过,{1}} 标签通常用于图标,所以没什么可震惊的。但是 div ......?糟糕的令人震惊。将它们切换到 <i>,代码将有效。

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

编辑:MDN 不是官方规范,正如评论中的原始海报所指出的那样。然而,它基于官方规范。 HTML 的权威来源应该是来自 Web 超文本应用技术工作组 (whatWG) 的 HTML Living Standard。它们提供了关于 phrasing content 和 headings (h1-h6) 的很好的信息。

,

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

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

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

大佬总结

以上是大佬教程为你收集整理的HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)?全部内容,希望文章能够帮你解决HTML5 是否允许在标题(如 h1)中使用块级元素(如 div)?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: