HTML中真正用于文本语义和段落排版的核心标签只有五个：<p>、<h1>–<h6>、<strong>、<em>、<hr>；其他如<b>、<i>等纯样式标签应由CSS替代，且各标签均有明确语义与使用规范。
直接说结论：HTML里真正用于文本语义和段落排版的核心标签就五个——<p>、<h1>到<h6>、<strong>、<em>、<hr>。其他像<b>、<i>、<u>等纯样式标签，现代开发中基本该用CSS代替。
为什么<p>不能嵌套块级元素？
浏览器会自动修正错误结构，比如把<div>塞进<p>里，实际渲染时会把</p>提前闭合，导致布局错乱。这不是警告，是强制行为。
- 合法写法：
<p>这是段落，里面可以有<strong>强调词</strong>或<a href="#">链接</a></p> - 非法但常见错误：
<p>段落开头<div class="note">备注内容</div>段落结尾</p>→ 浏览器会拆成<p>段落开头</p><div>备注内容</div><p>段落结尾</p> - 想分组又需要语义？用
<div>或<section>包住多个<p>，别反着来
<h1>到<h6>不是字号控制工具
标题标签的本质是表达内容层级，不是“让字变大”。搜索引擎、读屏软件都依赖这个结构做解析。用<h3>装正文、跳着用<h1>和<h4>会破坏文档大纲。
- 一个页面只应有一个
<h1>（通常是主标题），后续按逻辑递进，比如<h2>是章节，<h3>是小节 - 别用
<h2>去“加粗+换行”，那是<strong><br>或CSS的事 - 如果真要调整视觉大小，用
style="font-size: 1.8rem;"或外部CSS类，不碰语义标签本意
<strong>和<em>的区别远不止加粗/斜体
它们传递的是不同层次的语义：<strong>表示内容重要性提升（如警告、关键结论），<em>表示语气强调（如反语、重音）。屏幕阅读器对两者发音语调不同。
立即学习“前端免费学习笔记（深入）”；
-
<p>请<strong>立即保存文件</strong>，否则数据将丢失</p>→ 适合用<strong> -
<p>他<em>确实</em>没看到通知</p>→ “确实”带语气转折，用<em> -
<b>和<i>仅适用于无语义的纯样式场景，比如商标名、外文术语（<i lang="fr">cul-de-sac</i>）
<hr>不是装饰线，而是内容分隔符
它在无障碍标准里代表主题变更，读屏软件会播报“horizontal rule”。别把它当CSS边框用，也别为了“看起来细一点”硬加style="height:1px"——它本就是单像素语义分隔线。
- 合适场景：章节之间、文章末尾与评论区之间、表单分组之间
- 不合适场景：按钮下方模拟下划线、卡片内部分割线（该用
<div style="border-bottom:1px solid #eee">） - 如果需要语义更明确的分隔，考虑
<section>或<article>配合CSS margin，比滥用<hr>更干净
最常被忽略的一点：所有这些标签的语义价值，只有在脱离CSS渲染时才真正显现——比如打印网页、纯文本邮件摘要、盲人用户访问。别等上线后被无障碍审计卡住，才回头改<div>套出来的“假标题”。
