HTML中code标签展示代码片段的规范写法-html教程-PHP中文网

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

html中code标签展示代码片段的规范写法

什么时候该用

 标签而不是 <pre class="brush:php;toolbar:false;">

只在句子中提一个短小的技术名词时用 ：比如 fetch()、os.path.join()、npm install、userProfile。它默认是行内元素，不换行、不保留空格缩进，嵌在段落里刚好合适。

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

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

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

fetch() ✅ 正确：函数调用，上下文明确
if (x ❌ 错误：含 HTML 特殊字符且逻辑多行，必须转义 + 套
❌ 错误：未转义，会被解析为标签

 是唯一合规的多行代码写法

要展示带缩进、换行、多行结构的代码（如函数定义、配置片段、命令输出），必须用

。
 负责保留空格和换行， 负责声明“这是代码”——缺一不可。否则 SEO 无法识别，屏幕阅读器可能读作“预格式文本”而非“源码”，辅助技术体验直接降级。

正确：function hello() {  console.log('hi');}
错误：function hello() { console.log('hi'); }（渲染为单行）
错误：function hello() { console.log('hi'); }（无语义，搜索引擎/读屏器难识别）


HTML 特殊字符必须手动转义
所有出现在  内容里的 、&，都得写成 、&。哪怕只是写个比较表达式 x ，避免手写出错


样式和可访问性容易被忽略的点
浏览器默认的  字体和  间距差异大，不同系统下 tab-width 也不一致。不加约束的话，从 VS Code 复制的代码缩进可能塌成一团，或者长行直接溢出容器。
最小必要 CSS 建议直接加在  上：
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 片段直接扔进 ，结果页面一加载就执行了 script；或者给 UI 文字（比如“点击【确定】”）套 ，误导辅助技术。这些都不是格式问题，是语义污染。