HTML标签必须按语义使用：h1唯一表主主题，h2–h6须逐级嵌套不可跳级；p内禁嵌div或h2等块级元素；strong/em表重要性与语气，非视觉样式；hr/small/mark均有明确语义，不可滥用。
<h1> 到 <p> 这些标签不是“能用就行”，用错会直接影响可访问性、SEO 和后续维护成本。核心原则就一条：**按语义选，不为样式选**。
为什么不能用 <h1> 做大号普通文字？
浏览器和屏幕阅读器会把 <h1> 当作整个页面的最高级标题，搜索引擎也据此判断内容主次。滥用会导致：
- 屏幕阅读器用户听到一堆“一级标题”，完全分不清主次
- SEO 权重被错误分散，真正该突出的
<h1>反而被淹没 - CSS 后续想统一改标题样式时，发现
<h1>被到处塞在按钮、卡片标题里，根本不敢动
真要放大文字？用 <span> + CSS，或语义更准的 <strong> / <mark>。
<p> 里面能套 <div> 或 <h2> 吗？
不能。HTML 规范明确要求 <p> 是纯文本容器，只允许内联元素（如 <strong>、<em>、<a>）。常见错误写法：
立即学习“前端免费学习笔记（深入）”；
<p>这是一段文字<div>错误！</div></p>
后果：
- 浏览器会自动“修复”——把
<div>挤出<p>外，导致 DOM 结构意外断裂 - CSS 的
p > div选择器完全失效 - 如果这段文字要被 CMS 抽取摘要，
<div>内容可能直接丢失
<strong> 和 <em> 到底怎么选？
两者视觉效果常一样（加粗/斜体），但语义完全不同：
-
<strong>表示内容有强重要性，比如警告、关键操作按钮文字：“<strong>删除后无法恢复</strong>” -
<em>表示语气强调，类似说话时重读某个词：“这个功能<em>确实</em>比旧版快”
别用 <b> 和 <i> 替代——它们只代表“视觉加粗/斜体”，无语义，对无障碍支持极差。
哪些标签容易被当成“装饰”却其实有强语义？
像 <hr>、<small>、<mark> 这类标签，看着像纯样式，实则都有明确语义含义：
-
<hr>不是画线，而是表示“主题或章节的分隔”，不是所有视觉分隔都该用它 -
<small>专用于版权信息、免责声明等“次要内容”，不是用来调小字体的通用工具 -
<mark>表示“文档中需要高亮的引用或关键词”，比如搜索结果页的关键词匹配
用错的典型场景：把 <hr> 当分割线反复插在卡片之间，实际应改用 CSS 边框或 <section> 语义分组。
最常被忽略的一点：标签嵌套层级必须严格对应内容逻辑。比如 <h2> 下面跟 <h4> 跳过 <h3>，会让结构解析器困惑——这不是浏览器兼容问题，是语义链断裂本身就不合法。
