HTML元素的分类与嵌套关系

杰哥课堂
556 阅读4分钟

一. 为什么要给元素分类

首先, 我们先解释清楚, 为什么要给元素分类?

从理论上说, 给HTML元素分类这个问题类似于化学里为什么提出元素周期表

说人话, 就是把相同特性的元素划归到同一个类别, 方便管理和设计

说的更直接一点, 就是为了通过分类来确定不同类别元素之间的嵌套关系

二. HTML元素的分类方式

HTML元素的分类方式是多种多样的

比如:

  • 按照默认样式表现分类
  • 按照功能分类
  • 按内容模型分类

\

具体细节

  • 按照默认样式表现, 主要可以分为
    • block: 块元素, 像div
    • inline: 行元素, 像 span
    • inline-block: 行内块, 像input
    • ...
  • 按照功能分类:
    • 标题
    • 文本
    • 区块
    • 链接
    • 表单
  • 按内容模型分类:
    • flow
    • heading
    • ...

在发展过程中, 最主要的是下面两种

  • 在HTML 4.01中, 主要是按样式表现分类
  • 在HTML 5中, 提出了新的内容模型分类

那么问题来了, 为什么从4升级到5会提出复杂无比的内容模型呢?

三. HTML元素的嵌套关系

上面我们知道了, 元素的分类在很大程度上决定了元素的嵌套关系

HTML4时代

在HTML4的时代, 规定

  • 块元素中嵌套行元素
  • 行元素中不可以嵌套块元素

这是一种非常直接, 非常清晰的方式.

但是需求是在不断升级的, 慢慢出现了一些bug

历史问题

最bug的a元素

按照HTML4的标准. a元素是行内元素, 而行内元素是不能嵌套块元素div的

但是现实问题是. 现在有一个图片, 图片下有文字. 希望不管点击图片还是文字都能跳转.

这样代码大致是这样的

<a href="商品链接">
  <div>
    <img src="商品图片" />
    <p>商品信息</p>
  </div>
</a>

这样违反了标准啊. 但是用户的这个使用场景就是真实存在的, 因此, 所有浏览器都不得不做大量的容错处理

杰哥的名言

技术是为现实服务的

既然标准不行, 那就改标准嘛, 这就是为什么HTML5会提出内容模型的原因

HTML5时代

内容模型是很复杂的. 我们也完全没有必要是把每一个关系都记住. 记了经常不用还是会忘~

我们只需要了解大原则, 大方向. 出问题的时候会查就可以.

这也是我一直强调的 方向 > 方法 > 技术(道法术器四个层次)

下面这张图出自

developer.mozilla.org/en-US/docs/…

这个看起来是比较复杂的. 我们先简单的认识一下这几个单词, 以及怎么看这张图

  • Flow(流元素). 我的理解是可以显示在页面中的元素. 包含99%的HTML元素
  • Heading(标题元素): h1~h6
  • Sectioning(区块元素): 比如 section``article等
  • Metadata(meta元素): 如果 meta``script``title等
  • Interactive(交互元素): 我的理解是可以跟用户交互的, 比如 input``button等
  • Phrasing(短语元素): 我的理解是不是一个完整的句子/段落, 只是一部分, 比如一句话里有两个字要重读表示强调就可以使用em
  • Embedded(嵌入元素): 我的理解是可以引用其它资源的元素, 比如视频video, 图片img

以下动图摘自: HTML5标签-内容模型

这样划分, 我们会发现, 有些元素可能同时属性多个类别

比如a元素, 同时属于

  • flow: 流元素
  • phrasing: 短语元素
  • interactive: 交互元素

这样做

  • 好处是: 分类更加明确, 规则更具体, 再也不会有解释不清的模糊区
  • 坏处是: 太复杂, 记不住呀记不住~

所以, 只有会查就可以, 不用记!!!

\

四. 举个栗子

a元素到底能不能包含div

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div><a href="#">div里包含a是合法的</a></div>
    <a href="#">
      <div>
        这种情况下, 也是合法的. 把a当作透明的(transparent), 相当于body里包含div
      </div>
    </a>
    <p>
      <a href="#">
        <div>这种情况下, 是不合法的, 相当于p里包含div. p里是不能包含div的</div>
      </a>
    </p>
  </body>
</html>

相信大家通过这些分析, 能彻底搞清楚, HTML元素的嵌套关系.

享受过程, 杰哥一直在路上

avatar
文章
阅读
粉丝