<p>标签用于定义语义化段落，非换行工具；必须包裹完整语义段落，禁止嵌套块级元素，间距应通过CSS控制而非滥用或空<p>。

直接用 <p> 包裹段落，别靠回车或多个 <br> 模拟分段——这是最常被忽略却影响最大的排版起点。

为什么 <p> 不是“换行”，而是语义分块

浏览器把 <p> 当作一个逻辑单元：自动加上下 margin、默认左对齐、禁止嵌套块级元素（比如 <div>）。它不是为了“多空一行”，而是告诉机器“这里是一段完整意思”。
常见错误是写成这样：

<p>第一句。<br><br>第二句。</p>

结果是段内双换行 + 段外默认间距，视觉混乱，且语义丢失。
正确做法是拆成两个 <p>：

<p>第一句。</p><p>第二句。</p>

<strong> 和 <em> 的语义不可替换 <b> 与 <i>

屏幕阅读器会重读 <strong> 内容、斜读 <em> 内容，但对 <b> 和 <i> 只当普通样式处理。
实际使用中：

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 强调重要结论、警告、关键词 → 用 <strong>
• 表达语气转折、反语、轻读 → 用 <em>
• 仅需加粗但无语义（如产品名、缩写）→ 才考虑 <b>
• 仅需斜体但无语义（如外文术语、船名）→ 才考虑 <i>

例如：<p>请务必在<strong>24 小时内</strong>提交申请，否则将<em>自动失效</em>。</p>

<ins> 和 <del> 是内容变更的“留痕工具”

它们不只是加下划线或删除线，而是向辅助技术传达“此处被新增/删除”。搜索引擎和存档系统也会识别这些标签。
典型场景：

• 合同条款修订：用 <del> 标出旧条款，<ins> 标出新内容
• 价格变动：原价 <del>¥199</del>，现价 <ins>¥149</ins>
• 避免混用 <s> 或 <u> —— 它们不带语义，也不被 screen reader 主动播报

别让 <pre> 变成“万能缩进工具”

<pre> 会原样保留空格、换行、制表符，适合代码、ASCII 图、诗歌等需要精确格式的内容。
但它有副作用：

• 默认字体是等宽，破坏正文统一性
• 不会响应 text-align 或 line-height 的常规设置
• 移动端容易横向溢出，需额外加 overflow-x: auto

想实现首行缩进？用 CSS：text-indent: 2em；想控制段落间距？改 margin。只有真正需要“保留原始空白”的时候，才该用 <pre>。