<code> 标签只用于短小技术名词，如 fetch()、os.path.join()；不可用于函数体或 JSON 等多行代码，否则丢失缩进且影响可访问性；含特殊字符需转义，如 if (x

什么时候该用

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

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

• 错误做法：把整个函数体或 JSON 片段塞进

   里——浏览器会压成一行，缩进全丢，屏幕阅读器会当成“一个变量名”读，而不是可执行代码</li>
  <li>含 < 或 > 必须转义：<code>if (x < 10)

  ✅，if (x ❌（会被解析为标签）
• 不负责格式保留，所以别指望它自动对齐或换行；CSS 的 <code>white-space 对它基本无效

<pre class="brush:php;toolbar:false;"> 是展示多行代码的唯一合规写法</H3>
<p>要展示带缩进、换行、多行结构的代码（如函数定义、配置片段、命令输出），必须用 <pre class="brush:php;toolbar:false;"><code> 组合，不能只用 <pre class="brush:php;toolbar:false;"> 或只用 <code>。</p>
<ul>
<li><pre class="brush:php;toolbar:false;"> 负责保留空格和换行，<code> 负责声明“这是代码”——缺一不可。否则 SEO 无法识别，屏幕阅读器可能读作“预格式文本”而非“源码”</li>
<li>错误写法：<code>function hello() { console.log('hi'); }

→ 渲染为单行，无缩进

危险写法：

<pre class="brush:php;toolbar:false;">if (x < 10) { ... }

→ 漏转义

安全写法：

if (x < 10) { console.log('ok'); }

HTML 特殊字符必须手动转义，哪怕用了

<code></H3>
<p><pre class="brush:php;toolbar:false;"> 只管空白符，不管标签解析。浏览器先解析 HTML 结构，再渲染内容。漏转义会导致 DOM 破坏，轻则内容消失，重则页面崩溃。</p>
<ul>
<li>所有 <code><

、>、& 都得写成对应 HTML 实体

常见陷阱：<div class="box"> ✅，<div class="box"> ❌ <li>复杂内容（如带 JSX 或模板语法的代码）建议用服务端转义或构建时处理，手写极易出错</li> <h3>样式与可访问性容易被忽略的关键点</h3> <p>单独加 background 或 font-family 并不能让 <pre class="brush:php;toolbar:false;"> 或 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt; 变成“可用的代码块”。真正影响体验的是三件事：等宽字体保障、横向溢出控制、语义完整性。&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;ul&gt; &lt;li&gt;必须显式设 &lt;code&gt;font-family: monospace</pre>，否则某些系统下 <pre class="brush:php;toolbar:false;"> 默认字体非等宽&lt;/li&gt; &lt;li&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 容器需加 &lt;code&gt;overflow-x: auto</pre> 防止长行撑破布局 </p> <li>别用 <code><tt> 或 <span> 替代 ，它们没有代码语义，对读屏器和搜索引擎无效

语法高亮库（如 Prism.js）依赖

<code> 结构识别语言，改结构等于废掉高亮</code>