9 个有趣的 HTML 标签和属性

1. Progress bar 进度条

1

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

2. Expansion panel (折叠面板)

1
2
3
4
5
6
7

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

3. Dialog 对话框

为网站添加对话框的语义方法。但在我看来，原生的 HTML 元素要逊色于用户界面库中的现成组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

1
2
3
4
5

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

  <button>Close</button>
</dialog>

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

4. Color selection 颜色选择器

1

<input type="color">

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

5. Base url

HTML 标签指定文档中所有 URL 的基础 URL文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

1
2
3
4

<base href="https://leonid-shvab.web.app/">

<a href="contacts">contacts</a>
<a href="blog/000">blog</a>

6. Lazy loading 懒加载

懒加载的本地实现。只需添加 loading=”lazy” 属性，就能在网络中逐一加载图片。该功能与浏览器的兼容性较弱。但就未来而言，它是懒加载的一个很好的解决方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

1
2
3

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

7. Calendar 日历

原生日历见过吗？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

1

<input type="date">

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

8. Single range 数字区间

1

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

9. Content editable

一个有趣的属性，可以编辑文本块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html

1
2
3

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53410.html