HTML kbd、var、samp元素你使用过没?

这篇文章发布于 2023年07月31日,星期一,22:31,归类于 HTML相关。 阅读 8680 次, 今日 1 次 2 条评论

 

鸟封面

一、代码呈现元素

以前我都是使用 <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效果示意

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

3. code元素

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

例如:

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

code元素使用示意

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变量元素示意

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

demo演示

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

总结

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

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

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

二、拓展语义与应用

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

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

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

欢迎点赞,转发。

🥳🥳🥳

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. ruan说道:

    发现宝藏了

  2. 代码如诗如画说道:

    学些了,感谢大佬输出!