samp标签专用于包裹程序输出或系统反馈文本，如错误提示、API响应体；不可用于代码片段或交互元素，须与code区分语义，配合pre保留格式，需手动转义内容防XSS。

HTML 中 <samp></samp> 标签怎么用

它就是个语义化容器，专门包裹「程序输出」或「系统反馈文本」，比如命令行返回、错误提示、API 响应体——不是用来加样式或做交互的，别当 <span></span> 乱套。

常见错误是把它当「高亮显示」工具：有人把变量名、代码片段甚至按钮文字塞进 <samp></samp>，结果语义错位，屏幕阅读器读出来很奇怪，SEO 也白搭。

• 只用于真实输出内容，比如 <samp>File not found: /tmp/config.json</samp>
• 不嵌套 <code> 或 <pre class="brush:php;toolbar:false;">&lt;/code&gt;（语义重复；真要保留格式，用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;&lt;/code&gt; 组合）&lt;/li&gt; &lt;li&gt;默认无样式，浏览器通常渲染为等宽字体，但不能依赖这个表现——CSS 可能重置，需显式定义 &lt;code&gt;font-family: monospace&lt;/code&gt; 才稳&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;&lt;samp&gt;&lt;/code&gt; 和 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 到底该选谁&lt;/H3&gt; &lt;p&gt;关键看内容角色：&lt;code&gt;&lt;code&gt;&lt;/code&gt; 是「你写的代码」，&lt;code&gt;&lt;samp&gt;&lt;/code&gt; 是「它跑出来的结果」。比如 Bash 教程里：&lt;code&gt;ls -l&lt;/code&gt; 用 &lt;code&gt;&lt;code&gt;&lt;/code&gt;，而下面那一堆 &lt;code&gt;drwxr-xr-x 2 user staff ...&lt;/code&gt; 才该用 &lt;code&gt;&lt;samp&gt;&lt;/code&gt;。&lt;/p&gt; &lt;p&gt;混用会破坏可访问性。辅助技术靠标签判断上下文，把输入当输出读，用户就懵了。&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill10595&quot; title=&quot;htmlppt.skill&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg&quot; alt=&quot;htmlppt.skill&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10595&quot; title=&quot;htmlppt.skill&quot;&gt;htmlppt.skill&lt;/a&gt; &lt;p&gt;把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10595&quot; title=&quot;htmlppt.skill&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;npm install --save-dev eslint&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;samp&gt;+ eslint@8.56.0 added 123 packages from 78 contributors&lt;/samp&gt;&lt;/li&gt; &lt;li&gt;如果输出里含代码（如 JSON 响应），外层用 &lt;code&gt;&lt;samp&gt;</pre>，内部再包一层 <code><code> 或 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;（注意嵌套合法性）&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;React 里直接写 &lt;code&gt;&lt;samp&gt;&lt;/code&gt; 会出问题吗&lt;/H3&gt; &lt;p&gt;不会，JSX 支持所有标准 HTML 标签，&lt;code&gt;&lt;samp&gt;&lt;/code&gt; 是合法元素，直接写就行。但要注意 JSX 中的转义规则和 props 传递方式。&lt;/p&gt; &lt;p&gt;容易踩的坑是：从 API 拿到带换行或特殊字符的输出，直接插进 &lt;code&gt;&lt;samp&gt;{rawOutput}&lt;/samp&gt;&lt;/code&gt;，结果空格塌陷、尖括号被当成标签解析。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;纯文本输出：用 &lt;code&gt;{rawOutput}&lt;/code&gt; 即可，但确保已过滤 XSS（尤其来自用户输入）&lt;/li&gt; &lt;li&gt;含换行/缩进的输出：必须配合 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;，否则空白符全丢——写成 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;samp&gt;{rawOutput}&lt;/samp&gt;</pre>
• 别给 <samp></samp> 加 dangerouslySetInnerHTML，除非你 100% 控制内容来源

Chrome 和 Safari 对 <samp></samp> 的渲染差异

几乎没有视觉差异，现代浏览器都按 HTML5 规范处理，都设了 font-family: monospace 和 font-style: normal。真正影响显示的是 CSS 重置或自定义样式。

唯一值得注意的是：某些旧版 iOS Safari（≤14.5）在 <samp></samp> 内使用 font-size: smaller 时，计算可能偏小一档，但这是全局相对单位问题，不是 <samp></samp> 特有。

• 不要依赖浏览器默认字号，显式写 font-size: 1rem 或继承父级
• 如果和 <code> 并排出现，两者默认字体一致，但行高可能不同——建议统一设置 line-height
• 无障碍测试时，NVDA 和 VoiceOver 都能正确识别 <samp></samp> 语义，读作 “sample output”

最常被忽略的一点：很多人以为 <samp></samp> 能自动转义 HTML 字符，其实完全不会。只要内容里有 <script></script>，又没提前处理，就直接执行——语义标签不等于安全沙箱。