HTML kbd、var、samp元素你使用过没？
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 > <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
（本篇完）