先理解场景，再选择标签
常见 HTML 标签与使用场景
| 类别 | 常用标签 | 典型使用场景 | 使用提示 |
|---|---|---|---|
| 文档骨架 | html、head、title、body | 每个完整 HTML 页面。 | head 放元信息，body 放可见内容。 |
| 标题与段落 | h1—h6、p | 文章标题、章节标题、正文段落。 | 标题级别表达层级，不用来单纯调字号。 |
| 强调语义 | strong、em | 重要内容、需要强调的词语。 | 表达语义，不只是为了加粗或斜体。 |
| 链接与图片 | a、img | 页面跳转、外部资源、展示图片。 | a 用 href；img 用 src，并写有意义的 alt。 |
| 列表 | ul、ol、li | 导航项、步骤、要点、排名。 | 无序用 ul，有先后顺序用 ol。 |
| 页面区域 | header、nav、main、section、article、aside、footer | 组织站点页头、导航、主体、文章和页脚。 | 优先使用能表达区域职责的语义标签。 |
| 通用容器 | div、span | 需要额外分组或局部样式时。 | 没有更合适的语义标签时再使用。 |
| 代码与引用 | pre、code、blockquote | 展示保留格式的代码、行内代码或引用文字。 | 不要用多个空格和 br 模拟布局。 |
| 表单（后续学习） | form、label、input、button | 登录、搜索、问卷和信息提交。 | label 要关联控件，按钮要表达操作。 |
选择顺序：先问“这段内容是什么”，再选最能表达含义的标签；最后才用 CSS 决定它看起来怎样。