更新时间：2024-06-06 16:13:54作者：佚名
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，可以直接控制弹窗的显示与隐藏。
<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键来关闭弹窗。
九，
它是一个用于为输入框提供可选值的列表标签，类似于我们常用的组件。
我可以用它来实现一个“输入联想”功能。
试一试吧：
第一次点击的时候会列出所有推荐的选项，然后根据后面输入的内容，过滤掉不匹配的选项。比如我输入cl，不以cl开头的单词都会被过滤掉，只剩下Click和Close。
最后发现这个下拉框挺好看的，这个原生输入框默认样式怎么这么丑啊，什么时候改啊
十，
该标签用于对表单内的元素进行分组管理，如果设置了该属性，那么被它包裹的表单元素全部会被禁用，并且变灰，不会随表单一起提交，是的，它会变成一个摆设。
这是什么意思？以下是一个例子：
这里我们将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>
当没有禁用时，页面如下：
禁用时，它看起来像这样：