起因
转眼间，毕业已五年。偶然，回想起最初接触前端的时。如同一个好奇孩子一样，对于一个个如此简单的标签，组合起来却能构成各种华丽又实用的界面！大感震惊。
而工作这么多年后，使用的标签无非也就是常用的那几个，便已“够用”。不知多少年没再回头探望过这位“老朋友”。今天正好闲来有空（摸鱼），在MDN上重温了一遍HTML的所有标签，整理了一点往常没用过，但又有点意思的标签分享给大家。
正文
一、map && area
起初望文生义，以为是用来做遍历的。细看文档描述，标签是用来在图片上设定一个映射区域，对应的映射可以绑定超链接。光看定义有点模糊，上手来个例子。
1.首先，引入四只小可爱。
2.现在利用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推出了这么多标签(分享的仅是很小一部分)。结合这些标签的功能，回想起了以前开发的需求，都可以利用它们来更简便的解决问题。
到这里，分享就结束了。相逢即是缘，感谢你的观看，希望对你能有所帮助，如有错漏欢迎指正。
环境艰难，生活不易。愿同胞们都能工作顺利，拥有更美好的一天。
