<code>标签仅语义化包裹代码，不处理转义或格式；直接插入API响应会引发解析错误、XSS风险或格式丢失；须先转义再嵌套于<pre><code>中，并用<wbr>配合CSS实现响应式断行。
<code> 标签本身不处理 API 返回的原始数据，它只负责语义化地包裹已准备好的代码文本；直接把 JSON 响应体或 HTML 字符串塞进 <code> 里，大概率会解析失败、显示空白或破坏页面结构。
为什么不能直接 innerHTML = response.data
API 返回的 JSON 字符串（如 {"id":1,"title":"hello"}）含双引号、花括号等字符，若未转义就写入 <code>，浏览器会尝试解析其中的 < 或 > ——哪怕响应里没 HTML，只要前端用 innerHTML 直接插入，就可能被误判为标签开始/结束。更危险的是，某些后端返回带 HTML 片段的字段（比如富文本内容），不转义就塞进去等于执行 XSS。
- 必须对响应字符串做 HTML 实体转义：把
<→，<code>>→>，&→& - 不要依赖
<code>自动转义 —— 它不干这事 - 如果用
textContent赋值，虽安全但会丢失换行和缩进（因为<code>是行内元素）
多行 JSON / XML 响应必须嵌套在 <pre> 里
单独用 <code> 显示 API 返回的 JSON，格式全丢：所有换行变空格，缩进塌成一团。真正能保留结构的是
<pre><code>...</code></pre></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" 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 href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
<p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li><code><pre> 管格式（空格、换行、tab），<code> 管语义（这是代码）——二者缺一不可
JSON.stringify(data, null, 2) 格式化，再转义，最后塞进 <pre><code>
pre { overflow-x: auto; max-width: 100%; }，否则宽 JSON 会撑破容器展示 API 请求 URL 时，<wbr> 比 <code> 更关键
长 API 地址（如 https://api.example.com/v2/users/1234567890/search?filter=active&sort=createdAt&page=3）直接放 <code> 里，在窄屏上要么折断在单词中间，要么横向滚动。这时 <wbr> 才是解法：
立即学习“前端免费学习笔记（深入）”；
- 在路径斜杠
/、查询符?、参数分隔符&、等号=后手动插<wbr> - 例如：
https://api.example.com/<wbr>v2/<wbr>users/<wbr>1234567890/<wbr>search?<wbr>filter=active&<wbr>sort=createdAt</wbr></wbr></wbr></wbr></wbr></wbr> - 必须配 CSS：
code { white-space: normal; }，否则<wbr>不生效
最容易被忽略的是：API 响应展示不是“贴代码”那么简单，它横跨转义、格式保留、语义标记、响应式断行四个层面；少做一步，轻则显示错乱，重则引入安全风险。
