您可能不知道的5个HTML元素-CSDN博客

过去，我们讨论了很多有关HTML5元素的内容，并演示了它们的功能。新元素（例如header ， footer ， aside ， nav和main使我们的文档结构更具语义或“意义”。尤其是，这些元素可帮助机器轻松理解文档中的各个部分 。

但是，HTML规范非常庞大。如果您访问文档所在的W3.org ，您会发现数百页广泛地记录每个元素。就此而言，您可能忽略了一些HTML元素，其中包括：

1.样本元素

样本单元或samp 限定从一个计算机系统，程序或脚本的输出 。它最早是在HTML3中引入的！。该元素对于技术教程或计算机手册很有用。下面的示例显示了如何包装在Terminal中发生的错误。

If you type dir in Terminal, it will output <samp>command not found: dir</samp>.

包括IE5在内的所有浏览器都支持此元素，并且它们将以Monospace字体显示它，如code和pre元素。

2.键盘输入元素

键盘输入元素或kbd是定义用户输入的元素。类似于samp元素， kbd将通常用于技术或与计算机相关的文章中。

假设您要指示读者在应用程序的输入字段中输入特定字符。您可以使用kbd包裹文本字符，如下所示：

To confirm deletion of your account, type <kbd>DELETE</kbd>.

Press <kbd>Enter</kbd> to create a new line.

但是，当与samp元素一起使用时，它可以表示通过“应用程序”屏幕进行的输入，例如按钮或菜单。这是一个例子：

Click <kbd><samp>Agree</samp></kbd> to proceed.

即使kbd元素被明确地描述为“键盘输入” ，我们也可以将其用于其他输入类型，例如语音输入。如果您编写了有关Siri，Google语音或Cortana的教程或手册，以允许我们使用语音命令与设备进行通信，请以这种方式包装语音输入。

...theOk Google hotword isn't actually disabled according to region 
and can be easily enabled in just two steps.

与samp类似，默认情况下kbd也输出Monospace字体。

造型建议

这些元素可帮助机器更好地理解内容。但是由于它们都是用Monospace字体呈现的，所以读者几乎看不到它们之间的区别。在这种情况下，我们可以添加一些样式以使它们看起来更加鲜明。

我们可以添加一个类，例如，如果button-input表示键盘键或应用程序按钮，则为button-input 。

然后，在CSS中，我们放置以下样式规则。

.button-input {
	border: 1px solid #333;
	background: linear-gradient(#aaa 0%, #555 100%); /* W3C */
	color: #fff;
	padding: 3px 8px;
	border-radius: 3px;
	box-shadow: 0px 2px 0px 0px #111;
}

这将使其看起来像一个实际的按钮。

3.可变元素

顾名思义，变量元素或var 表示可变字符 。该元素对于编写包含数学方程式的教程或文章可能很有用，例如：

<code>var <var>y</var> = Math.sqrt(16);</code>

在上面的示例中，我们用代码元素包装方程，因为方程是JavaScript代码。我们只用var元素包装作为变量的字符。

4.定义元素

定义元素或dfn用于突出显示在社区或行业中特别使用的术语或特定术语 。例如，Web开发行业到处都是行话，这在行业外可能并不为人所知。

下面是一个示例，其中我们使用dfn元素包装单词Breadcrumb ；我们从Wikipedia接受了以下句子。

<dfn>Breadcrumbs</dfn> or <dfn>breadcrumb trail</dfn> is a navigation aid 
used in user interfaces. It allows users to keep track of their locations within programs or documents. 
The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

浏览器以斜体显示它，与印刷惯例相对应，以表示一个新实例或一个外来术语。