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

语义化与使用场景3、那些你不了解却有用的内联元素3.1、超过一半的span元素可以换成data元素3.2、上标sup元素和下标sub元素与公式排版3.3、dfn元素和abbr元素的使用场景3.3.1、title属性的使用规则3.3.2、abbr元素的衍生用法3.4、code元素、kbd元素、var元素和samp元素各自的语义3.4.1、kbd元素3.4.2、samp元素3.4.3、code元素3.4.4、var元素4、与内容无关的语义化元素4.1、br元素和wbr元素的区别4.2、可以玩出花的hr元素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-breakbreak-all或者word-wrapbreak-word声明让英文单词换行。例如此时就可以看到英文单词换行了如图所示。然而上图所示的效果仍然有个很明显的问题就是换行的位置把英文单词直接破坏了可读性下降明显。有没有什么方法既能换行又不破坏单词呢有用wbr元素可以实现英文单词的精准换行。例如也就是把wbr标签写在英文单词连接处于是神奇的事情发生了随着div容器的宽度不同整段话总能在单词连接处精准换行如图所示。这就是wbr元素的神奇之处若宽度不够则在“我”这里换行若宽度足够则还是一行显示非常智能。wbr元素起效的原理是创建了一个特殊的0宽空格Unicode值是U200B因此我们也可以直接在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。