samp标签专用于包裹程序输出或系统反馈文本，如错误提示、API响应体；不可用于代码片段或交互元素，须与code区分语义，配合pre保留格式，需手动转义内容防XSS。
HTML 中 <samp> 标签怎么用
它就是个语义化容器，专门包裹「程序输出」或「系统反馈文本」，比如命令行返回、错误提示、API 响应体——不是用来加样式或做交互的，别当 <span> 乱套。
常见错误是把它当「高亮显示」工具：有人把变量名、代码片段甚至按钮文字塞进 <samp>，结果语义错位，屏幕阅读器读出来很奇怪，SEO 也白搭。
- 只用于真实输出内容，比如
<samp>File not found: /tmp/config.json</samp> - 不嵌套
<code>或<pre>（语义重复；真要保留格式，用<pre><code>组合） - 默认无样式，浏览器通常渲染为等宽字体，但不能依赖这个表现——CSS 可能重置，需显式定义
font-family: monospace才稳
<samp> 和 <code> 到底该选谁
关键看内容角色：<code> 是「你写的代码」，<samp> 是「它跑出来的结果」。比如 Bash 教程里：ls -l 用 <code>，而下面那一堆 drwxr-xr-x 2 user staff ... 才该用 <samp>。
混用会破坏可访问性。辅助技术靠标签判断上下文，把输入当输出读，用户就懵了。
立即学习“前端免费学习笔记（深入）”；
<code>npm install --save-dev eslint</code></li> <li><code><samp>+ eslint@8.56.0 added 123 packages from 78 contributors</samp></li> <li>如果输出里含代码（如 JSON 响应），外层用 <code><samp>
，内部再包一层<code>或<pre><code>（注意嵌套合法性）
React 里直接写 <samp> 会出问题吗
不会，JSX 支持所有标准 HTML 标签，<samp> 是合法元素，直接写就行。但要注意 JSX 中的转义规则和 props 传递方式。
容易踩的坑是：从 API 拿到带换行或特殊字符的输出，直接插进 <samp>{rawOutput}</samp>，结果空格塌陷、尖括号被当成标签解析。
- 纯文本输出：用
{rawOutput}即可，但确保已过滤 XSS（尤其来自用户输入） - 含换行/缩进的输出：必须配合
<pre>，否则空白符全丢——写成<pre><samp>{rawOutput}</samp></pre> - 别给
<samp>加dangerouslySetInnerHTML，除非你 100% 控制内容来源
Chrome 和 Safari 对 <samp> 的渲染差异
几乎没有视觉差异，现代浏览器都按 HTML5 规范处理，都设了 font-family: monospace 和 font-style: normal。真正影响显示的是 CSS 重置或自定义样式。
唯一值得注意的是：某些旧版 iOS Safari（≤14.5）在 <samp> 内使用 font-size: smaller 时，计算可能偏小一档，但这是全局相对单位问题，不是 <samp> 特有。
- 不要依赖浏览器默认字号，显式写
font-size: 1rem或继承父级 - 如果和
<code>并排出现，两者默认字体一致，但行高可能不同——建议统一设置line-height - 无障碍测试时，NVDA 和 VoiceOver 都能正确识别
<samp>语义，读作 “sample output”
最常被忽略的一点：很多人以为 <samp> 能自动转义 HTML 字符，其实完全不会。只要内容里有 <script>，又没提前处理，就直接执行——语义标签不等于安全沙箱。
