12个可能你没见过，但非常实用的HTML标签

一、center

零一

效果如下：

鼓楼网站建设公司成都创新互联公司,鼓楼网站设计制作，有大型网站制作公司丰富经验。已为鼓楼上千多家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的鼓楼做网站的公司定做！

水平居中

原理也很简单，其实就是这个标签自带了 text-align: center 的样式

二、abbr

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

以前在文章中对于缩写的解释经常会这么做：

DAU（Daily Active User），日活跃用户数 ......

那我们用 abbr 标签呢？


    DAU

，日活跃用户数 ......

展示的效果如下：

这个标签就可以把全称隐藏掉，弱化信息量，让真正不知道该缩写的用户主动去获取缩写的具体意思，这个在 markdown 里经常会出现

三、mark

在 markdown 中也是很常用的，用于将包裹的文本高亮展示

高亮文本

效果如下：

如果全文统一高亮样式，可以专门对 mark 标签进行样式重置，这样就不用对你用的每个 div 加一个 highlight 的类名了，又不语义化，又徒增文档大小

四、sup、sub

^{和 _{分别表示上标和下标，在 markdown 中出现得也很频繁，比如数学公式和引用}}

3^[2]

4₂

效果如下：

上标和下标的样式原理也比较简单，主要就是利用了 vertical-align 的 top 和 sub 属性值，然后将字号缩小，不过有现成的标签，干嘛不用呢？

五、figure

figure 是用于包裹其它标签的内容的，然后再利用另一个标签 figcaption ，可以对包裹的内容进行一个文本描述，例如：


             alt="大象">
    这是一张大象的照片

效果如下：

那要是图片挂了呢？

再友好点处理，我们把 img 标签的 alt 属性去掉

漂亮，终于把我一直厌烦的图裂icon给干掉了，样式还巨好看

当然不止能包裹 img 标签，其它任何都是可以的

嘿嘿，给大家在本文来个实战:point_down:，下面这个可以点击，样式也是利用了 figure 这个标签

我是figure标签产生的

六、progress

说到这个标签就很有意思了，去年有段时间我做的业务里涉及到了进度条，当时是前同事做的，然后有一些性能问题，我就在研究如何优化，减少进度条改变带来的性能问题，当时还写了一篇我优化了进度条，页面性能竟提高了70%

虽然最后问题时解决了，但是也有幸收到了张鑫旭大佬的评论，他告诉我 progress 这个标签就足够了，既有语义化，又有进度条的功能，性能还好，兼容性也很不错。后来经过一番尝试，还真是，当时是我孤陋寡闻了，也安利给大家

浏览器自带的样式就已经很好看了，效果如下：

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

七、area

area 这个标签也非常有意思，它的作用是为图片提供点击热区，可以自己规定一张图的哪些区域可点击，且点击后跳转的链接，也可以设置成点击下载文件，我们来举个例子：

area 一般要搭配 map 标签一起使用，每个 area 标签表示一个热区，例如上面代码中，我们定义了两个热区，热区形状都为 rect （矩形），他们的热区分别是：

坐标 (0,0) 到坐标 (100,50) 的一个矩形
坐标 (0,50) 坐标 (100,100) 的一个矩形

我们都知道，默认的坐标轴是这样的：

因此，我们划分的两个热区就是:

最后再来看一下我们的实际效果：

八、details

details 字面意思是 "详情"，在markdown里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容


  我是一段被隐藏的内容

效果如下：

这还没有加任何一行的 js 代码，我们点击后， details 标签上会多一个 open 的属性，被隐藏的内容就展示出来了

默认情况下，简要文字为 "详情" ，想要修改这个文字，要搭配 summary 标签来使用


  点击查看更多

  我是一段被隐藏的内容

就搞定了

九、dialog

浏览器自带弹窗方法 alert 、 confirm 、 prompt ，样式固定且每个浏览器不同，同时还会阻塞页面运行，除了这个还提供了一个 dialog 标签，它的使用方式有点类似于现在各大组件库的 Modal 组件了，浏览器还为该标签提供了原生的 dom 方法： showModal 、 close ，可以直接控制弹窗的展示和隐藏

效果如下：

细心的你有没有发现，这原生的弹框还自带背景蒙层，点击是关闭不掉的，但起码它不会阻塞页面

然后我们在弹窗展示时，也可以通过 esc 键来关闭弹窗

十、datalist

datalist 是用于给输入框提供可选值的一个列表标签，类似咱们常用的 Select 组件

我可以用其实现一个 "输入联想" 的功能

 输入C开头的英文单词：

来试一试：

刚点击时会把所有推荐的选项都列出来，然后根据后面输入的内容，会过滤掉不匹配了的选项，比如我输入 cl ，会过滤掉不是 cl 开头的单词，最后只剩下 Click 和 Close 了

最后我发现，他这个下拉框有点好看啊？为啥这原生的 input 框默认样式那么丑，啥时候改改

十一、fieldset

fieldset 标签是用于分组管理 form 表单内的元素的，若 fieldset 设置了 disabled 属性，则被其包裹的所有表单元素都会被禁用置灰，且不会随着表单一起提交上去，是的就成了摆设

什么意思呢？看个例子：


  
    被禁用区域
    ID：
    
    邮箱：
    
  

  名字：

这里我们把 ID 和邮箱的表单包裹了起来，且设置了 disabled ，只开放了一个 name 的输入控件，此时界面如下：

可以看到除了 name 输入框，其它的两个输入框都被禁用了，此时点提交会是什么样子呢？

嗯，只提交了 name 字段

十二、noscript

这个标签是在浏览器不支持或禁用了 javascript 时才展示的，大多用于对 js 强依赖的应用，比如现在大部分的 SPA 页面，一旦不支持 javascript ，页面基本上什么内容都没了，此时可以靠这个标签做友好提示

一般我们不需要特地去使用，大多都是在打包过程中自动插入到 html 静态文件里去了的，例如：

// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '点击出弹窗'
root.appendChild(button)

未禁用 javascript 时，页面时这样的：

禁用了 javascript 时，是这样的：

分享题目：12个可能你没见过，但非常实用的HTML标签
分享网址：http://www.shufengxianlan.com/qtweb/news46/144546.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容