13个很酷但很少有人知道的HTML元素

本文正在参加「 . 」

• 原文链接：dev.to/ruppysuppy/… dev.to/ruppysuppy/…
• 原文作者：塔帕约蒂·博斯

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允许我们将自动完成建议添加到元素中

注意

1. 建议不仅限于文本，还可以与颜色，日期，时间甚至范围输入一起使用。
2. 虽然建议的默认样式看起来很简陋。但是我们可以使用CSS设置其样式。

4. map & area

map并允许我们创建图像映射，这是具有可单击区域图像的一种使用办法。

<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.预加载和缓存资源