1. meter & progress
元素是显示进度条的语义正确方式。
除了在已知范围内显示标量测量值外，它还允许我们指定值的低，高和最佳范围。
<meter min="0" max="100" low="25" high="75" optimum="80" value="50" ></meter>
效果
2. sup & sub
我们可以在文档中添加上标和下标。x²supx₀sub
3. datalist
datalist允许我们将自动完成建议添加到元素中
注意
- 建议不仅限于文本，还可以与颜色，日期，时间甚至范围输入一起使用。
- 虽然建议的默认样式看起来很简陋。但是我们可以使用CSS设置其样式。
4. map & area
map并允许我们创建图像映射，这是具有可单击区域图像的一种使用办法。
ini
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379" /> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html" /> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html" /> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.html" /> </map>
5. details & summary
details并且用于创建可折叠的内容，并且无需使用任何JavaScript。这是创建下拉列表的语义方法。
6. object
不知道怎样在你的网站上嵌入文件？不要找了，用object吧
object允许我们嵌入各种文件，如PDF，图像，视频，音频 甚至 视频。
7. abbr
该元素允许我们向文档添加缩写。当用户将鼠标悬停在缩写上时，将显示完整窗体。此外，屏幕阅读器还可以配置为在遇到缩写时读出完整表格。
8.预加载和缓存资源 📥
想知道如何 预加载 和 缓存资源 吗？只需要一行代码，你就完成了！
<link rel="preload" href="https://example.com/asset.png" as="image" />
9.为页面🖼️添加自定义链接预览
对链接预览的生成方式感到疑惑？我们所需要的只是标签！
<meta property="og:title" content="Page title" /> <meta property="og:description" content="Page description" /> <meta property="og:image" content="https://example.com/asset.png" />
上面显示的标签使用 Open Graph Protocol（开放图谱协议），你可以使用任何标签生成器为所有其他平台生成标签
10.重定向到另一个链接↪️
将用户重定向到其他链接（通常在付款确认后使用）只需一行代码即可！
<meta http-equiv="refresh" content="3; url=https://juejin.cn/" />
上面的代码将在 3 秒后将用户重定向到 掘金。
11. 拨打电话或邮件 📞
需要一个链接来拨打 电话 或发送 邮件！
<a href="tel:+12345678910">Call</a> <a href="mailto:user@email.com">Mail</a>
12. 添加颜色选择器 🎨
想要向您的网站添加 颜色选择器？您只需要一行，不需要花哨的 库 甚至也不需要 JavaScript！
<input type="color" />
13. 可编辑内容 ✏️
只需将属性添加到元素即可使任何内容可编辑。
<p contenteditable="true"> 这是一段可编辑的话 </p>
