HTML——语义化与使用场景（二）

3、那些你不了解却有用的内联元素

3.1、超过一半的<span>元素可以换成<data>元素

在偏工具、偏应用类型的Web产品中，一定会有大量的来自数据库的数据字段，在过去，这些数据往往使用<span>元素加以呈现，现在，时代变了，请使用<data>元素代替。

下面是一个员工信息卡片的HTML结构示例：

其中，​“张三”​“技术部”这样的信息一定取自数据库，是动态数据，就非常适合使用<data>元素。如果是静态的描述信息，例如“姓名：​”​，那么还是推荐使用<span>元素：

使用<data>元素表示动态数据，不仅对开发者友好，对机器也友好，其支持一个原生的value属性值，用来设置让机器识别的信息，例如<data value=“002358”>，这里的’002358’就是员工唯一的工号，例如在我们需要对内容进行编辑或删除的时候，所需要的并不是肉眼可见的姓名（姓名可能重复）​，而是这里的ID编号（唯一标识）​。

而对于<span>元素，当我们需要在DOM元素上挂载信息的时候，只能使用data-*自定义属性，例如：

然后通过span.dataset.id的语法获取该属性值，功能上没问题，但实现起来并没有那么优雅。再看看<data>元素的实现：

直接用data.value就可以获取需要的值了，运行结果参见下图，这种取值的方法就和原生的<input>输入框元素一样，使用起来非常方便，语义也非常好。

我已经在实际项目中大量使用<data>了，用得非常爽，<data>元素和<span>元素一样，默认没有任何额外的样式，无须重置CSS，因此大家可以放心大胆地使用。

3.2、上标<sup>元素和下标<sub>元素与公式排版

HTML中有专门表示上标和下标的元素，分别是<sup>和<sub>，这两个元素长得很像，很容易记混淆，我是通过记最后一个字母圆圈的位置来判断是上标还是下标的，字母p的圆圈在上面，所以是上标，字母b的圆圈在下面，所以是下标。

虽然<sup>和<sub>这两个元素的设计初衷是公式排版，如数学公式或者化学式，就像下面这样：

可以得到如图所示的排版效果。

但对于前端开发者而言，以我个人的经验来看，鲜有机会使用<sup>和<sub>元素撰写公式，反而在CSS布局中用得多，最典型的应用就是NEW、BETA这样的角标效果。

例如，MDN文档中的BETA上标，用的就是<sup>元素，如图所示。

千万不要再傻乎乎地用<span>或者<i>元素来实现角标效果了，<sup>和<sub>天生就是为这个场景服务的，没有任何理由不使用它们。

3.3、<dfn>元素和<abbr>元素的使用场景

<dfn>元素用来表示定义的术语，<abbr>元素则用来表示缩写或首字母缩写。

如果你需要经常撰写技术文档，那么这两个元素一定要高频使用，并且很多时候需要同时使用。例如HTML就是一个术语，同时也是缩写，因此，可以像下面这样设置：

这两个元素均有默认的样式表现，其中，<dfn>元素可以实现文本斜体，而<abbr>元素的默认样式表现要看情况，如果<abbr>元素有title属性，那么文本会有虚线下画线，如果没有设置title属性，则样式正常。

因此上面这段HTML代码在默认状态下的样式表现会如图所示，文字仅倾斜。

但如果HTML内容是这样的：

那么就可以看到术语“HTML”不仅倾斜了，下方还有虚线下画线，如图所示。

3.3.1、title属性的使用规则

title是全局HTML属性，在有些HTML元素中，title的重要性一般，但是有些元素的title属性却很重要，例如<button>按钮元素的title属性就很有用，可以被屏幕阅读设备识别，同样重要的还有<dfn>和<abbr>元素。

如果在整句话中并没有对当前术语或缩写的解释，那么一定要设置title属性，且title属性值一定是对当前术语或缩写的解释。

例如：

或者：

如果<dfn>和<abbr>元素同时使用，则一般都将title属性设置在<abbr>元素上，就像这样：

3.3.2、<abbr>元素的衍生用法

