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