应只在句子中嵌入单个函数名、变量、命令或属性值时用 标签，如“调用 fetch() 时需传入 AbortSignal”；它为行内元素，不换行、不保留缩进与多余空格。
什么时候该用 标签而不是 <pre class="brush:php;toolbar:false;"></code></H3>
<p>只在句子中嵌入单个函数名、变量、命令或属性值时用 <code>，比如解释“调用 <code>fetch()</code> 时需传入 <code>AbortSignal</code>”。它天生是行内元素，不会换行，也不保留缩进和多余空格——浏览器会把连续空格、制表符、换行全压成一个空格。</p>
<p>常见错误是把多行逻辑塞进去：<code>if (x < 10) { console.log(x); }</code>，结果渲染出来是 <code>if (x < 10) { console.log(x); }</code>，所有格式丢失，语义也错（屏幕阅读器会当成一个长变量名读）。</p>
<ul>
<li>✅ 正确场景：<code>os.path.join()</code>、<code>npm install</code>、<code>user.id</code></li>
<li>❌ 错误场景：<code>function hello() {\n return 'hi';\n}</code>（含换行、缩进、HTML 特殊字符）</li>
<li>⚠️ 注意：<code> 标签不自动转义 <、>、&；写 <code><div></code> 才能显示为 <code><div></code>，漏掉就变成真实标签被解析</li>
</ul>
<H3><pre class="brush:php;toolbar:false;"> 标签默认样式靠不住，必须显式设置等宽字体</H3>
<p>虽然规范说 <code> 应该用等宽字体，但不同浏览器、系统、CSS 重置策略下表现不一。有些环境会 fallback 到 serif 字体，导致代码和普通文本看起来没区别。</p>
<p>最稳妥的做法是在 CSS 中强制指定：</p>
<pre class='brush:php;toolbar:false;'>code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.875em;
background-color: #f6f6f6;
padding: 0.2em 0.4em;
border-radius: 3px;
}</pre>
<ul>
<li>别只依赖浏览器默认行为，<code>font-family 必须显式声明 <code>monospace 或具体等宽字体栈
background-color 和 padding 能快速区分代码与正文，但别设太强的对比度，避免视觉干扰white-space: pre-wrap——它会让长行在单词中间折断，破坏可读性；code 就该保持单行、不折行为什么不能用 或 模拟 样式</H3>
<p>有人图省事，给 <span class="code"> 写 CSS 模拟等宽效果，这会丢掉两个关键东西：语义和可访问性。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><code> 是 HTML 原生语义标签，告诉浏览器“这是计算机可读的代码片段”。搜索引擎、语法高亮库（如 Prism.js）、屏幕阅读器都依赖这个标记做识别和处理。</p>
<ul>
<li>用 <span> 替代 <code>，Prism.js 不会自动高亮，因为没匹配到 <code> 元素</li>
<li>屏幕阅读器可能读作“span 开始… span 结束”，而非“代码开始… 代码结束”</li>
<li>SEO 工具无法提取技术关键词（如 <code>useState()），影响文档可发现性
容易被忽略的细节：嵌套、转义与上下文一致性
很多人只记得转义 和 <code>>，却漏掉 &。比如想展示 href="https://a.com?x=1&y=2"，漏转义 & 会导致解析失败，甚至破坏后续 DOM。
另一个坑是嵌套使用：不要在
里再套 <code>，HTML 不允许 <code> 嵌套。如果需要强调某部分，用 <strong> 或 CSS 类控制颜色即可。</p>
<ul>
<li>✅ 正确：<code>console.log(<strong>'error'</strong>)
❌ 错误：console.log(<code>'error')
⚠️ 多处出现同一代码片段时，确保转义方式一致（全部用 还是全部用 <code>），否则维护成本陡增
真正难的不是写对一行 ，而是整篇文档里所有代码片段都保持语义准确、转义完整、样式统一——这点常被跳过，直到被辅助技术用户或 SEO 抓取工具反馈问题才意识到。
样式</H3>
<p>有人图省事，给 <span class="code"> 写 CSS 模拟等宽效果，这会丢掉两个关键东西：语义和可访问性。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><code> 是 HTML 原生语义标签，告诉浏览器“这是计算机可读的代码片段”。搜索引擎、语法高亮库（如 Prism.js）、屏幕阅读器都依赖这个标记做识别和处理。</p>
<ul>
<li>用 <span> 替代 <code>，Prism.js 不会自动高亮，因为没匹配到 <code> 元素</li>
<li>屏幕阅读器可能读作“span 开始… span 结束”，而非“代码开始… 代码结束”</li>
<li>SEO 工具无法提取技术关键词（如 <code>useState()），影响文档可发现性
容易被忽略的细节：嵌套、转义与上下文一致性
很多人只记得转义 和 <code>>，却漏掉 &。比如想展示 href="https://a.com?x=1&y=2"，漏转义 & 会导致解析失败，甚至破坏后续 DOM。
另一个坑是嵌套使用：不要在
里再套 <code>，HTML 不允许 <code> 嵌套。如果需要强调某部分，用 <strong> 或 CSS 类控制颜色即可。</p> <ul> <li>✅ 正确：<code>console.log(<strong>'error'</strong>)
console.log(<code>'error')
还是全部用 <code>），否则维护成本陡增
真正难的不是写对一行 ，而是整篇文档里所有代码片段都保持语义准确、转义完整、样式统一——这点常被跳过，直到被辅助技术用户或 SEO 抓取工具反馈问题才意识到。
