<code> 标签仅适用于内联短代码，不可用于多行或结构化内容；正确用法是与 <pre> 组合：<pre><code>...</code></pre>，且需手动转义特殊字符、保障可访问性与样式可读性。
code 标签只适合内联短代码，别用来包裹多行或结构化内容
<code> 是 HTML 的语义化内联元素，专为标记「一行以内、无语法结构的代码片段」设计。比如函数名 console.log、CSS 属性 display: flex、命令 git status。它不解析换行、不保留缩进、不支持嵌套块级标签——强行塞入多行代码会导致渲染错乱或被浏览器自动扁平化。
常见错误是把 <code> 当成 <pre> 用，例如：
<code>
function hello() {
return 'hi';
}
</code>
这段实际渲染出来就是连续无空格的一行：function hello() { return 'hi'; }，且大括号可能被误认为普通字符。
需要保留格式时，必须配合 pre 标签使用
真正要展示带缩进、换行、空格的代码块（哪怕只有两行），正确组合是 <pre><code>。其中 <pre> 负责保留空白与换行，<code> 提供语义标识——两者缺一不可。
立即学习“前端免费学习笔记（深入）”；
实操要点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<pre>内直接写代码，不要额外加<br>或 -
<code>必须作为<pre>的**唯一直接子元素**（否则语义丢失） - 若需高亮，CSS 应作用于
<code>，而非<pre>（例如pre code { font-family: monospace; }）
code 标签里不能放 HTML 实体以外的特殊字符
<code> 不会自动转义内容。如果里面写了 <div> 这类字符串，浏览器会尝试解析为真实标签，导致结构破坏或脚本执行风险。
安全做法：
- 手动将
<替换为，<code>>替换为>，&替换为& - 服务端渲染或模板引擎中，优先使用自动转义机制（如 React 的
{}插值默认转义） - 避免在
<code>中嵌入未处理的用户输入
可访问性与样式控制容易被忽略
屏幕阅读器通常会读出 <code> 内容并附加“代码”提示，这是优点；但默认样式极简（仅等宽字体 + 小字号），常被 CSS 全局重置抹掉。
建议保留基本可读性：
- 显式设置
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace - 避免设
font-size: 0.8em之类过小值，尤其在响应式断点下 - 若用于文档内行文，考虑加浅灰背景和微小内边距：
code { background: #f5f5f5; padding: 2px 4px; border-radius: 3px; }
最常被跳过的细节：键盘焦点管理——当 <code> 包裹可交互内容（比如带 onclick 的调试标记），它本身不支持 tabindex，得外层套 <span tabindex="0"><code>...</code></span>。
