HTML里code标签展示代码片段的规范写法

应使用 <code> 标签包裹短小技术名词（如 fetch()），用 <pre><code> 组合展示多行代码；<code> 不保留换行缩进，且 HTML 特殊字符必须转义。

什么时候该用

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

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

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

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

✅ 正确：函数调用，上下文明确 if (x < 10) { ... } ❌ 错误：含 HTML 特殊字符且逻辑多行，必须转义 + 套 </li><li><code><div class="header"></div></code> ❌ 错误：未转义 < 和 >，会被解析为标签</li></ul><H3><pre class='brush:php;toolbar:false;'> 是唯一合规的多行代码写法</H3><p>要展示带缩进、换行、多行结构的代码（如函数定义、配置片段、命令输出），必须用 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> 组合，不能只用 <pre class="brush:php;toolbar:false;"> 或只用 <code>。</p><p><pre class="brush:php;toolbar:false;"> 负责保留空格和换行，<code> 负责声明“这是代码”——缺一不可。否则 SEO 无法识别，屏幕阅读器可能读作“预格式文本”而非“源码”，辅助技术体验直接降级。</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>正确：<pre class="brush:php;toolbar:false;"><code>function hello() {<br> console.log('hi');<br>} 错误：function hello() { console.log('hi'); }（渲染为单行） 错误：function hello() { console.log('hi'); }（无语义，搜索引擎/读屏器难识别）

HTML 特殊字符必须手动转义

所有出现在 内容里的 、&，都得写成 <code><、>、&。哪怕只是写个比较表达式 x < 5，漏转义就会让后续 HTML 解析错乱。

这个规则对

 同样适用。很多人以为套了 <pre class="brush:php;toolbar:false;"> 就安全，其实不然——<pre class="brush:php;toolbar:false;"> 只管空白符，不管标签解析。浏览器先解析 HTML 结构，再渲染内容。</p><ul><li>危险写法：<code>if (x < 10)</code> → < 被当开始标签，后面内容消失或错位</li><li>安全写法：<code>if (x < 10)</code></li><li>复杂内容建议用 <script type="text/plain"> 存原始代码，JS 动态解码后填入 <pre class="brush:php;toolbar:false;">，避免手写出错</li></ul><H3>样式和可访问性容易被忽略的点</H3><p>浏览器默认的 <code> 字体和 <pre class="brush:php;toolbar:false;"> 间距差异大，不同系统下 tab-width 也不一致。不加约束的话，从 VS Code 复制的代码缩进可能塌成一团，或者长行直接溢出容器。</p><p>最小必要 CSS 建议直接加在 <pre class="brush:php;toolbar:false;"><code> 上：</p><pre class="brush:php;toolbar:false;"><code>pre code {  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;  tab-size: 4;  white-space: pre;  overflow-x: auto;}pre {  margin: 0;}

• 别依赖默认字体，font-family 必须显式设为等宽字体栈
• tab-size: 4 很关键，否则 IDE 复制的 4 空格缩进在 Safari 里可能显示为 8
• overflow-x: auto 比 white-space: pre-wrap 更可靠，后者在某些场景下会破坏缩进对齐

实际写文档时，最常踩的坑不是不会写，而是混淆语义层级：把演示用的可运行 HTML 片段直接扔进

<code>，结果页面一加载就执行了 script；或者给 UI 文字（比如“点击【确定】”）套 <code>，误导辅助技术。这些都不是格式问题，是语义污染。</code></code>