1. 缩写

abbr的全称是，应用场景也很简单，对一些文章中的缩写添加注解。

以往对文章中缩写的解释往往是这样的：

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

那么使用 abbr 标签怎么样？

    DAU

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

显示效果如下：

这个标签可以隐藏全称，弱化信息量caption是什么意思，让真正不知道缩写的用户主动去获取缩写的具体含义，这在 中经常出现。

2. 马克

它也常用于，用于突出显示换行的文本。

高亮文本

效果如下：

如果想让整个文本使用统一的高亮样式，可以专门重新设置 mark 标签的样式。这样就不用给每个使用的 div 添加 class 名，这样做不具备语义，只会增加文档大小。

3. supcaption是什么意思，sub

和 分别代表上标和下标，在中文中经常出现，例如数学公式和引用文。

3[2]
42

效果如下：

上标和下标的样式原理也比较简单，主要是利用-align的top和sub属性值，然后缩小字体大小。不过有现成的标签，何必不用呢？

四、

它用于包裹其他标签的内容，然后使用另一个标签对包裹的内容给出文字描述，例如：

效果如下：

如果图片挂了怎么办？

为了使其更加友好，我们可以删除img标签的alt属性。

漂亮，终于摆脱了我一直恼火的图标破裂的问题了，而且风格也很漂亮。

当然，它可以包装的不仅仅是 img 标签，其他任何东西都是可能的。

嘿嘿，这篇文章给大家举个实际的例子，下面这个可以点击，样式也是用了这个标签。

我被标签所创造

五，

说起

这个标签很有意思，去年有一段时间我做的业务涉及到一个进度条，是当时以前的同事做的英语作文，出现了一些性能问题，当时在研究怎么优化，减少进度条变化带来的性能问题。

虽然最后问题解决了，但是还是很幸运的收到了张鑫旭的评论，说这个标签就够了，兼具语义和进度条功能，性能好，兼容性也好，尝试了几次之后，发现确实是当时自己孤陋寡闻了，所以推荐给大家。

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

在业务中我们还可以通过控制value属性来改变进度条的进度。

6. 面积

area标签也挺有意思的，用来给图片提供点击热点，可以定义图片的哪些区域是可以点击的，点击后跳转的链接也可以设置下载文件，我们来举个例子：

Area 通常和 map 标签一起使用，每个 area 标签代表一个热区，例如上面的代码中我们定义了两个热区，热区的形状都是 rect（长方形），它们的热区分别是：

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

因此我们划分的两个热区为：

最后我们来看看我们的实际结果：

七，

字面意思就是“详细信息”，经常用在 中，被该标签包裹的内容会默认被隐藏，只留下简单的说明，我们点击之后才会显示详细内容。

  
我是一段被隐藏的内容

效果如下：

还没有添加一行js代码，我们点击之后，会给标签添加一个open属性，隐藏的内容就会显示出来。

默认情况下，简要文字为“详细信息”，如果要修改此文字，需要配合标签使用。

  
点击查看更多
  
我是一段被隐藏的内容

就是这样！

八，

浏览器自带了alert、close等弹窗方法，样式都是固定的，每个浏览器都不一样，也会阻塞页面运行。除此之外，还提供了一个标签，它的用法有点类似各大组件库的Modal组件，浏览器也为这个标签提供了原生的DOM方法：close，可以直接控制弹窗的显示与隐藏。

    
    ok

打开弹框
<script>
    const dialog = document.getElementById('dialog')
    const openBtn = document.getElementById('openBtn')
    const closeBtn = document.getElementById('close')
  
    openBtn.addEventListener('click', () => {
        // 打开弹框
        dialog.showModal()
    })
    closeBtn.addEventListener('click', () => {
        // 隐藏弹框
        dialog.close()
    })
</script>

效果如下：

仔细的大家有没有注意到，这个原生的弹窗也是带有背景遮罩的，虽然无法通过点击关闭，但至少不会遮挡页面。

那么当弹窗显示出来的时候，我们也可以通过按Esc键来关闭弹窗。

九，

它是一个用于为输入框提供可选值的列表标签，类似于我们常用的组件。

我可以用它来实现一个“输入联想”功能。

 输入C开头的英文单词：

试一试吧：

第一次点击的时候会列出所有推荐的选项，然后根据后面输入的内容，过滤掉不匹配的选项。比如我输入cl，不以cl开头的单词都会被过滤掉，只剩下Click和Close。

最后发现这个下拉框挺好看的，这个原生输入框默认样式怎么这么丑啊，什么时候改啊

十，

该标签用于对表单内的元素进行分组管理，如果设置了该属性，那么被它包裹的表单元素全部会被禁用，并且变灰，不会随表单一起提交，是的，它会变成一个摆设。

这是什么意思？以下是一个例子：

  

    
被禁用区域
    ID：
    
    邮箱：
    
  
  名字：
  
  提交

这里我们将ID和email的表单进行包装，并设置只打开一个name的输入控件，界面如下：

可以看到除了姓名输入框之外，其他两个输入框都被禁用了，这时候点击提交会是什么样子的呢？

嗯，只提交了姓名字段。

十一，

此标签仅在浏览器不支持或者被禁用时显示，多用于对js依赖较大的应用中，比如现在大部分SPA页面，一旦不支持，页面基本就没什么内容了，此时此标签可以起到友好提示的作用。

一般我们不需要特意去使用它，大部分都是在打包过程中自动插入到HTML静态文件中的，例如：

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

<script defer src="./init.js"></script>

当没有禁用时，页面如下：

禁用时，它看起来像这样：