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