应优先使用语义化标签：<p>表示段落，<strong>/<em>表达强调语义，<pre><code>组合标记代码，避免滥用<div>包裹文本，慎用<br>，确保嵌套合理以保障SEO、无障碍和维护性。
<p> 标签必须用，但不能滥用；<div> 不是文本容器，<span> 才是行内文本包装的正确选择。
什么时候该用 <p> 而不是 <div>
语义上，<p> 表示一个完整段落，有默认上下外边距、换行行为和可访问性含义（屏幕阅读器会停顿）；<div> 是纯布局容器，无语义。误用 <div> 包裹纯文字会导致 SEO 降权、无障碍支持失效、样式重置成本上升。
- ✅ 正确：
<p>这是一段说明文字。</p> - ❌ 错误：
<div>这是一段说明文字。</div>（除非你明确需要无语义容器） - ⚠️ 常见陷阱：CMS 或富文本编辑器导出 HTML 时自动套
<div>，需后处理替换为<p>
<strong> 和 <em> 不是加粗/斜体开关
它们表达的是语义强调层级：<strong> 表示内容重要性更高（如警告、关键条款），<em> 表示语气强调（如反语、重读）。浏览器默认渲染为加粗/斜体，但可被 CSS 覆盖；而 <b> 和 <i> 仅保留样式意图，无语义权重。
- ✅ 推荐：
<p>请务必在<strong>24 小时内</strong>确认订单。</p> - ✅ 推荐：
<p>他“真的”没看到通知。</em>（此处 <code><em>暗示反语）</p> - ⚠️ 注意：
<b>适合标签名、产品名等无需强调但需视觉区分的场景，比如<b>Firefox</b> 不支持该 API
<pre> + <code> 组合才是代码块正解
单独用 <pre> 会保留空格与换行，但缺乏语义；单独用 <code> 是行内代码，不换行也不保留缩进。真实文档中代码片段必须嵌套使用：<pre><code>...</code></pre>，这样既保格式又申明内容类型，利于语法高亮工具识别和搜索引擎归类。
- ✅ 正确：
<pre><code class="js">console.log("hello");</code></pre> - ❌ 错误：
<pre>console.log("hello");</pre>（缺失<code>语义） - ⚠️ 注意：若用 CSS 的
white-space: pre-wrap模拟<pre>，仍需包裹<code>才符合 ARIA 规范
换行和空格处理比想象中脆弱
HTML 默认合并连续空白符（空格、制表、换行），<br> 是唯一可靠的手动换行方式，但它属于表现层标记，应慎用。更健壮的做法是用 CSS 控制，比如 white-space: pre-line 或 display: block 配合语义化标签。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
<p style="white-space: pre-line">第一行↵第二行↵第三行</p> - ⚠️ 避免：
<p>第一行<br>第二行<br>第三行</p>（破坏语义，响应式下难控制） - ⚠️ 特别注意：服务端模板（如 Jinja2、Thymeleaf）输出时若未 trim 换行，可能在 DOM 中注入多余文本节点，影响 flex 布局对齐
<li> 里套 <p> 是合法但冗余的（<li> 本身已具段落意味），而 <h2><span>标题</span></h2> 在无障碍测试中可能被读作“标题 标题”，因为 <span> 被错误赋予了角色。语义不是装饰，是结构契约。 
