应优先使用语义化标签：表示段落，/表达强调语义，组合标记代码，避免滥用包裹文本，慎用，确保嵌套合理以保障seo、无障碍和维护性。
<p></p> 标签必须用，但不能滥用；<div> 不是文本容器，<code><span></span> 才是行内文本包装的正确选择。
什么时候该用 <p></p> 而不是 <div>
<p>语义上，<code><p></p> 表示一个完整段落，有默认上下外边距、换行行为和可访问性含义（屏幕阅读器会停顿）；<div> 是纯布局容器，无语义。误用 <code><div> 包裹纯文字会导致 SEO 降权、无障碍支持失效、样式重置成本上升。
<ul>
<li>✅ 正确：<code><p>这是一段说明文字。</p>
<div>这是一段说明文字。</div>（除非你明确需要无语义容器）<div>，需后处理替换为 <code><p></p>
<strong></strong> 和 <em></em> 不是加粗/斜体开关
它们表达的是语义强调层级：<strong></strong> 表示内容重要性更高（如警告、关键条款），<em></em> 表示语气强调（如反语、重读）。浏览器默认渲染为加粗/斜体，但可被 CSS 覆盖；而 <b></b> 和 <i></i> 仅保留样式意图，无语义权重。
- ✅ 推荐：
<p>请务必在<strong>24 小时内</strong>确认订单。</p> - ✅ 推荐：
<p>他“真的”没看到通知。（此处 <code><em></em>暗示反语） - ⚠️ 注意：
<b></b>适合标签名、产品名等无需强调但需视觉区分的场景，比如<b>Firefox</b> 不支持该 API
<pre class="brush:php;toolbar:false;"></pre> + <code> 组合才是代码块正解
单独用 <pre class="brush:php;toolbar:false;"></pre> 会保留空格与换行，但缺乏语义；单独用 <code> 是行内代码，不换行也不保留缩进。真实文档中代码片段必须嵌套使用：<pre class="brush:php;toolbar:false;"><code>...</code></pre>，这样既保格式又申明内容类型，利于语法高亮工具识别和搜索引擎归类。
- ✅ 正确：
<pre class="brush:php;toolbar:false;"><code class="js">console.log("hello");</code></pre> - ❌ 错误：
<pre class="brush:php;toolbar:false;">console.log("hello");</pre>（缺失<code>语义） - ⚠️ 注意：若用 CSS 的
white-space: pre-wrap模拟<pre class="brush:php;toolbar:false;"></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></p> 是合法但冗余的（<li> 本身已具段落意味），而 <h2><span>标题</span></h2> 在无障碍测试中可能被读作“标题 标题”，因为 <span></span> 被错误赋予了角色。语义不是装饰，是结构契约。
