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²​​​sup​​x₀​​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.预加载和缓存资源 📥

想知道如何 预加载 和 缓存资源 吗？只需要一行代码，你就完成了！

<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://j.cn/"
/>

上面的代码将在 3 秒后将用户重定向

11. 拨打电话或邮件 📞

需要一个链接来拨打 电话 或发送 邮件！

<a href="tel:[phone]">Call</a>
<a href="mailto:[e-mail]">Mail</a>

12. 添加颜色选择器 🎨

想要向您的网站添加 颜色选择器？您只需要一行，不需要花哨的 库 甚至也不需要 JavaScript！

<input type="color" />

13. 可编辑内容 ✏️

只需将属性添加到元素即可使任何内容可编辑。

<p contenteditable="true">
  这是一段可编辑的话
</p>