一些重要的 HTML 标签，你应该知道

1. 延迟加载图像

2. 图片标签

3 http-equiv=“刷新”

4. 进展

5. 数据列表

结论

有一些 HTML 标签较少被提及，但却有可能减轻开发人员的麻烦。

1. 延迟加载图像

延迟加载是一种将资源识别为非阻塞（非关键）资源并仅在需要时加载的策略。它缩短了关键渲染路径的长度，从而减少了页面加载时间。

延迟加载可能发生在应用程序的不同时刻，但通常发生在某些用户交互中，例如滚动和导航。

<img src = "image.jpeg" alt = "Image" loading="lazy" />

这也像 iframe 一样起作用，并且大多数浏览器都支持。

2. 图片标签

HTML 元素包含零个或多个元素和一个元素为不同的显示/设备场景提供图像的替代版本。

浏览器会考虑每个孩子元素，并从中选择最佳匹配。如果未找到匹配项（或浏览器不支持该元素），则选择该元素 src 属性的 URL 。然后，所选图像将显示在该元素占用的空间中。

<picture>
    <source srcset="image800px.png"
            media="(min-width: 800px)">
    <img src="imagedefault.png" alt="" />
</picture>

除 Internet Explorer 之外的所有浏览器都支持此功能。

3 http-equiv=“刷新”

我只想讨论一下这个用例。
假设用户第一次访问你的网站时，你想向他展示几秒钟的加载画面，以便预先加载内容，从而获得更好的用户体验。在这种情况下，它非常有用。

<meta http-equiv="refresh" content="30; https://amankumarsingh01.github.io">

30 秒后将重定向至 streamstyle

content属性说明：

页面重新加载前的秒数 - 仅当内容属性包含正整数时。

页面重定向到另一个页面之前的秒数 - 仅当内容属性包含正整数后跟字符串“;url=”和有效的 URL 时。

4. 进展

标签代表任务的完成进度。

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

5. 数据列表

HTML 元素包含一组元素，这些元素代表可从其他控件中选择的允许或推荐选项。

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

结论

我认为 HTML 和 CSS 非常强大，只需使用它们就能为一些优秀的网站注入活力。尽管它们在行业中被广泛使用，但许多人并没有深入研究它们。

希望您喜欢阅读我的文章！