7 个没人用的炫酷 HTML 元素

参考

感谢阅读

搜索酷炫的HTML元素，特别是当你不知道自己在寻找什么时，通常就像被扔进一堆垃圾

别担心，脏活我都给你做了！

在搜寻了看似无穷无尽的HTML元素之后，我挖掘出了一些很少使用的宝石！

1. meter&progress

该progress元素是显示进度条的语义正确的方式。

该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允许您向元素添加自动完成建议input。

笔记

1. 建议不仅限于文本inputs，还可以用于颜色、日期、时间甚至范围输入。
2. 建议的默认样式至少看起来不太美观。不过，你随时可以使用CSS来设置样式。

4. map&area

map并area允许您创建图像地图，这是具有可点击区域的图像的一个术语。

<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>

动图

4. details&summary

details和summary用于创建可折叠内容，无需使用任何JavaScript 。这是创建下拉菜单的语义方法。

6.object

还在为在网站上嵌入文件而苦恼吗？不用再犹豫了！

object允许您嵌入各种文件，如PDF、图像、视频、音频甚至Youtube 视频。

7.abbr

该abbr元素允许您在文档中添加缩写。当用户将鼠标悬停在缩写上时，会显示完整形式。此外，您还可以配置屏幕阅读器，使其在遇到缩写时读出完整形式。

就这些啦，朋友们！🎉

觉得个人理财太难？看看我的Instagram，成为“金钱忍者”

参考

1. W3学校
2. MDN

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。