<code>标签仅用于单行内联代码，语义明确、等宽渲染且不破坏行高；多行代码必须用<pre><code>嵌套结构，前者保格式、后者定语义，并需转义HTML字符、配置横向滚动与语法高亮。
code 标签在在线问答平台里不是“加个灰底就能用”的装饰品，它直接决定用户能不能一眼看懂你写的命令、函数或报错信息。用错就等于把代码藏进文字堆里，别人复制粘贴还可能出错。
单行代码必须用 code，别塞进 </H3>
<p>你在回答里写“运行 <code>npm install --save-dev vite</code> 即可”，这是对的；但要是写成：</p>
<pre class='brush:php;toolbar:false;'>npm install --save-dev vite
就会多出上下空白、破坏段落节奏，屏幕阅读器也会读成“预格式化文本”，语义错位。
-
code是行内元素，天然适配句子流——比如“调用useState()时传入初始值” - 别给
code加display: block或white-space: pre，它会折行到单词中间，长命令直接断在-后面 - 如果命令含
、<code>>、&（如curl -X POST http://localhost:3000/api > response.json），必须转义为<、>、&，否则浏览器解析失败，后续 HTML 可能全乱
多行代码块必须嵌套 ，且 class 属性要写对</H3>
<p>函数体、配置片段、错误堆栈这类内容，单独用 <code>code</code> 会塌成一行，缩进全丢；只用 <pre class="brush:php;toolbar:false;"> 则没有“这是代码”的语义，高亮库（如 Prism.js）压根不识别。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5806" title="html-deploy">html-deploy</a>
<p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>正确结构是：<pre class='brush:js;toolbar:false;'>function hello(name) {
return `Hi, ${name}!`;
} —— class="js" 触发语法高亮，pre 保格式，code 定语义
<pre class="brush:php;toolbar:false;">...这类 CMS 自带的 class，它们和高亮库不兼容，颜色不会生效
pre 必须加 <code>overflow-x: auto，否则宽代码直接撑破容器；code 要设 display: block 才响应滚动和宽高控制FAQ 页面里嵌 code 要防箭头干扰和焦点丢失
用 / 做可折叠问答时，
code 常出现在 或正文里。这里有两个隐形坑：
左侧默认有小三角（Chrome/Safari），如果里面夹了 git status，箭头和文字容易挤在一起；统一清除得写summary::marker { content: "" }，光写list-style: none不够- 别在
的 click 事件里手动 toggleAttribute('open')，这会绕过浏览器原生 toggle 行为，键盘用户按 Enter 失效，屏幕阅读器也播报异常 - 如果 FAQ 是单选式（点一个收起其他），监听
toggle事件后，用element.removeAttribute('open')关闭兄弟项，而不是element.open = false
真正难搞的不是写对标签，而是每次复制粘贴代码前，下意识检查三件事：有没有漏转义 、<code>>，pre 有没有加横向滚动，以及 code 是不是被当成 div 去设 margin 和 width——它天生就不该承担布局职责。
