标签仅适用于内联短代码，不可用于多行或结构化内容；正确用法是与 组合：...，且需手动转义特殊字符、保障可访问性与样式可读性。
code 标签只适合内联短代码，别用来包裹多行或结构化内容
<code> 是 HTML 的语义化内联元素，专为标记「一行以内、无语法结构的代码片段」设计。比如函数名 console.log、CSS 属性 display: flex、命令 git status。它不解析换行、不保留缩进、不支持嵌套块级标签——强行塞入多行代码会导致渲染错乱或被浏览器自动扁平化。
常见错误是把 <code> 当成 <pre class="brush:php;toolbar:false;"></pre> 用，例如：
<code>
function hello() {
return 'hi';
}
</code>
这段实际渲染出来就是连续无空格的一行：function hello() { return 'hi'; }，且大括号可能被误认为普通字符。
需要保留格式时，必须配合 pre 标签使用
真正要展示带缩进、换行、空格的代码块（哪怕只有两行），正确组合是 <pre class="brush:php;toolbar:false;"><code></code>。其中 <code><pre class="brush:php;toolbar:false;"></pre> 负责保留空白与换行，<code> 提供语义标识——两者缺一不可。
实操要点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<pre class="brush:php;toolbar:false;"></pre>内直接写代码，不要额外加<br>或 <code>必须作为<pre class="brush:php;toolbar:false;"></pre>的**唯一直接子元素**（否则语义丢失）- 若需高亮，CSS 应作用于
<code>，而非<pre class="brush:php;toolbar:false;"></pre>（例如pre code { font-family: monospace; }）
code 标签里不能放 HTML 实体以外的特殊字符
<code> 不会自动转义内容。如果里面写了 <div> 这类字符串，浏览器会尝试解析为真实标签，导致结构破坏或脚本执行风险。
<p>安全做法：</p>
<ul>
<li>手动将 <code> 替换为 <code><，> 替换为 >，& 替换为 &
{} 插值默认转义）<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>...。
