语义化 HTML：让内容天然可用 · 前端基础知识库

WHY IT MATTERS

先用一句白话理解

HTML 像建筑的承重结构：标题、导航、正文和表单各有自己的梁柱。只用一堆 div，就像把所有房间都叫“房间”，人能勉强猜，机器却无法理解。

LEARNING OUTCOMES

学完你能做到什么

在不依赖 CSS 和 JavaScript 时仍提供清晰、可操作的内容

根据内容含义选择标题、区域、列表、表格和交互元素

构建带标签、提示、错误反馈和原生校验的表单

正确处理图片尺寸、替代文本、音视频字幕与页面元数据

CONCEPT DEEP DIVE

把每个核心概念讲透

不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。

01CORE CONCEPT

doctype、语言、字符集、viewport 与文档元数据

先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发一页企业产品介绍与询价页面：包含功能列表、价格表、响应式产品图、客户案例和分组询价表单。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

02CORE CONCEPT

标题层级、main/header/nav/footer/article/section 等语义元素

03CORE CONCEPT

链接、按钮、列表、引用、代码与数据表格

04CORE CONCEPT

img、picture、srcset、sizes、audio、video 与 track

05CORE CONCEPT

label、fieldset、legend、input 类型与约束验证

06CORE CONCEPT

autocomplete、inputmode、错误提示与提交语义

07CORE CONCEPT

原生 HTML 优先与渐进增强

CONCEPT MAP

这一章的学习步骤

1doctype、语言、字符集、viewport 与文档元数据

2标题层级、main/header/nav/footer/article/section 等语义元素

3链接、按钮、列表、引用、代码与数据表格

4img、picture、srcset、sizes、audio、video 与 track

5label、fieldset、legend、input 类型与约束验证

6autocomplete、inputmode、错误提示与提交语义

7原生 HTML 优先与渐进增强

STEP 01

仅查看无样式页面也能快速理解信息层级

STEP 02

用键盘完成整张表单并得到明确的错误反馈

STEP 03

为装饰图、信息图和链接图片写出不同策略的替代文本

STEP 04

通过 HTML 校验并消除重复 id、错误嵌套等问题

HANDS-ON PROJECT

动手任务

PROJECT BRIEF

开发一页企业产品介绍与询价页面：包含功能列表、价格表、响应式产品图、客户案例和分组询价表单。

交付清单

✓结构清晰的产品详情页
✓支持键盘和浏览器原生校验的询价表单
✓图片与媒体使用说明
✓语义元素选择清单及理由

MINIMUM RUNNABLE CODE

带原生校验的最小询价表单

html

<!doctype html>
<html lang="zh-CN">
  <meta charset="utf-8" />
  <title>产品询价</title>
  <main>
    <h1>预约产品演示</h1>
    <form>
      <p>
        <label for="name">姓名</label>
        <input id="name" name="name" autocomplete="name" required />
      </p>
      <p>
        <label for="email">工作邮箱</label>
        <input id="email" name="email" type="email" autocomplete="email" required />
      </p>
      <fieldset>
        <legend>团队规模</legend>
        <label><input type="radio" name="size" value="small" required /> 1–20 人</label>
        <label><input type="radio" name="size" value="large" /> 21 人以上</label>
      </fieldset>
      <button type="submit">提交询价</button>
    </form>
  </main>
</html>

先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。

DELIBERATE PRACTICE

三级练习：从复现到生产

每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。

LEVEL 1 · 基础复现

让核心机制第一次跑通

仅查看无样式页面也能快速理解信息层级
用键盘完成整张表单并得到明确的错误反馈
为装饰图、信息图和链接图片写出不同策略的替代文本
通过 HTML 校验并消除重复 id、错误嵌套等问题

LEVEL 2 · 独立改造

改变约束，验证你真的理解

不看教程，独立完成：在不依赖 CSS 和 JavaScript 时仍提供清晰、可操作的内容
不看教程，独立完成：根据内容含义选择标题、区域、列表、表格和交互元素
不看教程，独立完成：构建带标签、提示、错误反馈和原生校验的表单
不看教程，独立完成：正确处理图片尺寸、替代文本、音视频字幕与页面元数据

LEVEL 3 · 生产挑战

把实验变成能交付的工程

结构清晰的产品详情页
支持键盘和浏览器原生校验的询价表单
图片与媒体使用说明
语义元素选择清单及理由
检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。

COMMON PITFALLS

最容易踩的坑

为了视觉大小跳过标题层级

用 div 或 span 模拟按钮和链接

把 placeholder 当作永久可见的表单标签

给每一张图片都写“图片”或堆砌无意义关键词

SELF CHECK

先回答，再展开参考答案

Q01这一课最核心的业务目标是什么？＋

HTML 的价值不是“把字放上去”，而是告诉浏览器这段内容是什么。你会用原生元素构建清晰的信息结构、响应式媒体和无需重复造轮子的可靠表单。

Q02如果只能保留三个验收结果，应该保留什么？＋

结构清晰的产品详情页；支持键盘和浏览器原生校验的询价表单；图片与媒体使用说明

Q03学习过程中最需要主动避免什么？＋

为了视觉大小跳过标题层级；用 div 或 span 模拟按钮和链接；把 placeholder 当作永久可见的表单标签；给每一张图片都写“图片”或堆砌无意义关键词

Q04怎样证明你不是“看懂了”，而是真的会做？＋

独立完成“开发一页企业产品介绍与询价页面：包含功能列表、价格表、响应式产品图、客户案例和分组询价表单。”，并用测试、数据或运行结果逐项验收交付清单。

PRODUCTION READINESS

本课完成检查表

全部能打勾，再进入下一课。

□目标明确：在不依赖 CSS 和 JavaScript 时仍提供清晰、可操作的内容
□核心机制已用最小实验验证：仅查看无样式页面也能快速理解信息层级
□风险已检查：为了视觉大小跳过标题层级
□风险已检查：用 div 或 span 模拟按钮和链接
□风险已检查：把 placeholder 当作永久可见的表单标签
□风险已检查：给每一张图片都写“图片”或堆砌无意义关键词
□交付物可复现：结构清晰的产品详情页
□交付物可复现：支持键盘和浏览器原生校验的询价表单
□交付物可复现：图片与媒体使用说明
□交付物可复现：语义元素选择清单及理由

PRIMARY SOURCES

继续深入的官方资料

WHATWG HTML Living Standard MDN：Structuring content with HTML

课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。