没有人谈论的5个html技巧-CSDN博客

无论您选择哪种框架或后端语言，所有 Web 开发人员都必须广泛使用 HTML（超文本标记语言）。

框架和编程语言可能来来去去，但 HTML 会一直存在。但是，尽管使用如此广泛，但仍有大多数开发人员不知道的标签和属性。

虽然有像 Pug 这样的各种模板引擎可用，但您仍然需要很好地掌握 HTML 和 CSS。

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

6 个没有人谈论的 CSS 属性

许多人以前从未听说过的有趣属性。

媒体网

在我看来，最好尽可能使用 HTML 特性，而不是使用 JavaScript 实现相同的功能，尽管我承认编写 HTML 可能会变得重复和无聊。

尽管许多开发人员每天都在使用 HTML，但他们并没有尝试提升自己的游戏水平并真正利用 HTML 的一些鲜为人知的功能。

以下是您应该知道的 5 个 HTML 标签和属性：

1. 延迟加载图片

延迟加载图像有助于提高网站性能和响应能力。

延迟加载可防止立即加载屏幕上不需要的图像。但是，当您向下滚动或靠近图像时，图像开始加载。

换句话说，当用户滚动图像时加载图像，否则图像不会被加载。

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

您所要做的就是将该loading= “lazy”属性添加到您的图像文件中。

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

<span style="background-color:#f2f2f2"><span style="color:#292929"><img src="image.png" loading="lazy" alt="..." width="200" height="200"></span></span>

通过使用Google 的 Lighthouse工具，您可以获得有关使用此技巧节省的字节数的一些见解。

2. 输入建议

当您尝试搜索某些内容时，获得有用且相关的建议真的很有帮助。

输入建议和自动完成现在相当普遍，您一定已经在Google和Facebook等网站上注意到了。

您可以使用JavaScript通过在输入字段上设置事件侦听器，然后将搜索到的术语与预定义的建议进行匹配来添加输入建议。

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

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

<span style="background-color:#f2f2f2"><span style="color:#292929"><label for="country">从列表中选择您的国家：</label> 
<input list="countries" name="country" id="country"> 

<datalist id="countries"> 
  <option value="英国"> 
  <option value="德国"> 
  <option value="美国"> 
  <option value="日本"> 
  <option value="印度"> 
</datalist></span></span>

3. 图片标签

您有没有遇到过图像没有按预期放大的问题？我当然有很多次。

当您尝试构建画廊站点或使用大图像并将其显示为缩略图时，通常会发生这种情况。

当您更改视口宽度时，您可能会注意到某些图像没有按预期放大和缩小。

幸运的是，HTML 为开发人员提供了通过使用<picture>标签轻松解决此问题的机会，该标签允许您添加适合不同宽度的多个图像，而不是将单个图像放大和缩小。

您的代码将如下所示：

<span style="background-color:#f2f2f2"><span style="color:#292929"><图片> 
  <source media="(min-width:768px)" srcset="med_flag.jpg"> 
  <source media="(min-width:495px)" srcset="small_flower.jpg"> 
  <img src=" high_flag.jpg" alt="Flags" style="width:auto;"> 
</picture></span></span>

如您所见，我们指定了必须显示某个图像的最小宽度。

这个标签与<audio>和<video>标签非常相似。

4. 基本网址

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

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

例如，如果我想指定 Elon Musk 和 Bill Gates 的 Twitter 句柄的 URL，URL 的开头（域）将是相同的，但后面的将是他们各自的 ID。

通常，我必须将链接与相同的域名粘贴两次。

但是，HTML 有一个<base>标签，可以让您设置基本 URL，如下所示：

<span style="background-color:#f2f2f2"><span style="color:#292929"><head> 
  <base href="https://www.twitter.com/" target="_blank"> 
</head> 

<body> 
<img src="elonmusk" alt="Elon Musk"> 
<a href= "BillGates">Bill Gate</a> 
</body></span></span>

上面的代码将生成一个重定向到“https://www.twitter.com/elonmusk”的图像和一个重定向到“https://www.twitter.com/billgates”的锚标签。

该<base>标签必须具有的“href”或提供对象的属性。

5. 文件复习

如果您想在一段时间不活动后甚至立即将用户重定向到另一个页面，您可以通过使用纯 HTML 轻松实现。

当您打开某些站点时，您可能已经注意到此功能，并且会弹出“您将在 5 秒内被重定向”的内容。

此行为已烘焙到 HTML 中，您可以通过<meta>标记使用它并在其http-equiv= “refresh”上设置。

<span style="background-color:#f2f2f2"><span style="color:#292929"><meta http-equiv="refresh" content="4; URL='https://google.com' /></span></span>

这里的content属性指定了重定向发生的秒数。

值得注意的是，尽管 Google 声称将这种形式的重定向与其他重定向一样对待，但除非您真的必须这样做，否则使用这种类型的重定向并不明智。

因此，仅在某些情况下使用它，例如在大量不活动后重定向页面。

转自:https://javascript.plainenglish.io/5-html-tricks-nobody-is-talking-about-a0480104fe19