应使用 标签包裹短小技术名词（如 fetch()），用 组合展示多行代码； 不保留换行缩进，且 HTML 特殊字符必须转义。

什么时候该用

 标签而不是 <pre class="brush:php;toolbar:false;"></H3>
<p>只在句子中提一个短小的技术名词时用 <code>：比如 <code>fetch()

、os.path.join()、npm install、userProfile。它默认是行内元素，不换行、不保留空格缩进，嵌在段落里刚好合适。

常见错误是把整个函数体或 JSON 片段塞进

 里——浏览器会把它压成一行，缩进全丢，语义也错：屏幕阅读器会当成“一个变量名”读，而不是“一段可执行代码”。</p>
<ul>
<li><code>fetch()

✅ 正确：函数调用，上下文明确

if (x ❌ 错误：含 HTML 特殊字符且逻辑多行，必须转义 + 套 <pre class="brush:php;toolbar:false;">&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;div class=&quot;header&quot;&gt;&lt;/div&gt;&lt;/code&gt; ❌ 错误：未转义 &lt; 和 &gt;，会被解析为标签&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;pre class='brush:php;toolbar:false;'&gt; 是唯一合规的多行代码写法&lt;/H3&gt; &lt;p&gt;要展示带缩进、换行、多行结构的代码（如函数定义、配置片段、命令输出），必须用 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 组合，不能只用 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 或只用 &lt;code&gt;。&lt;/p&gt; &lt;p&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 负责保留空格和换行，&lt;code&gt; 负责声明“这是代码”——缺一不可。否则 SEO 无法识别，屏幕阅读器可能读作“预格式文本”而非“源码”，辅助技术体验直接降级。&lt;/p&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;&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/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg&quot; alt=&quot;财经HTML高端海报生成&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;财经HTML高端海报生成&lt;/a&gt; &lt;p&gt;复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10828&quot; title=&quot;财经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;ul&gt; &lt;li&gt;正确：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;function hello() {&lt;br&gt; console.log('hi');&lt;br&gt;}</pre>

错误：function hello() { console.log('hi'); }（渲染为单行）

错误：

function hello() { console.log('hi'); }

（无语义，搜索引擎/读屏器难识别）

HTML 特殊字符必须手动转义

所有出现在 内容里的 、&，都得写成 <code>、<code>>、&。哪怕只是写个比较表达式 x ，漏转义就会让后续 HTML 解析错乱。

这个规则对

 同样适用。很多人以为套了 <pre class="brush:php;toolbar:false;"> 就安全，其实不然——<pre class="brush:php;toolbar:false;"> 只管空白符，不管标签解析。浏览器先解析 HTML 结构，再渲染内容。</p>
<ul>
<li>危险写法：<code>if (x < 10)</code> → < 被当开始标签，后面内容消失或错位</li>
<li>安全写法：<code>if (x < 10)</code></li>
<li>复杂内容建议用 <script type="text/plain"> 存原始代码，JS 动态解码后填入 <pre class="brush:php;toolbar:false;">，避免手写出错</li>
</ul>

<H3>样式和可访问性容易被忽略的点</H3>
<p>浏览器默认的 <code> 字体和 <pre class="brush:php;toolbar:false;"> 间距差异大，不同系统下 tab-width 也不一致。不加约束的话，从 VS Code 复制的代码缩进可能塌成一团，或者长行直接溢出容器。</p>
<p>最小必要 CSS 建议直接加在 <pre class="brush:php;toolbar:false;"><code> 上：</p>
<pre class="brush:php;toolbar:false;"><code>pre code {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}
pre {
  margin: 0;
}

• 别依赖默认字体，font-family 必须显式设为等宽字体栈
• tab-size: 4 很关键，否则 IDE 复制的 4 空格缩进在 Safari 里可能显示为 8
• overflow-x: auto 比 white-space: pre-wrap 更可靠，后者在某些场景下会破坏缩进对齐

实际写文档时，最常踩的坑不是不会写，而是混淆语义层级：把演示用的可运行 HTML 片段直接扔进

<code>，结果页面一加载就执行了 script；或者给 UI 文字（比如“点击【确定】”）套 <code>，误导辅助技术。这些都不是格式问题，是语义污染。</code></code>