古早前端-重学一点 html

清夜
1,938 阅读5分钟

某次看一篇技术文章，文章里有一段 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…, 但下拉菜单可定义的样式很有限

1.png

2.png

并且其可以自动处理下拉菜单溢出屏幕外的情况

3.png

datalist

一般配合 input 使用(label也可以)，datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表，其功能类似于在 select上多了个输入筛选的功能

4.png

此标签的作用是弹出一个类似于下拉菜单的组件，展示可选项，但是这个下拉菜单组件是无法自定义样式，甚至检查元素都检查不到

area

MDN 上的这个例子比较形象

5.png

对于上述这个图片，存在 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> 件。

6.png

ins 标签表示的是文本的新增，与 del 标签配合，用于描述文档中文案的更新动作

details、summary

这两个标签配合使用，实现一个可以打开、收起的折叠面板功能，经常会在 Github上一些开源项目的 README 文档里看到这个标签的使用，我第一次看到的时候还很惊讶，因为我觉得这是一个需要 js才能实现的能力，但一般支持 markdown渲染的网站，为了安全考虑都不会允许 markdown文件里的 js执行的，莫非是用了什么奇技淫巧？打开检查者工具一看，原来是平平无奇的 html标签

<details>
  <summary>标题</summary>
  <p>详细描述的内容</p>
</details>

<hr />

<details open>
  <summary>标题</summary>
  <p>详细描述的内容</p>
</details>

8.png

meter、progress

<meter value="3" min="0" max="10"></meter>

9.png

<progress value="22" max="100" />

10.png

两个标签看着功能很像，不过在语义上是存在差别的，meter表示刻度、度量，progress表示进度，这两个标签在不同的平台和浏览器上的默认样式可能都不一样

sup、sub

很方便地表示上标和下标，如果不知道这两个标签的话，可能就要费劲巴拉地组合元素 + css配合了

标注<sub>1</sub>
<br>
x<sup>2</sup>

11.png

template

没错，就是那个在 vue里经常看到的 template，我之前一直以为这是 vue自己规定的一个特殊标签（尽管是可以的），现在才发现这是个根正苗红的 html元素标签，其实仔细想想也知道，这货是全小写字母，又没有中划线，那只能是原生标签了

我们之间有个模板标签，但是你啥也看不到
<template>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</template>
我们之间有个模板标签，但是你啥也看不到

12.png

用于保存客户端内容机制，该内容在加载页面时不会呈现，即被这个标签包裹的元素/内容，不会在文档流中呈现，表现上看就犹如被施加了 display: none，使用 js获取其 childNodes/childElement等属性，都只能得到 undefined，不过可以通过 content属性获得一个只读的 #document-fragment

8.png

小结

虽然存在不少的 html标签可以直接提供一些常见场景下的通用功能，但一般情况下无论是业务开发还是组件库封装，都不会使用这些现成的东西，代码可以跑起来，功能也可以正常使用，但很多时候并不是够用了就行

要么样式不可定制化，要么行为不可定制化，在一些类似于技术文档网站、工具网站、政府网站等这些对于功能、样式要求不是那么严格的情况下，直接使用这些能够直接提供对应功能的 html标签省时又省力，而绝大多数场景并不符合这种情况

重学 html的意义并不在于要在以后的开发中想方设法用上这些原生标签，而在于某一天当看到别人写了这些标签的时候，你作为一个挂着前端开发工程师 title 的人，要知道这是啥，要明白这些标签写在这里代表什么意思

avatar
文章
阅读
粉丝