应使用 <code> 标签而非 <pre> 标签标记行内函数、变量或命令，如 fetch()，以确保等宽渲染、不破坏段落流且语义正确。

单行代码必须用

，别套 <pre class="brush:php;toolbar:false;"></H3>
<p>在段落中提函数、变量或命令时，<code> 是唯一语义正确的选择。比如写“调用 <code>fetch()

时需传入 AbortSignal”，浏览器会以等宽字体渲染，且不撑开上下行距、不破坏段落流。

• fetch() ✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数”

• fetch()

  ❌ 错误：

   是块级元素，自带 margin，塞进段落会视觉断裂</li>
  <li>漏转义 <code><</code> 或 <code>></code>（如写 <code>x < 5</code>）→ 浏览器解析失败，后续 HTML 结构错乱</li>
  <li>别给 <code> 加 <code>white-space: pre</code>：长命令会横向溢出，且基线对不齐</li>
  </ul>
  
  <H3>多行代码必须用 <pre class='brush:php;toolbar:false;'> 组合，缺一不可</H3>
  <p>函数体、配置片段、命令输出这类内容，只用 <pre class="brush:php;toolbar:false;"> 会塌成一行，缩进全丢；只用 <pre class="brush:php;toolbar:false;"> 则失去“这是代码”的语义，高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。</p>
  <ul>
  <li>正确结构：<pre class="brush:php;toolbar:false;"><code>function hello() { console.log('hi'); }

  ——

   保格式，<code> 定语义</li>
  <li>错误写法：<code>function hello() { console.log('hi'); }

  → 渲染为单行，无缩进
• 错误写法：

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

  → 搜索引擎当普通预格式文本，不索引为代码
• HTML 特殊字符必须手动转义：、<code>>、&，哪怕只是写个比较表达式

嵌套

 时要小心转义和字体继承</H3>
<p><code> 标签本身不解析 HTML，所有尖括号、引号、与符号都得手动转义，否则会被浏览器当作标签或实体处理。同时，它默认不继承父级等宽字体，容易混用系统字体。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
                                                                        <p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
                                                                </div>
                                                                <a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
<ul>
<li>想展示 <div class="box">，必须写成 <code><div class="box">

建议在 CSS 中显式设置：font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

避免用 style="font-family: Arial" 这类非等宽字体，会破坏代码可读性

 不支持语法高亮，颜色、关键字加粗等必须靠 Prism.js / highlight.js 注入 class 后再配 CSS</li>
</ul>

<H3>别把 <code> 当样式容器用</H3>
<p>很多人给 <code> 加 background、border 或 padding，指望它自动变成“代码块”。但问题在于：<code> 是行内元素，不会阻止文字折行，长命令可能在单词中间断开；也没有默认等宽字体保障；更无法区分字符串、注释等语法成分。</p><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>需要背景色/圆角/内边距？用 class 包裹后统一控制，例如 <code class="code-inline">npm install

需要响应式换行？用 word-break: break-all 要谨慎——它会在任意字符处断行，影响可读性

真正需要块级交互（如复制按钮、行号）？应基于

<pre class="brush:php;toolbar:false;"> 构建，而非强行拉伸 <code></li>
</ul>

嵌套层级和转义是实际中最容易被跳过的两步，尤其在快速写文档时。一个未转义的 <code><

就能让整段 HTML 后续内容消失，而没设 font-family 的 在某些系统上会渲染成宋体，一眼看不出来是代码。