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>

Tab 缩进 · Shift+Tab 反向缩进 · Esc 后按 Tab 离开编辑器
修改后切换到“效果”刷新预览 · 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

适用边界

适合描述文档结构与语义；预览仅验证当前浏览器表现，可访问性及表单业务逻辑仍需单独验证。

版本阅读范围

完整版本目录收录本仓库已有专题（如 html-4.01、html5、modern-html）。这些是教学与兼容性对照入口；运行环境的具体版本以安装页、工作台或采集证据为准。

实验入口与范围

本页的 Live 组件可编辑并预览页面；预览使用隔离 iframe。 Docker 验证证据展示已有采集结果与缺口。