标签单独使用效果差，因其仅为语义标记，无默认样式，浏览器视作普通行内元素，不提供等宽字体、背景色、内边距或圆角等视觉区分，易被误读为普通文本，且丢失可访问性与seo语义。
为什么标签单独用效果差
标签本身只是语义标记，不带默认样式干预，浏览器只把它当普通行内元素处理。它不会自动加背景、等宽字体、内边距或圆角——这些恰恰是人眼快速识别“这是代码”的关键视觉信号。如果你只写<code>console.log()，在多数 CSS 重置或无样式页面里，它和周围文字几乎没区别。
常见错误现象包括：代码被误读为普通文本、移动端缩放后文字糊成一团、辅助技术无法准确播报语言类型、搜索引擎抓取时丢失代码语义。
- 必须配合 CSS 设置
font-family: monospace，否则可能继承正文字体（如 sans-serif），失去代码辨识度 - 避免用
div或span模拟标签，会丢失语义和可访问性支持 - 不要依赖浏览器默认的
code样式——现代框架（如 Tailwind）或重置 CSS（如 Normalize.css）常会覆盖它
怎么用CSS让标签真正好读
核心是四点：等宽字体 + 背景区分 + 内边距 + 圆角。这组组合能立刻把代码从段落中“弹出来”，且适配屏幕阅读器和打印样式。
推荐最小可用样式（可直接复制进 <style>）：</style>
.code-inline {
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
background-color: #f5f5f5;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
说明：
-
ui-monospace是现代系统级等宽字体栈，比硬写Consolas兼容性更好 -
padding用em单位，随父级字号缩放，避免小屏下文字贴边 - 别加
border——纯靠背景色+圆角更轻量，也避免高对比主题下刺眼 - 如果用于文档类站点，建议加
color: #2d2d2d控制深灰文字，比默认黑更柔和
<pre class="brush:php;toolbar:false;">嵌套结构里容易漏掉的关键步骤
多行代码块不是把 标签 往 <code>pre 里一塞就完事。漏掉下面任意一项，都会导致换行错乱、缩进塌陷或 XSS 风险。
- 必须对原始 HTML 代码做实体转义：
→ <code><，>→>，否则浏览器会尝试解析执行 -
pre默认会保留所有空格和制表符，但若源码用了 4 空格缩进而你用 Tab 插入，渲染可能错位——统一用空格 - 别在
pre上设width或overflow: hidden，应改用overflow-x: auto支持水平滚动 - 给
code加class="javascript"这类属性，方便后续接入 Prism.js 或 Highlight.js
什么时候不该用标签
标签只适用于「短小、上下文明确、无需语法高亮」的行内代码片段。超出这个范围，它反而会拉低体验。
- 函数体、配置对象、HTML 结构等超过 3 行的内容，应改用
pre+<code>code块，否则会撑破段落流 - 需要点击复制、显示行号、切换语言版本的场景，
code标签无法承载，得用code-block类组件或第三方库 - 动态生成的代码（比如用户输入后实时渲染），若未严格过滤和转义，
code标签照样会执行 script 标签——安全不能只靠标签名 - 展示命令行交互（如
$ npm install），建议额外加class="terminal"并用 CSS 模拟光标闪烁，否则语义不准确
最常被忽略的是转义环节：哪怕只漏转一个 <script></script>，整个页面都可能被注入执行。这不是样式问题，是底线问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
