标签用于句子中提及单个短小技术名词时，如fetch()、os.path.join()等；不可用于多行代码或含html特殊字符的内容，否则语义错误且格式丢失。
什么时候该用 标签而不是 <pre class="brush:php;toolbar:false;"> 组合
只在句子中提一个短小的技术名词时用：fetch()、<code>os.path.join()、npm install、userProfile。它默认是行内元素，不换行、不保留空格缩进，嵌在段落里刚好合适。
常见错误是把整个函数体或 JSON 片段塞进
标签里——浏览器会把它压成一行，缩进全丢，语义也错：屏幕阅读器会当成“一个变量名”读，而不是“一段可执行代码”。
fetch() ✅ 正确：函数调用，上下文明确if (x ❌ 错误：含 HTML 特殊字符且逻辑多行，必须转义 + 套 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre></pre><div class="header"></div> ❌ 错误：未转义
是唯一合规的多行代码写法
要展示带缩进、换行、多行结构的代码（如函数定义、配置片段、命令输出），必须用
<pre class="brush:php;toolbar:false;"> 组合，不能只用 <pre class="brush:php;toolbar:false;"> 或只用 <code>。
<p></p>
<pre class="brush:php;toolbar:false;"> 负责保留空格和换行，<code> 负责声明“这是代码”——缺一不可。否则 SEO 无法识别，屏幕阅读器可能读作“预格式文本”而非“源码”，辅助技术体验直接降级。
<ul>
<li>正确：<pre class="brush:php;toolbar:false;"><code>function hello() { console.log('hi'); }</code>
function hello() { console.log('hi'); }
function hello() { console.log('hi'); }（无语义，搜索引擎/读屏器难识别）HTML 特殊字符必须手动转义
所有出现在内容里的 、&，都得写成 、<code>>、&。哪怕只是写个比较表达式 if (x ，漏转义就会让后续 HTML 解析错乱。
这个规则对
和 <pre class="brush:php;toolbar:false;"> 同样适用。很多人以为套了 <pre class="brush:php;toolbar:false;"><code> 就安全，其实不然——<pre class="brush:php;toolbar:false;"><code> 只管空白符，不管标签解析。浏览器先解析 HTML 结构，再渲染内容。 <ul> <li>危险写法：<code>if (x → 安全写法：<code>if (x </code></code> </li> <li>展示 HTML 标签本身，比如 <code><img src="a.jpg" alt="logo"></code>，所有符号都要转义</li> <li>属性值含双引号时，建议一并转义：<code><div class="demo"> → <code><div class="demo"> <h3>别忽略 tabindex 和可访问性问题</h3> <p>代码块默认不可聚焦、无法被键盘导航到，对屏幕阅读器用户不友好。尤其当代码是关键操作步骤（比如复制命令）时，得让它能被 tab 到。</p> <ul> <li>给 <pre class="brush:php;toolbar:false;"> 加 <code>tabindex="0"</code>，比如 <pre class="brush:php;toolbar:false;" tabindex="0"><pre class="brush:php;toolbar:false;">npm install
单独加 tabindex——它不是焦点容器，加了也没用
role="region" 和 <code>aria-label，例如 aria-label="命令: npm install"
<code> 必须嵌套、<pre class="brush:php;toolbar:false;"> 要加 tabindex。这三个点漏掉任意一个，代码看起来“差不多”，但对真实用户——尤其是依赖读屏器或需要复制粘贴的人——就是不可用的。
