by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10931 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、代码呈现元素

以前我都是使用 <code> 元素表示代码，最近深入了解了下，发现表示代码、或者可以用来表示代码的HTML元素还挺丰富的，包括下面这4个。

• kbd: 键盘输入的文字内容
• samp: 范例输出
• code: 计算机代码输出
• var: 变量与自变量实例

均是内联元素。

而 <pre> 元素本身的语义和代码无关，只是格式化文本的特性特别适合呈现代码。

下面通过案例，讲解下各个HTML元素适合使用的场景。

1. kbd元素

<kbd> 元素表示用户输入的信息内容。

比方说，我们示意 git 使用代码，程序员输入的信息就使用使用<kbd>表示。

例如：

<p>
D:\zxx\css-world &gt; <kbd>git checkout master</kbd>
</p>

浏览器默认会给 <kbd> 元素添加等宽字体，例如我的Windows Chrome下是monospace字体族。

效果参考如下：

2. samp元素

<samp> 元素表示案例结果输出，不一定是代码运行结果的输出，其他运行输出也是可以使用此元素。

比方说：

<p><code>'3'.padStart(2, '0')</code>会自动补零，因此输出文本是<samp>'03'</samp></p>

<samp>元素同样会应用monospace字体族，多以Courier 或者 Lucida Console 字体为主。

3. code元素

<code> 元素用来显示代码片段，整段的块状代码一般使用上面提到的 <pre> 元素。

例如：

<p>字符串有个名为<code>padStart</code>的方法，可以在前面补全字符。</p>

4. var元素

<var> 元素用来表示变量信息。例如：

<p>长方体的体积计算公式是<var>l</var> x <var>w</var> x <var>h</var>，其中 <var>l</var> 表示长度，<var>w</var> 表示宽度，<var>h</var> 表示高度。</p>

<var> 元素默认是斜体，但并未对字体进行设置。

demo演示

以上代码效果均可以狠狠地点击这里查看：HTML kbd、samp等元素使用demo

总结

如果用在代码示意场景中，<var>可以表示代码的变量，<code>可以表示小段的代码片段，<kbd>可以表示用户输入信息，<samp>可以表示结果输出信息。

其中，有些元素是可以互相嵌套使用的。

另外，就默认的样式表现上看，<var>是斜体，无字体设置，<code>、<kbd>和<samp>的文字样式正常，但是字体是等宽字体。

二、拓展语义与应用

最近在项目中，我就有使用<samp>元素，有一些特殊的字符，我需要一个标签包裹起来，并重置下字体设置，我发现<samp>元素最为适合，特殊的输出符合语义，本身带字体设置，符合字体设置场景。

这就是学习这些看似不常用HTML元素的意义，在关键的时候或许就多了一份选择。

好，以上就是本文的全部内容，内容不深，主要是拓展知识广度。

欢迎点赞，转发。

🥳🥳🥳

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10931

（本篇完）