容易被忽略的5个HTML技巧

Myth丶恋晨 2022-11-11 10:55 256阅读 0赞

![c7de9a0322ca90e6b846bfd203e252d8.png][]

作者 | Anurag Kanoria

译者 | 王强

策划 | 李俊辰

对于所有 Web 开发人员来说，无论你选择的是哪种框架或后端语言，都需要大量使用 HTML（超文本标记语言）。

各种框架和编程语言可能会此消彼长，但 HTML 永不会过时。只是，就算 HTML 的应用如此广泛，这种语言中还是有不少多数开发人员都不了解的标签和属性。

而且，尽管市面上有各种模板引擎（例如 Pug）可用，但你仍然需要对 HTML 和 CSS 有所了解。

如果你经常使用 CSS，请查看我最近的博客，了解一些鲜为人知却非常有用的 CSS 属性：

https://medium.com/javascript-in-plain-english/6-css-properties-nobody-is-talking-about-e6cab5138d02

我认为，大家最好尽可能使用 HTML 特性来实现所需的功能，尽量不要动用 JavaScript。当然我也承认，HTML 写起来可能会枯燥无味。

虽然许多开发人员每天都在使用 HTML，但他们并没有试着提升自己的技能水平，没有想过真正用好一些鲜为人知的 HTML 特性。

以下是你应该了解的 5 个 HTML 标签和属性：

1. 延迟加载图像

图像延迟加载可以帮助开发人员提升网站性能和响应速度。

延迟加载可防止设备第一时间加载屏幕上尚不需要的图像。但是，当你向下滚动或靠近图像时，图像就会开始加载。

换句话说，当用户滚动时才加载图像，让图像变为可见，否则就不加载。

这可以通过纯 HTML 轻松实现。

你所要做的就是将 loading= "lazy"属性添加到你的图像文件中。

添加属性后，你的图片元素应如下所示：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

使用谷歌的 Lighthouse 工具，你可以深入了解这一特性可以为你节省的内容加载字节数：

https://developers.google.com/web/tools/lighthouse/

2. 输入建议

尝试搜索什么事物时获取有用的关联建议确实会很有帮助。

如今，输入建议和自动完成功能相当流行，你一定已经在谷歌和 Facebook 等网站上注意到它们了。

你可以使用 JavaScript 添加输入建议，方法是在输入字段上设置一个事件侦听器，然后将搜索的术语与预定义建议进行匹配。

https://www.w3schools.com/howto/howto\_js\_autocomplete.asp

但是，HTML 也允许你使用<datalist>标签显示一组预定义的建议。

请记住，此标签的 ID 属性必须与输入字段列表属性相同。

<label for="country">Choose your country from the list:</label>
    <input list="countries" name="country" id="country">
    <datalist id="countries">
    <option value="UK">
    <option value="Germany">
    <option value="USA">
    <option value="Japan">
    <option value="India">
    </datalist>

3. 图片标签

你是否遇到过图像无法按预期缩放的问题？我当然就遇到过很多次。

当你试图构建一个图像展示网站，或使用一个大尺寸图像并将其显示为缩略图时，往往就会发生这种情况。

更改视口宽度时，你可能会注意到某些图像未按预期缩放。

幸运的是，HTML 的<picture>标签使开发人员可以很轻松地解决这一问题，这个标签让你可以添加适合不同宽度的多个图像，而不必只对一张图上下缩放。

你的代码将如下所示：

如你所见，我们指定了特定图像必须显示的一个最小宽度。此标签与<audio>和<video>标签非常相似。

4. Base URL

创建网站索引或站点地图时，这是我最喜欢的标签之一。

当你有很多锚标签重定向到某个 URL，并且所有 URL 都以相同的基础地址开头时，这个标签就会派上用场。

例如，如果我要指定 Elon Musk 和 Bill Gates 的 Twitter 内容的 URL，则 URL（域）的开头都会相同，而其后将是他们各自的 ID。

一般来说，我必须将链接与相同的域名一起粘贴两次。