在实际开发中，元素还有一个非常广泛的应用场景，那就是定义小图标元素。例如MDN文档页面的“废弃”小图标就是使用元素实现的，如图所示。

如果小图标后面没有任何补充的描述信息，只有一个孤零零的按钮，那么就可以使用<abbr>元素，因为图形化本质上就是对文字描述的一种缩写。

或者说，当一个小图标需要设置title属性或者使用Tips提示效果（如图所示）去表明语义的时候，就应该使用<abbr>元素。

3.4、<code>元素、<kbd>元素、<var>元素和<samp>元素各自的语义

知道<code>元素的人应该不少，它可以表示内联的代码片段，但是知道<kbd>、<var>和<samp>元素的人就不多了，其实这几个元素都与代码表示相关。其中，

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

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

3.4.1、<kbd>元素

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

比方说，程序员输入的git命令代码就可以使用<kbd>表示。

例如：

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

渲染效果如图所示。

3.4.2、<samp>元素

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

比如：

渲染效果如图所示。

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

说到结果输出元素，就不得不说一下之前提到过的<output>元素，区别在于，<output>多用在form表单中，<samp>元素多用在文档陈述中。

3.4.3、<code>元素

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

例如：

渲染效果如图所示。

3.4.4、<var>元素

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

渲染效果如图所示。

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

4、与内容无关的语义化元素

在HTML文档排版中，还有一些元素与内容展示无关，例如接下来要介绍的换行元素<br>和分隔线元素<hr>。

4.1、<br>元素和<wbr>元素的区别

HTML中有两个与换行有关的元素，一个是<br>，另外一个是<wbr>。

<br>元素很多人都使用过，可以让文本换行，那么<wbr>呢？

<wbr>元素是可选换行元素，也是非常实用的一个HTML元素，先看其使用场景。

在Web网页中，连续英文单词默认是不换行的，例如下面的测试代码：

此时的渲染效果如图所示。

可以看到，英文字符直接飞到了<div>元素之外（背景之外）​。

通常的做法是使用CSS中的word-break：break-all或者word-wrap：break-word声明让英文单词换行。例如：

此时就可以看到英文单词换行了，如图所示。

然而，上图所示的效果仍然有个很明显的问题，就是换行的位置把英文单词直接破坏了，可读性下降明显。

有没有什么方法，既能换行，又不破坏单词呢？

有，用<wbr>元素可以实现英文单词的精准换行。例如：


也就是把<wbr>标签写在英文单词连接处，于是，神奇的事情发生了，随着<div>容器的宽度不同，整段话总能在单词连接处精准换行，如图所示。

这就是<wbr>元素的神奇之处，若宽度不够，则在“我”这里换行；若宽度足够，则还是一行显示，非常智能。

<wbr>元素起效的原理是创建了一个特殊的0宽空格，Unicode值是U+200B，因此，我们也可以直接在HTML中使用&＃x200b；代替<wbr>，不过语义不太好，建议还是使用<wbr>。

4.2、可以玩出花的<hr>元素

在日常开发中经常会用到网页分隔线，例如列表下拉到最后，出现类似于“我是有底线的”这样的提示，就会伴随分隔线。

通常，这样的分隔线是使用<div>元素模拟的，其实我们可以使用语义更好的<hr>元素模拟。

<hr>元素过去是表象元素，现在是表意元素，语义是主题中断，例如，故事中场景的改变，或章节中主题的转移。同时CSS对该元素的支持也进行了进一步的增强，具体表现为，虽然<hr>元素是一个非闭合标签，但是也支持::before和::after伪元素，因此我们可以使用<hr>元素模拟各种各样的分隔线效果。<div>元素能够模拟的效果<hr>元素也一定可以，因此，没有任何理由再使用<div>元素实现分隔线效果。

例如，我们可以使用<hr>元素模拟波浪分隔线效果：

渲染效果如图所示。

也可以在分隔线中添加文字说明，代码如下：

渲染效果如图所示。

上述效果均可以通过在浏览器中输入地址https://www.htmlapi.cn/5/4-1.html访问来体验。

更多分隔线效果可以通过访问此项目来了解：https://gitee.com/zhangxinxu/css-hr。