<kbd> 表示用户输入（如按键、命令），<samp> 表示程序输出（如终端回显、错误提示），二者语义严格区分，须用 <pre> 包裹并分标签标记输入/输出行，不可混用或嵌套错误元素。
kbd 和 samp 的语义分工必须分清
很多人把 <kbd> 和 <samp> 当成“都是显示代码的标签”，结果交互流程一写就乱。它们职责完全不同：<kbd> 表示用户**输入**的内容（比如你按下的键、敲的命令），<samp> 表示系统或程序**输出**的内容（比如终端回显、错误提示）。混用会导致语义错误，影响可访问性（屏幕阅读器会据此播报操作路径）和未来样式扩展。
终端命令交互的标准 HTML 写法
模拟类似 curl -I https://example.com 后返回 HTTP 头的场景，要体现“人输→机器回”的时序和角色。正确结构是：每轮交互用 <pre> 包裹，内部用 <kbd> 标出输入行，用 <samp> 标出对应输出行。
<pre> <kbd>curl -I https://example.com</kbd> <samp>HTTP/2 200 server: nginx content-type: text/html; charset=UTF-8</samp> </pre>
- 不要把整块终端内容塞进一个
<samp>—— 那等于说“所有文字都是输出”，掩盖了用户动作 - 不要用
<code>替代二者 —— 它只表示“一段代码片段”，不带输入/输出意图 - 换行必须保留在
<pre>内，不能靠<br>拆分，否则破坏语义和空格处理
样式控制的关键点：保留默认行为优先
浏览器对 <kbd> 默认加粗+浅灰背景，<samp> 默认等宽字体，这是合理起点。强行统一成相同字体或颜色反而削弱语义区分。
- 如果需微调，用 CSS 选择器单独作用：
kdb可设font-weight: bold，samp可设font-family: monospace - 避免给
<pre>设white-space: normal—— 会吃掉命令中的空格和缩进，导致curl -X POST -d '{"key": "val"}'变形 - 移动端小屏下，
<pre>内容可能溢出，建议加overflow-x: auto而非强制折行
容易被忽略的嵌套陷阱
当命令里含特殊字符（如 <、>）或需要强调参数时，有人会本能套 <em> 或 <strong>，但这是错的。
立即学习“前端免费学习笔记（深入）”；
-
<kbd>和<samp>内部**可以且应该**包含<var>表示变量占位符，例如：<kbd>git commit -m <var>"message"</var></kbd> - 禁止在
<kbd>里嵌<code>或<samp>—— 输入就是输入，不该再标“这是代码” - 如果输出中包含用户刚输的命令（比如 shell 回显），那这行本身仍是
<samp>，不是“输入又输出”，语义以实际流向为准
真实终端里，你敲的命令和它打印的结果，在 DOM 层必须由不同标签承载——这点松动，后续做自动化解析或无障碍适配就会卡住。
