你应该知道的 5 个 HTML 功能

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

作为 Web 开发人员，我们会接触到各种各样的技术、框架和编程语言。虽然学习 HTML、CSS 和 JS 很简单，但要精通它们却并非易事。
尽管了解 HTML 的特性有很多好处，但有时却被忽视了。使用 HTML 的现有特性比从头开始创建要节省大量时间。此外，你的标记也会更加简洁易用。
那么，让我们一起来看看五个你可能从未听说过的 HTML 特性吧！希望这篇文章能对你有所帮助！

1. 输入建议

html

<datalist>

元素包含一组

<options>

代表其他控件中可供选择的推荐选项的元素。

2. 细节披露

html

<details>

该元素创建一个显示小部件，其中的信息仅在小部件切换到“打开”状态时可见。

3. 基本元素

html

<base>

该元素指定文档中所有相对 URL 所使用的基本 URL。

在这个例子中，我将基本 URL 设置为https://i.pravatar.cc，并将目标设置为空。图片加载时会考虑基本 URL 及其各自的 src 属性。锚元素会重定向到基本 URL 加上 href 属性。

4. 图片和 iframe 的懒加载

您可以添加 loading 属性并将其值设置为 lazy，以延迟加载图像和 iframe，直到它们在浏览器中可见。

5. 图片元素

html

<picture>

元素包含零个或多个

<source>

元素和一

<img>

该元素用于为不同的显示/设备场景提供图像的替代版本。

在上述示例中，如果浏览器宽度至少为 800 像素，则根据设备分辨率使用 head.jpg 或 head2x-jpg。如果浏览器宽度介于 450 像素和 800 像素之间，则同样根据设备分辨率使用 head-small-2x.jpg。

希望这篇文章对你有所帮助😅。