用
而不是随意堆
写段落
浏览器默认给
加了上下外边距，语义上也明确这是“一段文字”，搜索引擎和读屏软件会识别它为独立内容块。直接用
包文本，既没语义、又得手动重置 margin，还可能影响 SEO 和可访问性。
常见错误：把标题、说明、列表项全塞进
，结果样式混乱、缩放时文字重叠、屏幕阅读器念成“一堆没名字的盒子”。
- 正文段落一律用
- 小说明、注释类短文本可用
- 避免嵌套
...
—— html5 不允许
互相嵌套
到
必须按层级写，不能只看大小
标题标签的意义不在字号，而在文档结构。一个页面只能有一个
（通常是主标题），子模块用
，子模块里的小节用
，以此类推。跳级（比如
后直接
）或乱用（比如用
当强调文字）会让大纲解析失败，影响目录生成、SEO 权重分配和键盘导航顺序。
立即学习“前端免费学习笔记（深入）”；
实操建议：
强调和特殊语义别只靠
典型误用场景：
- 用
- 用
- 在按钮里写
提交 → 按钮文本本身已有语义，无需额外强调标签
长文本换行和空格处理：用
更可控的做法：
- 段落之间用
分隔，靠 CSS 的 margin 控制间距
- 想保留原文换行和空格？用
white-space: pre-line（适合用户输入的富文本预览）
- 单字/词强制不换行？用
white-space: nowrap
第一行 第二行（两个空格后换行） 第三行
实际写静态页时，最容易被忽略的是标题层级断裂和
泛滥——看着渲染正常，但一开无障碍模式或跑 Lighthouse 审计就暴雷。语义标签不是“写了更好”，而是“不写就埋坑”。
写段落
浏览器默认给
加了上下外边距，语义上也明确这是“一段文字”，搜索引擎和读屏软件会识别它为独立内容块。直接用
包文本，既没语义、又得手动重置
margin，还可能影响 SEO 和可访问性。
常见错误：把标题、说明、列表项全塞进
，结果样式混乱、缩放时文字重叠、屏幕阅读器念成“一堆没名字的盒子”。
强调和特殊语义别只靠
长文本换行和空格处理：用
- 正文段落一律用
- 小说明、注释类短文本可用
（语义是附属信息，不是单纯变小） - 避免嵌套
...
到
必须按层级写，不能只看大小
标题标签的意义不在字号，而在文档结构。一个页面只能有一个
（通常是主标题），子模块用
，子模块里的小节用
，以此类推。跳级（比如
后直接
）或乱用（比如用
当强调文字）会让大纲解析失败，影响目录生成、SEO 权重分配和键盘导航顺序。
立即学习“前端免费学习笔记（深入）”；
实操建议：
强调和特殊语义别只靠
和 只表示“视觉加粗/斜体”，而 表示内容重要性高（读屏器会加重语气）， 表示语气强调（读屏器会变调）。html5 明确区分了表现与语义。
典型误用场景：
- 用
写英文书名、生物拉丁名 → 应该用或+ class - 用
做关键词高亮 → 应该用（如果真重要）或（如果是搜索匹配高亮） - 在按钮里写
提交→ 按钮文本本身已有语义，无需额外强调标签
长文本换行和空格处理：用
更可控的做法：
- 段落之间用
margin控制间距 - 想保留原文换行和空格？用
（适合代码、日志）或white-space: pre-line（适合用户输入的富文本预览） - 单字/词强制不换行？用
+white-space: nowrap
第一行 第二行（两个空格后换行） 第三行
实际写静态页时，最容易被忽略的是标题层级断裂和
泛滥——看着渲染正常，但一开无障碍模式或跑 Lighthouse 审计就暴雷。语义标签不是“写了更好”，而是“不写就埋坑”。