到、、、这五个标签覆盖90%日常文本排版，因其语义清晰、默认样式合理、css覆盖成本低且不易废弃；它们分别承担内容层级、段落容器、重要性强调和语气强调功能，而非单纯视觉修饰。
直接记住 <h1></h1> 到 <h6></h6>、<p></p>、<strong></strong>、<em></em> 这五个标签，就能覆盖 90% 的日常文本排版需求；其他标签按需查，别硬背。
为什么只记这五个？
因为它们语义清晰、浏览器默认样式合理、CSS 覆盖成本低，且几乎不会被废弃：
-
<h1></h1>–<h6></h6>：不是“字号工具”，而是内容层级信号。搜索引擎和读屏器靠它理解结构，<h1></h1>全页建议仅一个 -
<p></p>：段落是块级容器，自带上下 margin，比手动加<br>更可靠，也利于后续用 CSS 控制行高/间距 -
<strong></strong>和<em></em>：语义 ≠ 样式。<strong></strong>表示内容重要性（如警告），<em></em>表示语气强调（如反讽），两者默认渲染效果虽类似加粗/斜体，但可被无障碍设备识别 - 避免用
<b></b>、<i></i>替代——它们只是视觉降级标签，无语义，HTML5 中已明确标注为“仅当没有更合适语义标签时才用”
常见错误：把标签当格式按钮用
新手常犯的典型问题，本质是混淆了「结构」和「样式」：
- 用多个
<h2></h2>堆出“大标题+小副标题”效果 → 应该用<h2></h2>+<p class="subtitle"></p>或 CSS 自定义 - 为居中文字写
<center></center>→ 该标签在 HTML5 中已被废弃，必须用 CSS 的text-align: center - 用
<u></u>下划线标重点 → 它默认表示拼写错误或专有名词（如中文人名下划线），易被误读；重点请用<mark></mark>或自定义 class - 用
<font></font>改颜色/大小 → 已完全过时，现代项目里连 polyfill 都不配拥有
怎么验证你用对了？
打开浏览器开发者工具（F12），切到 Elements 面板，观察几点：
- 检查
<h1></h1>是否出现在逻辑主标题位置，且没被包裹在<div> 或 <code><span></span>里“降级” - 鼠标悬停在
<strong></strong>文本上，看是否触发屏幕阅读器朗读 “important” 类提示（部分浏览器支持） - 删掉所有 CSS 文件后刷新页面，确认结构依然可读、层级未塌陷——这才是语义化标签真正起作用的地方
- 如果看到 W3C 验证器报错
Start tag seen but an element of the same type was already open，大概率是<p></p>或<h1></h1>被错误嵌套（比如<p></p> <p>xxx</p>）
真正难的不是记住标签名，而是每次敲下 时，先问一句：“这段内容在整页信息架构里，到底扮演什么角色？” 答案决定了该用哪个标签，而不是哪个看着“顺眼”。
