好玩有趣的 HTML 标签

2023-08-09
浙江
本文字数：794 字
阅读完需：约 3 分钟

我发现很多前端开发工程师会自己基于成熟的 ui 库开封装一些组件，而不是使用原始的 HTML。希望本文能为你的项目带来些新思路。

下面列举些 9 个有趣的 HTML 标签和属性，也希望你来补充些，请留言告诉我。

1. Progress bar 进度条

<progress value="32" max="100">32%</progress>

复制代码

2. Expansion panel (折叠面板)

<details>  <summary>Global Goals</summary>  <p>    The Global Goals are a set of 17 commitments made by 193 world leaders, to    end extreme poverty, inequality, and climate change by 2030..  </p></details>

复制代码

3. Dialog 对话框

为网站添加对话框的语义方法。但在我看来，原生的 HTML 元素要逊色于用户界面库中的现成组件

<dialog open>  <p>Greetings, one and all!</p>
  <button>Close</button></dialog>

复制代码

4. Color selection 颜色选择器

<input type="color">

复制代码

5. Base url

<base> HTML 标签指定文档中所有 URL 的基础 URL

<base href="https://leonid-shvab.web.app/">
<a href="contacts">contacts</a><a href="blog/000">blog</a>

复制代码

6. Lazy loading 懒加载

懒加载的本地实现。只需添加 loading="lazy" 属性，就能在网络中逐一加载图片。该功能与浏览器的兼容性较弱。但就未来而言，它是懒加载的一个很好的解决方案

<img  loading="lazy" src="1.jpg" height="400px" width="400px"><img  loading="lazy" src="2.jpg" height="400px" width="400px"><img  loading="lazy" src="3.jpg" height="400px" width="400px">

复制代码

7. Calendar 日历

原生日历见过吗？

<input type="date">

复制代码

8. Single range 数字区间

<input type="range" min="0" max="50">

复制代码

9. Content editable

一个有趣的属性，可以编辑文本块

<p contenteditable="true">  You can edit this block of text.</p>

复制代码

原文链接：https://medium.com/@leonidshvab1996/interesting-html-tags-89ecc04cb2a9

公号同步更新，欢迎关注 👻

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/ecf0e9f3dfdbcf5e9308d5db7】。文章转载请联系作者。

专注前端开发

关注

聚焦于前端技术，分享大前端技术栈干货 2019-11-21 加入

还未添加个人简介

发布

暂无评论

创作场景

好玩有趣的 HTML 标签

1. Progress bar 进度条

2. Expansion panel (折叠面板)

3. Dialog 对话框

4. Color selection 颜色选择器

5. Base url

6. Lazy loading 懒加载

7. Calendar 日历

8. Single range 数字区间

9. Content editable

专注前端开发

评论