必须在文档需同时呈现「用户输入/调用」和「系统反馈」时才组合使用<code>与<samp>，如“你敲了这行，终端回了那行”，且<code>必须前置、<samp>后置，顺序不可颠倒，否则语义混乱并违反HTML规范。

什么时候必须用

 和 <samp> 组合，而不是单用一个</H3>
<p>单独用 <code> 表示代码片段（如函数名、命令字面量），单独用 <samp> 表示程序运行后真实吐出的文本——两者语义不可互换。只有当文档需同时呈现「用户输入/调用」和「系统反馈」时，才需要组合使用。比如教程里写“你敲了这行，终端回了那行”，缺一不可。</p>

<H3><code> 放前面、<samp> 放后面是唯一合理顺序</H3>
<p>顺序错会导致语义混乱：浏览器和屏幕阅读器会把 <samp> 当作输出，<code> 当作可执行内容。反着嵌套（比如 <samp><code>ls

）直接违反 HTML 规范，W3C 验证失败。

• ✅ 正确：git commit -m "init" → [main (root-commit) abc1234] init
• ✅ 正确：console.log("hello") 输出：hello
• ❌ 错误：Error: ENOENT（ 里不能嵌

  ）</li>
  <li>❌ 错误：<samp>git status</samp>（这是命令，不是输出，该用 <code>）</li>
  </ul>
  
  <H3>多行输出必须靠 <pre class="brush:php;toolbar:false;"> 承载，<code>+<samp> 只能是内联配合</H3>
  <p><code> 和 <samp> 都是内联元素，不保留换行符。想展示带堆栈跟踪或缩进的日志，不能靠它们自身解决。</p><div class="aritcle_card flexRow">
                                                          <div class="artcardd flexRow">
                                                                  <a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img
                                                                                  src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                  <div class="aritcle_card_info flexColumn">
                                                                          <a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a>
                                                                          <p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
                                                                  </div>
                                                                  <a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                          </div>
                                                  </div>
  <ul>
  <li>✅ 正确：<pre class='brush:php;toolbar:false;'>npm run build

  →

  <samp>Compiled successfully.</samp>

• ✅ 正确：

  <samp>TypeError: Cannot read property 'x' of undefined<br>    at script.js:5:12</samp>

  （注意：br 在 内虽被允许，但更推荐用 \n + white-space: pre-wrap）
• ⚠️ 风险：某些旧版 Safari 对

  <samp> 的 font-family 继承不稳定，建议显式加 style="font-family: ui-monospace, monospace;"</li>
  </ul>
  
  <H3>容易被忽略的转义与可访问性细节</H3>
  <p>如果 <code> 或 <samp> 的内容来自 API 或用户输入（比如日志接口返回的错误字符串），HTML 特殊字符不会自动转义。</p><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>危险示例：<samp>Error: <script>alert(1)</script></samp> → 脚本会执行</li>
  <li>安全做法：后端模板中用 <code>html.escape()

  （Python）或 htmlspecialchars()（PHP）转义；前端 JS 插入时用 textContent 而非 innerHTML
• 辅助技术依赖上下文理解 是输出，所以前面必须有自然语言说明，例如：“执行 curl -I https://api.example.com 后得到：HTTP/2 200”

真正难的不是怎么写这两个标签，而是每次写之前问一句：这段文字，用户是不是真在终端或控制台里原样见过？没见过，就别用 ；不是代码字面量，就别用 。语义边界模糊，但解析器和读屏软件认得非常死。