好玩有趣的 HTML 标签
我发现很多前端开发工程师会自己基于成熟的 ui 库开封装一些组件,而不是使用原始的 HTML。希望本文能为你的项目带来些新思路。
下面列举些 9 个有趣的 HTML 标签和属性,也希望你来补充些,请留言告诉我。
1. Progress bar 进度条
复制代码
![](https://static001.geekbang.org/infoq/34/34dadcd322a3faefea14756135ce4489.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
2. Expansion panel (折叠面板)
复制代码
![](https://static001.geekbang.org/infoq/24/24f9880f74463532b748ae2291ad47e0.gif)
3. Dialog 对话框
为网站添加对话框的语义方法。但在我看来,原生的 HTML 元素要逊色于用户界面库中的现成组件
复制代码
![](https://static001.geekbang.org/infoq/c8/c88e09ddc124cf865c60871ae6c39b61.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
4. Color selection 颜色选择器
复制代码
![](https://static001.geekbang.org/infoq/62/62cb6929497c1a186beb9b17c85ac401.gif)
5. Base url
<base> HTML 标签指定文档中所有 URL 的基础 URL
复制代码
6. Lazy loading 懒加载
懒加载的本地实现。只需添加 loading="lazy" 属性,就能在网络中逐一加载图片。该功能与浏览器的兼容性较弱。但就未来而言,它是懒加载的一个很好的解决方案
复制代码
![](https://static001.geekbang.org/infoq/31/31fe915cdf5596b5ba2e2932302517cd.gif)
7. Calendar 日历
原生日历见过吗?
复制代码
![](https://static001.geekbang.org/infoq/53/53e8c988cdc5613b4d62792195c5f395.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
8. Single range 数字区间
复制代码
![](https://static001.geekbang.org/infoq/94/9496c20bbcf83e4c9bfa1a708fa5cc0c.gif)
9. Content editable
一个有趣的属性,可以编辑文本块
复制代码
![](https://static001.geekbang.org/infoq/e1/e1e5857d44a2f7783e44b03ee89eb762.gif)
原文链接:https://medium.com/@leonidshvab1996/interesting-html-tags-89ecc04cb2a9
公号同步更新,欢迎关注 👻
![](https://static001.geekbang.org/infoq/d3/d3b3be8f16fff15e47f893ba74529269.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
版权声明: 本文为 InfoQ 作者【专注前端开发】的原创文章。
原文链接:【http://xie.infoq.cn/article/ecf0e9f3dfdbcf5e9308d5db7】。文章转载请联系作者。
评论