HTML 标签语义化的具体体现

pre 表示预格式化文本，是块级元素，其内的特殊符号如空格、缩进等都会按照在 HTML 文件中排版的那样显示，可以用来显示 ASCII 插画，例如下图，而一般为了可访问性，最好是加上提示或描述文字方便屏幕阅读器读取。

kbd、samp、code 是行内元素，本身可嵌套 pre，也可被其嵌套。

kbd，表示一组键盘或语音输入，比如快捷键操作Ctrl + C 等

samp，表示系统的输出，比如 shell 、浏览器控制台等的输出

code ，表示计算机代码，比如程序语言的关键字for、if 等

共同之处在于，浏览器渲染时一般采用 monospace 字体簇中的字体即等宽字体，而它们在被 pre 嵌套时，都表现为 HTML 文件中的排版与浏览器的显示一致。 至于为什么使用等宽字体来区别代码和自然语言（常规文本），可以理解为一种约定俗成（可查看维基百科https://www.wikiwand.com/en/Monospaced_font）。

至于它们被 pre 包裹时，也仅仅表示特定的短语或者单词所被包裹的那个标记所表示的含义，如果不结合上下文，你很难搞清楚它们的意思，除非该网站修改这些标记的默认样式。比如MDN 或者 StackOverflow 中测试某个标签，样式有明显区分。

通俗理解的话，你可以给一个计算机词汇或者编程语言的关键字扩展场景来方便理解，比如：在vscode 中的一个 js 文件可以输入 if 关键字来触发代码提示，然后在输入 Tab 后，会自动生成一个代码片段，且光标位置自动缩进了。代码如下

if (condition) {
    //光标位置
}

那么上述中最令人困惑的就是这个 if 了，它既是程序语言关键字，也是我要键入的键，那么表示我既可以使用 code，也可以使用 kbd ，但结合上下文来看的话，它表示程序语言的关键字更准确语义更清晰，所以使用 code 包裹为佳。

在 powershell 或者浏览器控制台中类似的是，输入一个关键字的部分，键入 Tab，显示完整的关键字，再键入 Enter 后显示完整的系统输出，比如在浏览器控制台中输入 Win ，键入 Tab 后显示 Window ，再键入 Enter ，控制台显示完整的系统输出（可用 samp 在 html  文件中表示），即 Window 对象。

上述中你用到了 pre  表示有缩进的代码块，用到了 code 表示单个计算机词汇，用到了 kbd  表示键入缩进，用到了 samp 表示浏览器的控制台输出 。而在一些框架的 API 或者编程语言的手册中，你会看到各种各样的代码段，关键字，程序输出，快捷键（常见于 IDE 的文档，如vscode），甚至是更语义化的警告或者提示之类的。无一例外，它们都用到了清晰的、明了的样式，让你能准确分辨，甚至是快速理解，而这些标签可以肯定的是用的绝非默认样式，而是通过自定义这些标签的样式来实现的。

归根结底，HTML 标签仅仅是定义了结构而非表现，而如今语义化，可访问性越来越重要的情况下，理解这些标签的用途或许也很重要吧。