code 标签仅用于语义标记行内技术名词,如函数名、命令、变量名;需保留格式时须配合 pre 使用并转义 HTML 字符。

code 标签本身不能格式化代码——它只负责语义标记,不保留换行、缩进或空格。真要让代码“看起来像代码”,必须配合 pre 使用,并手动转义 HTML 字符。
什么时候该用 code 单独包裹
只在句子中提一个短小的技术名词时用,比如函数名、命令、变量名:
-
fetch()✅ 行内出现,上下文明确,无换行需求 -
os.path.join()✅ 多点分隔但仍是单个调用表达式 -
npm install✅ 命令名,非脚本体 -
userProfile✅ 变量名,嵌在段落里自然 - 别把
if (x 塞进去 ❌ 含
展示多行代码必须用 precode 组合
pre 负责保留换行和空格,code 告诉浏览器“这是代码内容”——两者缺一不可:
- 正确写法:
function greet(name) { return `Hello, ${name}!`; } - 漏掉
pre:所有换行缩进被压成一行,语义丢失 - 漏掉
code:屏幕阅读器读作“预格式文本”,而非“源码”,辅助技术识别失败 -
pre默认可能横向溢出,建议加 CSS:overflow-x: auto+tab-size: 2
HTML 特殊字符不转义就会解析失败
只要内容里出现 、>、&,就必须手动转义,否则浏览器当标签解析:
- 想展示 ,就得写成
- 比较表达式
x 漏转义 → 后续 HTML 结构错乱甚至消失- JSON 中的
"name": "&"也要写成"name": "&"- 转义不是可选项,是硬性要求;工具如 Prism.js 或 highlight.js 也依赖这个前提
最容易被忽略的是:你写的那段“代码”,在放进
precode之前,是否已被其他模板引擎(如 Jinja、Vue、PHP)提前解析过?一旦中间层先处理了,再塞进 HTML 容器就晚了——转义必须发生在最终输出到浏览器前的那一步。 - 比较表达式
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











