code标签语义上专用于标记内联代码片段，不可滥用pre或css模拟；单行代码必须用code，禁用pre；需配合aria-label、title、aria-describedby等属性保障无障碍；与kbd、var分工明确，混用会破坏语义和读屏体验。
code 标签在电子书里不是用来“高亮代码块”的装饰工具，而是语义上标记**内联代码片段**的唯一正确方式；滥用 pre、 或 CSS 伪类模拟，会导致朗读失败、复制错乱、无障碍失效。
为什么不能用 <pre class="brush:php;toolbar:false;"> 套所有代码内容
电子书里出现命令行、函数名、文件路径、HTML 属性值等短代码时，
<code> 会强制换行、保留空格、禁用自动换行——破坏段落流，尤其在小屏设备上直接撑破容器。它只适合多行、需保留格式的完整代码块（如 JS 片段、CSS 规则集）。<br>常见错误现象：<code>git commit -m "init"</code></code>被包进
后，前后断行、缩进异常，iOS Safari 中甚至无法双击选中整条命令。<br>正确做法是：单行、嵌入正文的代码片段，一律用 <pre class="brush:php;toolbar:false;"> 元素包裹，不加 <pre class="brush:php;toolbar:false;">。 <h3><code> 标签必须搭配哪些属性才安全</code></h3> <p>纯 <code>git status</code></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>在语音朗读、高对比度模式、打印导出时都可能丢失上下文或渲染异常。
必须配合以下处理：
- 对命令行操作，补
aria-label="运行 git status 命令"，让屏幕阅读器知道这是可执行动作 - 对 HTML 属性，如
class，加title="HTML 元素的 class 属性名"，悬停提示作用 - 对路径或文件名，如
package.json，确保alt不可用（不支持 alt），改用 <code>aria-describedby="desc-1"指向 nearby该文件是 npm 项目的配置清单
- 所有
内部禁止嵌套 <code>，否则语义嵌套错误，部分 EPUB 阅读器解析失败</code>
和 、 的分工边界在哪
混淆这三者会让技术文档语义失焦，影响自动摘要、术语提取甚至 LMS 知识图谱构建。 只用于表示「字面量代码」本身，不带交互意图也不代表变量：<br>– 正确：<code>fetch()（函数名字面量）<br>– 错误：<code>fetch(apiUrl)（含变量，应拆成 fetch(apiUrl)）
专指用户需按下的物理键或组合键：<kbd>Ctrl</kbd>+<kbd>C</kbd>； 表示运行时可变的值：username。
性能影响：混用不会拖慢渲染，但会增大 ARIA 树深度，对 NVDA/JAWS 等读屏软件响应延迟明显升高。
字体与行高适配的真实坑点
多数电子书 CSS 直接设 code { font-family: monospace; }，但在 iOS 和 Kindle 设备上，系统 monospace 字体不支持中文，导致中英混排时中文 fallback 到黑体、字宽突变、基线偏移。
解决方案：
- 显式声明
code { font-family: "SF Mono", "Fira Code", "Consolas", monospace; }，优先加载支持中英文等宽的字体 - 禁用
code { line-height: 1; }—— 它会让元素紧贴上下段落，呼吸感全无；应继承正文 line-height（如 1.7）
- 避免
code { background: #f5f5f5; padding: 2px 4px; } 这类写法：Kindle 不支持内边距，且浅灰背景在夜间模式下反色失效 - 真正可控的高亮方案是用
data-language属性 + CSS :before/:after 插入语言标识，而非依赖外部 highlight.js
可能出现在正文段落、侧边注释、脚注、甚至 SVG 的 <title> 中——每个上下文对 aria-label、focusable、font-size 的要求都不同，必须按场景单独控制，不能靠全局 CSS 一劳永逸。</title>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
