今天给大家推荐几个小众但是非常实用的HTML标签，不仅仅是语义，它们都有各自的应用场景和特殊的内置功能
看过的请跳过，没看过的请查漏补缺~
1. 中心
让你实现水平居中，就用这个标签，而且标签名也很有语义
<center>零一</center>
效果如下：
水平居中
原理也很简单，其实这个标签自带了一个text-align: center样式
二、缩写
abbr的全称是abbreviations，意思是简写。应用场景也很简单，减少一些文章中对缩写的注释
以前文章中对简写的解释经常是这样做的：
DAU（Daily Active User），日活跃用户数 ......
我们使用的 abbr 标签怎么样？
<abbr title="Daily Active User">
DAU
</abbr>
<span>，日活跃用户数 ......</span>
所证实的疗效如下：
这个标签可以隐藏全名，削弱信息量，让确实不知道缩写的用户主动获取缩写的具体含义，这种缩写经常出现在markdown中
三、标记
它在 Markdown 中也很常用来突出显示换行的文本
<mark>高亮文本</mark>
效果如下：
如果全文有统一的高亮样式，可以重新设置mark标签的样式，这样就不需要给使用的每个div都添加高亮类名，既不语义又增加文件大小。
四、上、下
和 分别代表上标和下标，在markdown中经常出现，比如物理公式、参考文献
<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>
效果如下：
上标和下标的样式原理也比较简单，主要是利用vertical-align的top和sub属性值，然后减小字体大小，但是有现成的标签，为什么不使用呢？
五、图
figure用来包裹其他标签的内容，然后借助另一个标签figcaption，可以对包裹的内容进行文字描述，例如：
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="大象">
<figcaption>这是一张大象的照片</figcaption>
</figure>
效果如下：
如果图片挂了怎么办？
为了更加友好，我们去掉img标签的alt属性
漂亮，终于把我一直讨厌的图片破解图标干掉了，风格还是很漂亮的
当然不只是img标签可以换行，其他都可以
嘿嘿，这篇文章给大家来个实战，下面这个可以点一下，样式也是根据figure标签来的
我是六人组的人物标签，进展
说起
这个标签很有趣。 去年有一段时间，我做的业务涉及到进度条。 当时是一个以前的朋友做的，然后就出现了一些性能问题。 我正在研究如何优化和减少进度条变化带来的性能问题。 ，还写了一篇
虽然最后问题解决了，但是有幸收到了张新旭老师的点评。 他告诉我进度标签就足够了。 它同时具有语义和进度条功能。 性能不错，兼容性也很好。后来经过一番尝试，确实是我当时无知，安利给大家
<progress max="100" value="60"/>
浏览器内置的样式已经很好看了，效果如下：
业务中我们还可以通过控制value属性来改变进度条的进度
七、面积
区域标签也很有趣。 它的作用是为图片提供一个点击热点区域。 可以指定图片的哪个区域可以点击，点击后跳转的链接也可以设置为点击下载文件。 我们举一个反例：
<img src="example.png" 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>
区域一般与地图标签一起使用，每个区域标签代表一个热点区域。 例如，在前面的代码中，我们定义了两个热点区域，热点区域的形状为 rect（矩形）。 他们的热门领域是：
我们都知道默认的坐标轴是这样的：
因此，我们定义的两个热区是：
最后我们来看看我们的实际疗效：
八、细节
details字面意思是“细节”，经常用在markdown中。 这个标签包裹的内容默认会被隐藏，只留下解释性文字，我们点击后可以显示详细内容
<details>
<p>我是一段被隐藏的内容</p>
</details>
效果如下：
这里没有添加任何一行js代码。 我们点击后，详情标签上会有一个打开属性，隐藏的内容就会显示出来。
默认情况下，简短文本为“详细信息”。 如果要更改此文本，则需要将其与摘要标签一起使用
<details>
<summary>点击查看更多</summary>
<p>我是一段被隐藏的内容</p>
</details>
完成
九、对话
浏览器有自己的弹窗方法alert、confirm、prompt。 风格是固定的，每个浏览器都不一样。 同时，它会阻止页面运行。 除此之外，它还提供了一个对话框标签。 它的用法和现在的各大组件库有些类似。 Modal组件，浏览器还为此标签提供了原生dom方法：showModal、close，可以直接控制弹窗的显示和隐藏
<dialog id="dialog">
<input type="text">
<button id="close">ok</button>
</dialog>
<button id="openBtn">打开弹框</button>
<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键关闭弹窗
10. 数据列表
datalist是一个列表标签，用于为输入框提供可选值，类似于我们常用的Select组件
我可以用它来实现“输入关联”功能
<label> 输入C开头的英文单词：</label>
<input list="c_words"/>
<datalist id="c_words">
<option value="China">
<option value="Click">
<option value="Close">
<option value="Const">
<option value="Count">
</datalist>
试一试：
只要点击，就会列出所有推荐的选项，然后根据之前的输入，过滤掉不匹配的选项。 比如我输入cl，那么不以cl开头的短语就会被过滤掉，只剩下Click和Close。 向上
最后我发现他的下拉框有点好看是吧？为什么原来的输入框默认样式这么难看html标签隐藏，什么时候改？
十一、现场设置
fieldset标签用于对form表单中的元素进行分组和管理。 如果为fieldset设置了disabled属性，则其包裹的所有表单元素都会被禁用并变灰，并且不会与表单一起提交。 是的，它变得装饰
这意味着什么？ 看一个反例：
<form action="/example">
<fieldset disabled>
<legend>被禁用区域</legend>
<label>ID：</label>
<input type="text" name="id" value="1">
<label>邮箱：</label>
<input type="text" name="email" value="1234567@163.com">
</fieldset>
<label>名字：</label>
<input type="text" name="name">
<button type="submit">提交</button>
</form>
这里我们将ID和邮箱的形式包装起来，并设置为禁用，并且只打开一个姓名输入控件。 此时界面如下：
可以看到不仅是姓名输入框，其他两个输入框都被禁用了，点击提交后会是什么样子呢？
嗯，只提交name字段
十二、无脚本
仅当浏览器不支持或禁用 javascript 时html标签隐藏，才会显示此标记。 多用于严重依赖js的应用，比如现在的大部分SPA页面。 一旦不支持javascript，页面的内容就基本没有了。 您可以信赖此标签作为友好提醒
一般情况下，我们不需要专门使用它。 大多数都是在打包过程中手动插入到html静态文件中，例如：
// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '点击出弹窗'
root.appendChild(button)
<script defer src="./init.js"></script>
<noscript>
不好意思，你的浏览器不支持或禁用了 JavaScript，请更换浏览器或启用 JavaScript
</noscript>
<div id="root"></div>
当 javascript 未禁用时，页面如下所示：
当 javascript 被禁用时，它看起来像这样：
终于
我希望这篇文章对您有所帮助。 如有错误，还请见谅。 如果您有更多有趣的意见，欢迎在评论区讨论！
