samp标签默认不隐藏内容，仅以等宽字体渲染程序输出，无内置遮罩逻辑；敏感信息不可直接放入，需结合JS交互或改用<details>等更语义化方案。
HTML 中 <samp> 标签默认不隐藏内容
<samp> 是语义化标签，用于表示程序输出或系统响应，浏览器默认会以等宽字体渲染，但**完全不会隐藏内容**——它不是 <input type="password">，也没有内置遮罩逻辑。很多人误以为加了 <samp> 就能“隐藏”，结果发现文本照常显示，甚至因为字体变等宽反而更显眼。
常见错误现象：
• 把敏感值（如 API key、token）直接塞进 <samp>API_KEY_123</samp>，上线后被右键查看源码轻松暴露
• 用 CSS 强行设 visibility: hidden 或 display: none，导致语义丢失、屏幕阅读器无法读取、SEO 友好性下降
真正可控的“隐藏”得靠 JS + 属性控制
如果确实需要用户可选地查看 <samp> 内容（比如调试信息、响应体），必须主动加交互逻辑，不能依赖标签本身。
- 用
data-*属性存原始值，初始状态只渲染占位符（如<samp>[点击展开]</samp>） - 绑定点击事件，动态替换
textContent或切换hidden属性 - 避免内联
onclick，优先用addEventListener保证可维护性
示例：
<samp data-value="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9">[点击展开]</samp>配合 JS 判断是否已展开，防止重复渲染。
立即学习“前端免费学习笔记（深入）”；
CSS 覆盖 <samp> 样式时要注意继承和可访问性
默认样式极简，但一旦加 font-family、color 或 background，容易破坏可读性或对比度。尤其在暗色主题下，等宽字体配浅灰背景可能直接看不清。
- 别删掉
font-family: ui-monospace, 'SFMono-Regular', ...—— 这是保持语义的关键视觉线索 - 如果加背景色，务必检查 WCAG 对比度（至少 4.5:1），可用
color-contrast()函数或在线工具验证 - 禁止用
text-indent: -9999px或clip隐藏文字——这会让屏幕阅读器也读不到，违背<samp>的语义初衷
替代方案：什么时候该换标签而不是硬改 <samp>
如果目标是“默认隐藏 + 点击可见 + 语义合理”，<samp> 其实不是最优解。更贴切的是：
- 用
<details><summary>组合：原生支持展开/收起，自带 ARIA 属性，无需 JS 就能完成基础交互 - 敏感字段展示用
<code>+aria-label（如<code aria-label="API key 已隐藏">••••••••</code>），明确传达状态 - 纯前端调试输出建议走
console.log()，而非塞进 DOM —— 减少误提交、避免 XSS 风险
真正难处理的，是既要保留语义、又要动态控制可见性、还要兼容旧浏览器的场景。这时候得权衡：加 polyfill 支持 <details>，还是用轻量 JS 控制 <samp> 的 textContent —— 没有银弹，只有根据实际部署环境选最不痛的那个。
