HTML

1. 延迟加载图像

图像延迟加载可以帮助开发人员提升网站性能和响应速度。
延迟加载可防止设备第一时间加载屏幕上尚不需要的图像。但是，当向下滚动或靠近图像时，图像就会开始加载。
换句话说，当用户滚动时才加载图像，让图像变为可见，否则就不加载。
这可以通过纯 HTML 轻松实现。
要做的就是将 loading= "lazy"属性添加到图像文件中。
添加属性后，图片元素应如下所示：

  1. <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 属性必须与输入字段列表属性相同。

  1. <label for="country">Choose your country from the list:</label>
  2. <input list="countries" name="country" id="country">
  3. <datalist id="countries">
  4.   <option value="UK">
  5.   <option value="Germany">
  6.   <option value="USA">
  7.   <option value="Japan">
  8.   <option value="India">
  9. </datalist>

3. 图片标签

是否遇到过图像无法按预期缩放的问题？
当试图构建一个图像展示网站，或使用一个大尺寸图像并将其显示为缩略图时，往往就会发生这种情况。
更改视口宽度时，可能会注意到某些图像未按预期缩放。
幸运的是，HTML 的<picture>标签使开发人员可以很轻松地解决这一问题，这个标签让可以添加适合不同宽度的多个图像，而不必只对一张图上下缩放。
代码将如下所示：

  1. <picture>
  2.   <source media="(min-width:768px)" srcset="med_flag.jpg">
  3.   <source media="(min-width:495px)" srcset="small_flower.jpg">
  4.   <img src="high_flag.jpg" alt="Flags" style="width:auto;">
  5. </picture>

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

4. Base URL

创建网站索引或站点地图时，有很多锚标签重定向到某个 URL，并且所有 URL 都以相同的基础地址开头时，这个标签就会派上用场。
例如，如果要指定 Elon Musk 和 Bill Gates 的 Twitter 内容的 URL，则 URL（域）的开头都会相同，而其后将是他们各自的 ID。一般来说，必须将链接与相同的域名一起粘贴两次。
但是，HTML 有一个<base>标签，可用于设置基础 URL，如下所示：

  1. <head>
  2.   <base href="https://www.twitter.com/" target="_blank">
  3. </head>
  4. <body>
  5.   <img src="elonmusk" alt="Elon Musk">
  6.   <a href="BillGates">Bill Gate</a>
  7. </body>

上面的代码将生成一个图像重定向到“https://www.twitter.com/elonmusk”和一个锚标记重定向到“https://www.twitter.com/billgates”。<base>标签必须具有“href”或一个目标属性。

5. 文档刷新

如果要在页面一段时间不活动时，或者第一时间将用户重定向到另一个页面，只需使用纯 HTML 即可轻松实现。
当打开某些站点时，可能已经注意到了此特性，看到“你将在 5 秒钟内被重定向”这一行文字。
此行为已添加到 HTML 中，可以使用<meta>标签，在其上设置 http-equiv= "refresh"来启用它。

  1. <meta http-equiv="refresh" content="4; URL='https://google.com' />

这里的 content 属性指定了重定向倒计时的秒数。值得注意的是，尽管谷歌声称将这种形式的重定向与其他重定向一样对待，但除非确实需要，否则使用这种类型的重定向是不明智的。
因此应该只在某些情况下才使用它，例如在长时间不活动后重定向页面。