是语义化行内标签，仅用于包裹短小代码片段，不可用于多行代码；正确用法是 嵌套，配合 class="js" 便于高亮，避免滥用样式破坏可访问性与可读性。
code 标签不是用来高亮代码块的
<code> 是语义化行内标签，只适合包裹短小的、上下文中的代码片段，比如函数名、变量、命令或错误信息。它本身不带样式，也不自动换行、不支持缩进——强行用它塞一段多行 Python 或 JSON，结果就是文字挤成一行、丢失缩进、可读性极差。
常见错误现象：
– 把整个 fetch() 调用写在 <code>... 里，括号和换行全被浏览器忽略
– 用 <code><pre class="brush:php;toolbar:false;">...</pre> 套嵌，导致语义混乱且样式冲突
- 正确场景：说明「调用
JSON.parse()时需捕获SyntaxError」 - 错误场景：展示一个 5 行的
for循环或配置文件内容 - 替代方案：多行代码必须用
<pre class="brush:php;toolbar:false;"></pre>包裹，<code>只负责其内部的语义标注
pre + code 组合才是标准写法
HTML 规范明确推荐用 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 结构表示独立代码块。<pre class="brush:php;toolbar:false;"></pre> 保留空格与换行，<code> 告诉浏览器“这段是代码”，二者分工清晰。
示例（合法且语义正确）：
function debounce(func, wait) {
let timeout;
return function executedFunction() {
const later = () => {
clearTimeout(timeout);
func(...arguments);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
- 不要漏掉
<code>：仅用<pre class="brush:php;toolbar:false;"></pre>会丢失代码语义，影响可访问性与 SEO - 不要颠倒顺序：写成
<code><pre class="brush:php;toolbar:false;">...</pre>是无效嵌套，部分浏览器会自动修正但不可靠 - 语言标注建议加
class="js"到<code>上，方便后续用 Prism.js 或 Highlight.js 自动高亮
避免滥用 style 或 font 破坏默认可读性
很多人一上来就给 <code> 加 font-family: "Courier New" 或手动设 font-size: 14px，反而破坏了用户系统字体设置和阅读习惯。现代浏览器对 <code> 的默认样式（等宽、稍小字号、行内）已经足够合理。
- 优先让 CSS 从
body或article继承字体栈，例如font-family: system-ui, ui-monospace, monospace - 如需微调，只改
background-color和padding（针对<pre class="brush:php;toolbar:false;"><code></code>），别碰 <code>line-height</code> 或 <code>letter-spacing</code></pre> - 禁用
<font></font>标签：它已被废弃，且无法响应式适配，用 CSS 替代
实际文档中容易被忽略的细节
真正让 HTML 文档“整洁”的，不是标签用得多，而是用得准。比如命令行输入输出混排时，<code> 只该标记命令本身，而提示符（$）、路径（/usr/local/bin）、返回值（exit code 1）是否加 <code>，要看它们是否属于“被运行/被引用的代码实体”。
-
cd /tmp→ 整个算一条命令，应整体包在<code>里 -
$ npm install --save-dev vite→$是 shell 提示符，不属于命令，不应包含在<code>内；正确写法：$npm install --save-dev vite - 错误信息如
Module not found: Error: Can't resolve './utils'，整条是运行时输出，应整体用<code>，而不是只标./utils
语义边界一旦模糊，后期维护、自动化提取、屏幕朗读都会出问题。写的时候多停半秒，想清楚“这个字符串是不是代码本身”，比事后补样式更省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
