标签默认仅设等宽字体和微调内边距，无背景边框；失效主因是父级css重置font-family、全局样式覆盖或未转义html字符，需检查computed样式、实体编码内容，并搭配正确处理空白符。
<code> 标签本身不会“不生效”——它只是语义化标记，浏览器默认会给它加等宽字体和浅灰背景。如果你发现页面里写了 <code>console.log() 却没任何样式变化，问题不在标签，而在你对它的预期或上下文干扰。
为什么<code>看起来和普通文字一样
浏览器对 <code> 的默认样式极轻：仅设置 font-family: monospace 和少量内边距，没有背景、边框或颜色。若父容器 CSS 重置了 font-family（比如全局设了 font-family: "Helvetica Neue"），或用了 all: unset，<code> 就会彻底退化为普通文本。
- 检查开发者工具 Elements 面板中该元素的 Computed 样式，看
font-family是否还是monospace - 确认未被更高权重规则覆盖，例如
body * { font-family: sans-serif; }会干掉<code>的等宽效果 - 某些 CSS 重置库（如 Normalize.css）会主动移除
<code>的默认背景，需手动补回：code { background-color: #f5f5f5; padding: 2px 4px; border-radius: 3px; }
<code> 内容显示错乱或被截断
常见于嵌套 HTML 标签或含特殊字符时。浏览器会把 、<code>>、& 当作标签解析，导致内容消失或 DOM 结构错乱。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须对内容做 HTML 实体转义：
<code><div>hello</div>，而不是直接写<code><div>hello</div> - 不要在
<code>里放其他块级标签（如<p></p>、<div>）——它只应包含内联文本；需要多行代码请用 <code><pre class="brush:php;toolbar:false;"><code></code> 组合</pre> <li>若用 JS 动态插入，别用 <code>innerHTML直接赋值未转义字符串；改用textContent+ 手动替换，或借助document.createTextNode() -
<pre class="brush:php;toolbar:false;"></pre>会原样渲染所有空格、制表符和换行，HTML 缩进本身会被显示出来；建议将<code>内容写在一行，或用 JS 去除首尾空白再插入 - CSS 中若对
<pre class="brush:php;toolbar:false;"></pre>设了white-space: normal，会直接废掉其核心特性；保持默认white-space: pre或用pre-wrap - 响应式场景下，
<pre class="brush:php;toolbar:false;"></pre>容易横向溢出；加overflow-x: auto和max-width: 100%更稳妥
与 <pre class="brush:php;toolbar:false;"></pre> 搭配使用却换行/缩进异常
<pre class="brush:php;toolbar:false;"><code></code> 是标准组合，但 <code><pre class="brush:php;toolbar:false;"></pre> 的空白符保留行为容易被忽略，导致代码缩进错位或意外换行。
真正难调的不是 <code> 本身，而是它常被夹在语义混乱的结构里——比如放在 <p></p> 中又塞了 <span></span>，或被 scoped style / Shadow DOM 隔离后样式穿透失败。遇到怪异表现，优先查父容器是否触发了新的层叠上下文，或框架是否自动加了属性选择器前缀。
