🟧 HTML 结构与语义语言全典

HTML（HyperText Markup Language）不是通用编程语言，而是一门描述 Web 文档结构、内容角色和语义关系的声明式标记语言。浏览器解析 HTML 后构建 DOM，CSS 和 JavaScript 再以 DOM 为共同接口完成表现与行为。

🔀🟧 HTML 标准能力演进

HTML 2.0 → 4.01 / XHTML (1995–2000)从超文本页面走向表格、表单、样式表与更严格的文档类型

<table summary="课程表">
  <tr><th>课程</th><th>阶段</th></tr>
  <tr><td>HTML</td><td>HTML 4.01</td></tr>
</table>

💡 特性解析： 早期 HTML 奠定链接、图像、表格与表单模型；HTML 4 开始强调结构与表现分离，XHTML 尝试用 XML 规则约束标记。

Live HTML 实验室

直接修改元素、属性或文本，右侧预览会自动重建。预览运行在隔离 iframe 中，不会污染文档站自身样式。

HTML

<article class="profile-card">
  <header>
    <p class="eyebrow">HTML Live</p>
    <h2>语义化课程卡片</h2>
  </header>
  <p>这段 HTML 会在右侧隔离区域即时渲染。</p>
  <details>
    <summary>查看学习阶段</summary>
    <ol>
      <li>HTML 2～4 / XHTML</li>
      <li>HTML5</li>
      <li>Living Standard</li>
    </ol>
  </details>
  <button type="button">原生按钮</button>
</article>
<style>
  body { background: #fff7ed; }
  .profile-card { max-width: 28rem; padding: 1.25rem; border: 1px solid #fdba74; border-radius: 1rem; background: white; }
  .eyebrow { color: #c2410c; font-weight: 700; text-transform: uppercase; }
  button { padding: .55rem .9rem; border: 0; border-radius: .5rem; background: #ea580c; color: white; }
</style>

<article class="profile-card"> <header> <p class="eyebrow">HTML Live</p> <h2>语义化课程卡片</h2> </header> <p>这段 HTML 会在右侧隔离区域即时渲染。</p> <details> <summary>查看学习阶段</summary> <ol> <li>HTML 2～4 / XHTML</li> <li>HTML5</li> <li>Living Standard</li> </ol> </details> <button type="button">原生按钮</button> </article> <style> body { background: #fff7ed; } .profile-card { max-width: 28rem; padding: 1.25rem; border: 1px solid #fdba74; border-radius: 1rem; background: white; } .eyebrow { color: #c2410c; font-weight: 700; text-transform: uppercase; } button { padding: .55rem .9rem; border: 0; border-radius: .5rem; background: #ea580c; color: white; } </style>

修改后切换到“效果”即可刷新预览 · Ctrl/⌘ + Enter

学习路线

• HTML 基础结构与语义元素：文档骨架、内容模型、表单与可访问性。
• HTML5 之前：从 HTML 2.0、3.2、4.01 到 XHTML，理解历史包袱和结构/表现分离的起点。
• HTML5：语义地标、音视频、表单增强、Canvas 与更简洁的文档骨架。
• 现代 HTML Living Standard：details、dialog、template、Popover、惰性加载等持续演进的平台能力。

三阶段看懂 HTML

阶段	文档模型	代表能力	今天怎么用
HTML 2～4 / XHTML	页面、链接、表格、表单；后期强调严格结构	a、img、table、form、DOCTYPE	识别遗留标记，避免表现型元素与表格布局
HTML5	Web 应用统一文档模型	main、article、video、新表单类型、Canvas	现代页面的语义与媒体基础
Living Standard	不再等待“大版本”，按能力持续演进	dialog、details、template、Popover、inert	优先原生语义、渐进增强并检查兼容性

HTML 的特殊定位

维度	HTML
执行模型	浏览器解析文本并构建 DOM，不直接执行算法
核心抽象	元素、属性、内容模型、语义关系
正确性验证	规范校验、可访问性检查、浏览器兼容性测试
与其他语言协作	CSS 选择 DOM 并定义表现；JavaScript 读取和修改 DOM