标签仅表语义，标识内联源码片段；多行代码须用组合，前者保留格式，后者声明语义，html字符需转义，不可混用或单独使用。
code 标签不是“代码高亮容器”，也不是“多行代码块”，它只负责语义——告诉浏览器“这段文字是计算机源码”，其余格式、换行、转义都得你手动管。
什么时候该用 code，而不是 pre + code
判断标准就一条：要不要保留原始换行和缩进。
- 单个函数名、命令、属性名、变量名（如
fetch()、npm install、display: flex）→ 用code即可 - 含换行的函数体、配置片段、命令输出、JSON 示例 → 必须用
pre包裹code，写成<pre class="brush:php;toolbar:false;"><code>...</code></pre> - 误把
if (x 塞进单个 <code>code→ 渲染后变成一行，且不转义会直接被解析为标签，导致 DOM 截断
code 里哪些字符必须转义
只要内容中出现 HTML 元素符号，就必须手动转义，否则浏览器先解析结构、再渲染内容，后果不可逆。
必须写成 <code><-
>必须写成> -
&必须写成& - 像
x 0这种表达式，三个符号全要转：x < 10 && y > 0 - 纯 CSS 值如
margin: 0 auto或 JS 字符串"hello"不需要转义
为什么单独用 pre 或单独用 code 都不行
二者职责不同，缺一不可：一个管“怎么显示”，一个管“这是什么”。
- 只用
pre→ 屏幕阅读器读作“预格式化文本”，不是“代码”；搜索引擎无法识别语言类型；语法高亮库（如 Prism.js）通常不触发 - 只用
code→ 换行、缩进、tab 全被压缩成空格，function a() {\n return 1;\n}渲染为function a() { return 1; } - 正确组合：
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>，其中class="js"虽非必需，但能显式声明语言，利于高亮与可访问性
CSS 和可访问性容易忽略的细节
默认样式靠不住，辅助技术对 code 的处理比你想的更严格。
-
code默认是行内元素，不能设width或overflow；真正控制滚动的是pre，需加overflow-x: auto -
code应显式设font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace，避免某些系统 fallback 到非等宽字体 - 别给
code加white-space: pre—— 它不生效，且可能干扰pre的继承行为 - 屏幕阅读器会以特殊语调朗读
code内容，所以里面别塞“点击【确定】”这类 UI 文字，那该用button或普通文本
最常被绕开的其实是语义边界：有人把整段 Shell 脚本硬塞进 code，也有人给 console.log() 外套一层 pre。记住，是否换行只是表象，核心是——这段内容在文档中扮演的角色，是不是一段可被独立识别、复用、解析的源码片段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
