这些你可能没用过的HTML标签
起因
转眼间，毕业已五年。偶然，回想起最初接触前端的时。如同一个好奇孩子一样，对于一个个如此简单的标签，组合起来却能构成各种华丽又实用的界面！大感震惊。
而工作这么多年后，使用的标签无非也就是常用的那几个，便已“够用”。不知多少年没再回头探望过这位“老朋友”。今天正好闲来有空（摸鱼），在MDN上重温了一遍HTML的所有标签，整理了一点往常没用过，但又有点意思的标签分享给大家。
正文
一、map && area
起初望文生义，以为是用来做遍历的。细看文档描述，标签是用来在图片上设定一个映射区域，对应的映射可以绑定超链接。光看定义有点模糊，上手来个例子。
-
首先，引入四只小可爱。
-
现在利用 map和area标签，为每位小可爱划分好区域，并配置好高清图的地址。就可以实现点击图片上不同的小可爱，弹出它们对应的高清美照。
<img src="./assets/pets-area.png" style="width:280px;height:186px;" usemap="#animal" alt="">
<map name="animal">
<area shape="cat1" coords="40,96,80,176" href="./assets/cat1.png" />
<area shape="dog1" coords="70,70,140,176" href="./assets/dog1.png" />
<area shape="dog2" coords="140,60,170,176" href="./assets/dog2.png" />
<area shape="cat2" coords="170,120,240,176" href="./assets/cat2.png" />
</map>
二、meter&&progress
不知道有没有和我一样的朋友，以前自己实现progress都是使用div + css 一点一点画出来的。
-
meter能帮我们展现出一个数据在指定范围内的表现情况。通过设定low和hight参数可以得到不同的表现。 -
progress可以快速帮助我们实现一个简单的进度条功能。
当前水温：<meter max="100" low="30" value="83" high="80">H</meter>
下载进度：<progress value="60" max="100"></progress>
三、pre
可以在保留文本原有格式展示在网页上，类似如古诗文的格式保留。
<pre>
飞来山上千寻塔，闻说鸡鸣见日升。
不畏浮云遮望眼，只缘身在最高层。
-- 《登高》 王安石
</pre>
实现效果：
飞来山上千寻塔，闻说鸡鸣见日升。
不畏浮云遮望眼，只缘身在最高层。
-- 《登高》 王安石
收尾
重温一遍HTML后，的确没想到这些年期间，HTML推出了这么多标签(分享的仅是很小一部分)。结合这些标签的功能，回想起了以前开发的需求，都可以利用它们来更简便的解决问题。
文章出自：https://juejin.cn/post/7221413753731792955
作者：一时_96
原文始发于微信公众号（前端24）：这些你可能没用过的HTML标签
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216391.html
