应只在句子中提短小技术名词（如fetch()）时用<code>，因其为行内元素，不保留换行缩进；多行代码必须用<pre><code>嵌套组合，前者保格式，后者明语义，且<、>、&须转义。

什么时候该用

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

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

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

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

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

if (x < 0) { return -x; } ❌ 错误：含 HTML 特殊字符且逻辑多行，必须转义 + 套

<pre class="brush:php;toolbar:false;"></li>
<li><code><div class="header"></div>

❌ 错误：未转义 < 和 >，会被解析为标签

 标签里哪些字符必须手动转义</H3>
<p><code> 标签内容虽短，但只要出现 <code><

、>、&，就必须写成 、<code>>、&。这不是“建议”，而是硬性要求——浏览器先解析 HTML 结构，再渲染内容。

• 危险写法：if (x < 5 && y > 10) → 实际会解析成标签或中断结构
• 安全写法：if (x 10)
• 哪怕只是写个 CSS 属性 display: flex，也不需要转义；但一旦出现 <，就得立刻处理

为什么不能把多行代码硬塞进

</H3>
<p><code> 是纯行内语义元素，规范明确限定它不保留换行、缩进、连续空格。你粘贴进去的换行符和 tab，在渲染时全被折叠成单个空格。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a>
                                                                        <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
                                                                </div>
                                                                <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>错误示例：<code>function hello() {\n  console.log('hi');\n}

→ 渲染结果是 function hello() { console.log('hi'); }

正确做法：多行代码必须用

<pre class="brush:php;toolbar:false;"> 组合，<pre class="brush:php;toolbar:false;"> 负责格式保留，<code> 负责语义声明</li>
<li>单独用 <pre class="brush:php;toolbar:false;"> 不加 <code>，会丢失“这是代码”的语义，对屏幕阅读器和 SEO 都不友好</li>
</ul>

<H3>样式与可访问性容易忽略的点</H3>
<p>浏览器默认给 <code> 加等宽字体，但别依赖它。实际项目中常因字体链缺失导致显示异常。</p>
<ul>
<li>显式设置 font-family 更可靠：<code>font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

标签本身不可聚焦，别给它加 <code>tabindex——无效，且可能干扰键盘导航

如果代码块带复制按钮，焦点应落在

 上，并配 <code>tabindex="0"</code> 和 <code>aria-label</code>

避免用 background 或 padding 直接修饰 ，优先通过 <pre class="brush:php;toolbar:false;">&lt;code&gt; 外层控制尺寸和间距&lt;/code&gt;</pre>

真正要命的不是写错标签，而是把 当成万能代码容器——它只管“这是代码”，不管“怎么展示”。格式、语义、可访问性，三者缺一不可，而每项都得靠人去对齐。