code标签仅用于语义标记单行代码，多行代码必须用<pre><code>嵌套；需转义HTML特殊字符，设display: block和overflow-x: auto，字体优先选用ui-monospace等稳定等宽字体。
code 标签不是代码块容器，它只负责语义标记——告诉浏览器“这段是计算机代码”，不处理换行、缩进或高亮。说明书里写错用法，轻则格式塌陷、阅读困难，重则 HTML 解析失败、文档结构错乱。
单行代码必须用 code，不能套 </H3>
<p>在说明文字中提函数、命令、路径或变量时，<code>code</code> 是唯一正确选择。比如：“调用 <code>fetch()</code> 时传入 <code>AbortSignal</code>”，或“配置文件位于 <code>/etc/nginx/conf.d/</code>”。</p>
<ul>
<li><code>fetch()</code> ✅ 正确：等宽字体、行高正常、屏幕阅读器读作“fetch 函数”</li>
<li><pre class='brush:php;toolbar:false;'>fetch()
❌ 错误： 是块级元素，自带 margin，插在段落中会撑开上下行距，视觉断裂</li>
<li>漏转义 <code><</code> 或 <code>></code>（如写 <code>x < 5</code>）→ 浏览器尝试解析为标签，后续内容可能消失</li>
<li>别给 <code>code</code> 加 <code>white-space: pre</code>：长命令会溢出容器，且基线对不齐</li>
</ul>
<H3>多行代码必须用 <pre class='brush:php;toolbar:false;'> 嵌套，缺一不可</H3>
<p>函数体、配置片段、命令输出这类内容，只用 <code>code</code> 会压成一行；只用 <pre class="brush:php;toolbar:false;"> 则丢失“这是代码”的语义，语法高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5806" title="html-deploy">html-deploy</a>
<p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>正确结构：<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">function greet(name) { return `Hello, ${name}!`; } —— 保格式，<code> 定语义</li>
<li>错误写法：<code>function greet(name) { return `Hello, ${name}!`; } → 渲染为单行，缩进全丢
function greet(name) { return `Hello, ${name}!`; } → 搜索引擎当普通预格式文本，不索引为代码<、>、&，哪怕只是写个比较表达式排版细节决定说明书是否可用
用户不会为格式问题重读三遍。真正容易被忽略的是边界模糊：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层
。判断标准只有一个——要不要保留原始换行和缩进。<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>
必须设 <code>overflow-x: auto</code>，否则长代码行直接撑破容器
-
code要设display: block，否则它作为行内元素，不响应的宽高和滚动控制
- 字体建议用
ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认等宽更稳 - 缩进统一用空格（2 或 4 个），别用 Tab——不同环境渲染宽度不一致，容易错行
