kbd 不能嵌套 samp，因语义冲突：kbd 表示用户输入，samp 表示系统输出，二者须并列而非包裹；正确写法为 cmd → <samp>output</samp>，多行需配合 <pre>，且 samp 仅包裹纯程序输出，不含提示符或交互内容。
kbd 里不能嵌套 samp，语义完全冲突
浏览器允许你写 <kbd><samp>ls</samp></kbd>，但这是错误的—— 表示“用户按下的键”， 表示“系统吐出来的结果”，把输出塞进输入容器里，等于说“你敲的命令本身就是一行终端回显”，逻辑崩坏。屏幕阅读器会读作“键盘输入：HTTP/2 200”，用户直接困惑。
正确交互流程必须用并列结构，不是嵌套
要表达「用户敲了什么 → 系统返回了什么」， 和 必须是兄弟级内联元素，中间用箭头、空格或标点分隔，不能包裹。常见错误是想“统一包装”而硬套一层 <span> 或 <div>，反而破坏语义层级。
- ✅ 正确：
<kbd>curl -I https://api.example.com</kbd> → <samp>HTTP/2 200</samp> - ✅ 多行响应需配合
<pre>：<pre><kbd>$ python script.py</kbd><br><samp>Hello, world!</samp></pre> - ❌ 错误：
<kbd><samp>Permission denied</samp></kbd>（系统报错不是你按出来的） - ❌ 错误：
<kbd>ls</kbd><samp>file1.txt</samp><samp>file2.txt</samp>（多个 缺少分隔，可访问性差）
samp 内容含提示符时，只包实际输出部分
像 $ git status 这种带 shell 提示符的整行， 只应包裹 $ git status， 只包裹后续输出（如 On branch main），提示符本身不属于程序输出。有人把整行塞进 ，结果连 $ 都被当成系统返回值，语义失真。
- ✅ 推荐写法：
<kbd>$ git status</kbd><samp>On branch main</samp> - ⚠️ 注意：如果终端输出本身含 ANSI 转义序列（如颜色码）， 不处理渲染，需额外 CSS 或 JS 解析，别指望标签自动着色
- ⚠️ 如果输出中夹杂用户可编辑内容（如
Enter username:后的光标等待），那后半段才是 ，前面提示文字仍属
样式和换行必须靠外部控制，samp 自身不负责
是纯语义标签，不保留换行、不强制等宽、不自动加背景。你看到它“像终端输出”，全是浏览器默认样式或你写的 CSS 在起作用。一旦项目用了 normalize.css 或重置样式， 就退化成普通文本。
立即学习“前端免费学习笔记（深入）”；
- 必须加 CSS 才能可靠显示：
samp { font-family: ui-monospace, 'SFMono-Regular', monospace; white-space: pre-wrap; } - 多行输出务必套
<pre>：<pre><samp>Traceback (most recent call last):<br> File "test.py", line 5, in <module><br> print(x)<br>NameError: name 'x' is not defined</samp></pre> - 不要给 设
display: block或margin来“模拟换行”——它本就是内联元素，强行块化会干扰可访问性树顺序
npm install 的进度条动画、实时日志滚动、带交互按钮的 DevTools 控制台输出——这些已超出 的设计边界，该用 <output>、<textarea readonly> 或自定义组件替代。 
