Skip to content

元素包含关系

H5 前

  • 块级元素独占一行,行级元素不换行
  • 块级元素可以包含行级元素,反之不行
  • a元素除外,a元素是行级元素,但是可以包含块级元素

H5 后

H5 废弃了 行级元素和块级元素的概念

元素的包含关系由元素的内容类别决定

例如:

查看 h1 元素中是否可以包含 p 元素(从语义化逻辑来看:标题中不可能包含段落,所以 h1 不能包含 p)

MDN:搜索 h1 元素,然后点击查看 [允许内容]

h元素只能包含[短语内容],p元素不属于短语内容,因此 h 元素 不应该包含 p 元素

总结

  1. 容器元素(div、article...)中可以包含任何元素
  2. a 元素中几乎可以包含任何元素
  3. 某些元素有固定的子元素(ul > li,ol > li,dl > dt + dd.....)
  4. 标题元素(h1~h6)和段落元素(p)不能互相嵌套,并且不能包含容器元素

注意:

开发过程中不要过于在意元素的包含关系,浏览器对包含关系的检测并没有很严格,如果出现包含关系错误,浏览器会自动将包含关系的元素改为平行关系

用心去做高质量的专业前端内容网站,欢迎 star ⭐ 让更多人发现