单独使用不行，必须套，因为仅具语义而不保留格式，提供预格式化功能；标准写法是组合，兼顾语义与显示，并需转义HTML特殊字符。
为什么
因为 只是语义标签，不保留换行和空格；浏览器会把连续空格缩成一个、把换行当空格处理。想让缩进、多行、制表符原样显示，必须靠 的预格式化特性。
常见错误现象：function foo() {\n return 1;\n}
<code></code> 是标准组合，语义清晰：外层说“这是预格式内容”，内层说“这是代码”
- 单独用
缺少语义，SEO 和屏幕阅读器识别弱；单独用格式全崩 - 现代写法推荐
<code class="js"></code>，方便配语法高亮
HTML 中
默认只保留空格、制表符、换行，但对 HTML 实体和行首缩进敏感——比如你写在 HTML 源码里的缩进，会被当成内容渲染出来。
使用场景：写文档示例、嵌入小段配置、展示命令行输出。
- 源码中换行前的空格会显示，所以建议
标签从行首开始写，或用注释消除缩进：<code>...</code>
-
不自动换行，长代码会横向溢出；加 CSSwhite-space: pre-wrap或overflow-x: auto更实用 - IE8+ 都支持，无需 polyfill；但老版本 Safari 对
tab渲染宽度不一致，建议用空格替代制表符
> &
> &要。所有出现在 内容里的 HTML 特殊字符，都得手动转义，否则会被浏览器解析成标签或实体。
常见错误现象：写 if (x ，结果 被当成不完整标签，后续内容错位或消失。
→，>→>，&→&- 别依赖 JS 动态插入来绕过——服务端渲染或静态 HTML 里漏转义，问题当场暴露
- 如果代码块较长，建议用
<script type="text/plain"></script>存原始内容，再由 JS 解析后赋值到，避免手写出错
用 <code></code> 展示带交互的代码片段时的陷阱
<code></code> 展示带交互的代码片段时的陷阱
很多人直接把可运行的 HTML/JS 示例塞进 <code></code>，结果点开页面就执行了——这不是演示，是事故。
使用场景：教学文档、组件库 API 示例、MDN 风格的交互提示区。
- 演示用的代码，必须确保不会自动执行：JS 不要自调用，HTML 不要带
onload、script标签不能直接写在里 - 想让用户一键运行？得额外加按钮 + 沙箱 iframe，不能靠原生
<code></code> 实现
- 复制功能容易忽略：纯文本复制会带上行号或空格缩进，需用
clipboard.js或navigator.clipboard.writeText()提前清理格式
最常被忽略的是转义和缩进——看着渲染正常，一复制粘贴就语法报错，问题往往出在看不见的空格和没转义的 & 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
