02
HTML 结构与语义化基础
HTML 结构与语义化：页面的“地基”
模块目标
先建立稳定的页面结构能力，不急着做炫酷样式。
核心原则
- 先写语义结构，再写样式
- 结构服务于信息，不是为了凑标签
- 一个区域一个职责，避免“全是 div”
推荐结构骨架
<header>...</header>
<main>
<section>...</section>
<article>...</article>
</main>
<footer>...</footer>
常见误区
-
误区：所有区域都用
<div> -
正解：能语义化就语义化，提升可读性与可维护性
-
误区：标题层级随便写
-
正解：
h1-h6反映内容层次，影响 SEO 与可访问性
本模块 Lab 练习建议
完成 HTML 相关 Lab 时重点看三件事：
- 标签语义是否匹配内容
- 结构层级是否清晰
- 表单与媒体标签是否规范
迁移任务
把你常用的一个页面拆成“语义结构草图”，只写 HTML 骨架不写样式，然后再进入 Lab 对照优化。