HTML 数据结构

HTML 不是通用编程语言，但文档会被解析成 DOM 树。元素的嵌套、顺序和关联属性共同构成浏览器、辅助技术与脚本消费的数据结构。

核心结构

结构	HTML 表达	访问特点
有序树	元素嵌套	父子、兄弟节点遍历
有序/无序序列	`ol` / `ul` / `li`	保留文档顺序
二维关系	`table`、行、表头与单元格	按行列和表头关联
键值元数据	`data-*` 属性	通过 `dataset` 读取

HTML 的独特之处

DOM 不只保存标签文本，还包含节点类型、属性、文本节点和文档顺序。语义元素及 scope、for 等关联会形成辅助功能树可使用的关系。

综合示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 树形数据结构</title>
</head>
<body>
  <main>
    <h1>课程目录</h1>
    <ol>
      <li>语法</li>
      <li>数据结构
        <ul>
          <li data-kind="linear">线性结构</li>
          <li data-kind="tree">树结构</li>
        </ul>
      </li>
    </ol>
    <table>
      <caption>学习进度</caption>
      <thead><tr><th scope="col">主题</th><th scope="col">状态</th></tr></thead>
      <tbody><tr><th scope="row">树</th><td>进行中</td></tr></tbody>
    </table>
  </main>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 树形数据结构</title>
</head>
<body>
  <main>
    <h1>课程目录</h1>
    <ol>
      <li>语法</li>
      <li>数据结构
        <ul>
          <li data-kind="linear">线性结构</li>
          <li data-kind="tree">树结构</li>
        </ul>
      </li>
    </ol>
    <table>
      <caption>学习进度</caption>
      <thead><tr><th scope="col">主题</th><th scope="col">状态</th></tr></thead>
      <tbody><tr><th scope="row">树</th><td>进行中</td></tr></tbody>
    </table>
  </main>
</body>
</html>

Tab 缩进 · Shift+Tab 反向缩进 · Esc 后按 Tab 离开编辑器
修改后切换到“效果”刷新预览 · Ctrl/⌘ + Enter

HTML 数据结构 ​

核心结构 ​

HTML 的独特之处 ​

综合示例 ​

HTML 数据结构

核心结构

HTML 的独特之处

综合示例