某次看一篇技术文章,文章里有一段 html
源码示例,其中有个 datalist
标签,我下意识地认为这是个组件,当我想找这个组件的实现的时候却发现根本找不到
接着我又想到组件标签名应该是开头大写或者包含中划线才对啊,这个全小写字母的标签应该会被识别为 html
原生标签的,那它是怎么通过编译的?这个时候我意识到了什么,复制粘贴一搜,果然,datalist
就是个原生的html
标签
<datalist id="cars">
<option value="a">
<option value="b">
<option value="c">
</datalist>
复制代码
寒碜,很TM寒碜,平日里谈笑风生的都是 hooks
、函数式
、immutable
、serverless
,现在居然不认识一个基本的 html
标签
虽然在当下全站 div
的浪潮里,不认识除了 div
之外的标签,对于面试、工作不会有丝毫影响,但前端三剑客毕竟是前端工程师立身之本,痛定思痛之下,将 html
标签重头全部看了一遍,忽然发现,W3C
制定了那么多的 html
标签,都是有其各自的作用的,有些工作中习惯性用 div
、css
、js
模拟的功能,如果使用恰当的 html
标签是可以省下很多功夫的
下面就说几个我认为可能在实际工作中有用/碰到的标签
select
配合 option
标签,可以实现基本的下拉选择功能,select
本身的样式自定义支持度较好,例如 codepen.io/FrankieDood…, 但下拉菜单可定义的样式很有限
并且其可以自动处理下拉菜单溢出屏幕外的情况
datalist
一般配合 input
使用(label
也可以),datalist
及其选项不会被显示出来,它仅仅是合法的输入值列表,其功能类似于在 select
上多了个输入筛选的功能
此标签的作用是弹出一个类似于下拉菜单的组件,展示可选项,但是这个下拉菜单组件是无法自定义样式,甚至检查元素都检查不到
area
MDN 上的这个例子比较形象
对于上述这个图片,存在 6
处可以点击的区域:CSS
、Graphics
、HTML
、JavaScript
、Web APIS
、MDN
,并且每个区域点了之后跳转的链接都不一样,如果让我来实现,五边形每条边的区域使用 5
个元素,每个元素各自带着一个 ::before
、::after
,中间圆形区域再来一个元素,最后使用 css
把这些元素严密地合拢到一起,1
个像素都不能差才行
但如果借助 area
标签,就只需要让设计同学把图画好(不会存在偏差,也不会存在字体跟设计同学想要的不一样的情况),然后你计算好位置,写到标签属性上就完事,没有 css
什么事
del、ins、 b
当需要表示字体加粗、字符删除、字符下划线的时候,我一般会习惯性地使用 font-weight
、text-decoration
这些 css
属性来装饰,而html
已经提供了语义化的标签
<b>一打</b>有 <del>二十</del> <ins>十二</ins> 件。
复制代码
details、summary
这两个标签配合使用,实现一个可以打开、收起的折叠面板功能,经常会在 Github
上一些开源项目的 README
文档里看到这个标签的使用,我第一次看到的时候还很惊讶,因为我觉得这是一个需要 js
才能实现的能力,但一般支持 markdown
渲染的网站,为了安全考虑都不会允许 markdown
文件里的 js
执行的,莫非是用了什么奇技淫巧?打开检查者工具一看,原来是平平无奇的 html
标签
<details>
<summary>标题</summary>
<p>详细描述的内容</p>
</details>
<hr />
<details open>
<summary>标题</summary>
<p>详细描述的内容</p>
</details>
复制代码
meter、progress
<meter value="3" min="0" max="10"></meter>
复制代码
<progress value="22" max="100" />
复制代码
两个标签看着功能很像,不过在语义上是存在差别的,meter
表示刻度、度量,progress
表示进度,这两个标签在不同的平台和浏览器上的默认样式可能都不一样
sup、sub
很方便地表示上标和下标,如果不知道这两个标签的话,可能就要费劲巴拉地组合元素 + css
配合了
标注<sub>1</sub>
<br>
x<sup>2</sup>
复制代码
template
没错,就是那个在 vue
里经常看到的 template
,我之前一直以为这是 vue
自己规定的一个特殊标签(尽管是可以的),现在才发现这是个根正苗红的 html
元素标签,其实仔细想想也知道,这货是全小写字母,又没有中划线,那只能是原生标签了
我们之间有个模板标签,但是你啥也看不到
<template>
<ul>
<li>1</li>
<li>2</li>
</ul>
</template>
我们之间有个模板标签,但是你啥也看不到
复制代码
用于保存客户端内容机制,该内容在加载页面时不会呈现,即被这个标签包裹的元素/内容,不会在文档流中呈现,表现上看就犹如被施加了 display: none
,使用 js
获取其 childNodes/childElement
等属性,都只能得到 undefined
,不过可以通过 content
属性获得一个只读的 #document-fragment
小结
虽然存在不少的 html
标签可以直接提供一些常见场景下的通用功能,但一般情况下无论是业务开发还是组件库封装,都不会使用这些现成的东西,代码可以跑起来,功能也可以正常使用,但很多时候并不是够用了就行
要么样式不可定制化,要么行为不可定制化,在一些类似于技术文档网站、工具网站、政府网站等这些对于功能、样式要求不是那么严格的情况下,直接使用这些能够直接提供对应功能的 html
标签省时又省力,而绝大多数场景并不符合这种情况
重学 html
的意义并不在于要在以后的开发中想方设法用上这些原生标签,而在于某一天当看到别人写了这些标签的时候,你作为一个挂着前端开发工程师 title
的人,要知道这是啥,要明白这些标签写在这里代表什么意思