pre仅用于精确保留空白符与换行的原始内容，如终端输出、JSON示例；code仅用于内联代码标识符；blockquote专指引用外部来源的完整段落，三者均不可当作视觉“格式化工具”滥用。

HTML 里没有所谓“格式化标签”的通用概念，<pre class="brush:php;toolbar:false;">&lt;/code&gt;、&lt;code&gt;&lt;code&gt;&lt;/code&gt;、&lt;code&gt;&lt;blockquote&gt;&lt;/code&gt; 等标签各自有明确语义和渲染行为，强行归为“格式化”会误导结构设计——文本结构优化的关键是选对语义标签，而不是套用视觉样式。&lt;/p&gt; &lt;H3&gt;哪些标签常被误当作“格式化工具”来用？&lt;/H3&gt; &lt;p&gt;开发者常把 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 当作“保留空格换行的万能容器”，把 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 当作“灰色等宽字体开关”，甚至用 &lt;code&gt;&lt;blockquote&gt;&lt;/code&gt; 包裹普通引文或强调句。这些做法破坏语义，影响可访问性与 SEO。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 只应用于**需要精确保留空白符与换行的原始内容**，如终端输出、JSON 示例、代码片段；普通段落加 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 会导致缩进错乱、响应式失效、屏幕阅读器重复播报空格&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;code&gt;&lt;/code&gt; 必须包裹**内联级代码标识符**（如函数名 &lt;code&gt;querySelectorAll&lt;/code&gt;、CSS 属性 &lt;code&gt;display: flex&lt;/code&gt;），不能用来标记整段说明文字&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;blockquote&gt;&lt;/code&gt; 表示**引用外部来源的完整段落或章节**，需配 &lt;code&gt;cite&lt;/code&gt; 属性或 &lt;code&gt;&lt;footer&gt;&lt;/code&gt;；用它包自己写的总结句，等于告诉爬虫“这段话不是我的”&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;怎么判断该用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 还是 &lt;code&gt;&lt;p&gt;&lt;/code&gt;？&lt;/H3&gt; &lt;p&gt;核心看内容是否“依赖空白符传达意义”。一段 JSON 如果删掉换行和缩进，结构就崩溃，必须用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;；而一句“点击按钮触发 &lt;code&gt;submit()&lt;/code&gt; 方法”，哪怕缩进多几格，语义不变，就该用 &lt;code&gt;&lt;p&gt;&lt;/code&gt; + &lt;code&gt;&lt;code&gt;&lt;/code&gt; 组合。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;正确：&lt;pre class='brush:php;toolbar:false;'&gt;{\n &quot;status&quot;: &quot;ok&quot;,\n &quot;data&quot;: {\n &quot;id&quot;: 123\n }\n}</pre> <li>错误：<pre class='brush:php;toolbar:false;'>&lt;p&gt;调用 &lt;code&gt;fetch()&lt;/code&gt; 发起请求&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg&quot; alt=&quot;Wechat Article Html&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot;&gt;Wechat Article Html&lt;/a&gt; &lt;p&gt;将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求&quot;转成微信格式&quot;、&quot;生成公众号文章 HTML&quot;、&quot;排版到微信草稿箱&quot;、&quot;微信粘贴格式&quot;时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;</pre> —— 这里 <code><pre class="brush:php;toolbar:false;"></pre> 完全多余，且破坏段落间距继承

注意：<pre class="brush:php;toolbar:false;"></pre> 默认无 margin，需手动加 margin: 1em 0 才与 <p></p> 视觉对齐；若用 CSS 重置了 p 的 margin，则 <pre class="brush:php;toolbar:false;"></pre> 也得同步调整

嵌套 <code> 时容易踩的 CSS 坑

<code> 是行内元素，但浏览器默认设了 font-family: monospace 和 white-space: nowrap，一旦父容器宽度受限，长代码会撑破布局或触发横向滚动条。

• 修复方式：给 <code> 加 overflow-wrap: break-word，避免单个 URL 或哈希值溢出
• 禁用 white-space: pre 类样式直接打在 <code> 上——它会覆盖浏览器默认的 nowrap，导致换行逻辑混乱
• 不要用 font-size: 0.9em 粗暴缩小 <code>，应通过 line-height 和 padding 控制呼吸感；中英文混排时尤其要注意等宽字体对中文显示宽度的影响

真正难的不是记住每个标签怎么写，而是每次敲下 时，先问一句：“这段内容如果剥离所有样式，还剩什么信息？谁会读它？为什么需要这个容器？”——语义结构一旦错位，后续所有样式、JS、SEO 优化都是在补漏洞。