9 个有趣的 HTML 标签和属性
1. Progress bar 进度条
1 |
<progress value="32" max="100">32%</progress> |
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>
|
3. Dialog 对话框
为网站添加对话框的语义方法。但在我看来，原生的 HTML 元素要逊色于用户界面库中的现成组件
1 2 3 4 5 |
<dialog open> <p>Greetings, one and all!</p> <button>Close</button> </dialog> |
4. Color selection 颜色选择器
1 |
<input type="color"> |
5. Base url
HTML 标签指定文档中所有 URL 的基础 URL
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” 属性，就能在网络中逐一加载图片。该功能与浏览器的兼容性较弱。但就未来而言，它是懒加载的一个很好的解决方案
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"> |
7. Calendar 日历
原生日历见过吗？
1 |
<input type="date"> |
8. Single range 数字区间
1 |
<input type="range" min="0" max="50"> |
9. Content editable
一个有趣的属性，可以编辑文本块
1 2 3 |
<p contenteditable="true"> You can edit this block of text. </p> |
THE END
