这些非常实用的 HTML 标签你知道吗？

①center

通过名字，我们应该就知道是居中的意思；非常的语义化。

<center>这里是测试文本</center>

我们通过审查元素，可以很清楚知道他的原理：就是加了一个text-align:center

②abbr

abbr 全称是 abbreviations，意思是缩写。应用场景也很简单，为一些文章中的缩写增加注释;

以前我们可能这样用：k8s(kubernetes)是为容器服务而生的一个可移植容器的编排管理工具

 ③mark

<mark/>用于将包裹的文本高亮展示

<mark>高亮展示</mark>

效果如下：

 

审查元素可以看到，他其实就是给元素加背景和字体颜色；

有了这个标签，我们可以更加方便的统一修改高亮的样式，不用给所有需要高亮的元素设置class

④sub/sup

<sup/>和<sub/>分别表示上标和下标，比如数学公式和化学式

 

⑤progress

使用：

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

效果如下：

 

progress 这个标签其实是很好的选择，既有语义化，又有进度条的功能，性能还好，兼容性也很不错。

实际业务中我们也就可以通过控制 value 属性，来改变进度条的进度了

⑥area

area 这个标签也非常有意思，它的作用是为图片提供点击热区，可以自己规定一张图的哪些区域可点击;

一般配合map使用

注释：<img>  标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

 <img src="https://img1.baidu.com/it/u=692181697,2515657060&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1665680400&t=73a9efc9b1274679e2ee4c6a155a98ea" width="100" height="100" alt="" usemap="#map">   

        <map name="map">                    

                <area  shape="rect"coords="0,0,100,50"alt="baidu"href="https://www.baidu.com">                                 

              <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">   

       </map>

⑦noscript

这个标签是在浏览器不支持或禁用了 javascript 时才展示的

<noscript>

      不好意思，你的浏览器不支持或禁用了 JavaScript，请更换浏览器或启用 JavaScript

</noscript>

 

好，这就是这次分享的内容，感谢大家的观看，下一次分享我们再见。

更多学习视频学习资料请参考：B站搜索“我们一起学前端”