code标签仅用于标记自然段中被提及的技术名词,须符合html5语义规范;含方括号、复杂链式访问或可执行代码应避免使用;html特殊字符

code 标签本身不区分变量还是函数名,它只负责语义标记“这是一段短小的、上下文明确的技术文本”。用对的关键,不是写法有多花哨,而是是否符合 HTML5 语义规范和浏览器解析逻辑。
什么时候该用 code 包裹变量或函数名
仅当它们出现在自然段落中、作为被提及(not executed)的技术名词时才适用。比如解释“这个函数返回一个 Promise”,或说明“我们把配置存在 configMap 里”。
-
fetch()✅ 正确:函数调用形式,有括号,语义清晰 -
useState✅ 正确:React Hook 名,无括号但上下文明确是 API -
userProfile✅ 正确:变量名,单行、无特殊字符、非多层嵌套结构 -
process.env.NODE_ENV⚠️ 边界情况:点号分隔可接受,但若含[或?就需评估是否已超出“行内提及”范畴 -
data.items[0].name❌ 不推荐:含方括号和点链,易被误读为 JS 表达式,且屏幕阅读器可能断句错误
常见错误:HTML 字符未转义导致解析失败
哪怕只是写个比较逻辑, 和 <code>> 也必须转义。否则浏览器会尝试解析成标签,后续内容全乱。
- 错误写法:
if (count → 实际渲染可能中断,甚至吞掉后面半个段落 - 正确写法:
if (count - 同理:
max > min必须写成max > min;a && b要写成a && b - 注意:
.、_、$、#这些不用转义;只有、<code>>、&是硬性要求
别把 code 当代码块容器用
有人图省事,把整个对象字面量或箭头函数塞进 code 里,比如:{ name: 'Alice', age: 30 }。这看似能显示,实则三重问题:
- 缩进和换行全丢失,变成一行挤在一起
- 屏幕阅读器读作“左花括号 name 冒号 Alice 逗号 age 冒号 30 右花括号”,而非“一个用户对象”
- SEO 和代码高亮库(如 highlight.js)完全无法识别语言类型
- 正确做法:这种内容必须用
<code>{ name: 'Alice', age: 30 }</code>,且确保{、}等字符已按需转义(JSON 中通常不需要,但含 HTML 字符时例外)
最常被忽略的一点:语义优先级高于视觉。你加了 code,不是为了让它变等宽字体,而是为了让辅助技术、搜索引擎和协作工具知道——“这里提的是一个程序实体,不是普通英文词”。一旦脱离这个前提,再漂亮的样式也没意义。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











