HTML标记和属性【必须知道的HTML标记和属性】

您的位置：制图网首页 -> 新闻动态 -> HTML标记和属性【必须知道的HTML标记和属性】

HTML标记和属性【必须知道的HTML标记和属性】

2023/1/30 来自于：制图网点击：42

据谷歌统计，全球有700多种编程语言，是不是听上去很耸人听闻？！现今，各种框架和各种编程语言一直是你方唱罢我登场，来来往往。

而对于HTML，不管你习惯与否，它始终在那。无论选择哪种框架或后端语言，所有Web开发人员都必须躲不开使用HTML。个人认为，即使是实现相同的功能，最好还是使用HTML编写，而非JS，尽管我也承认编写HTML可能显得比较“重体力”，而且很无聊。

HTML有如此广泛的用途和“坚强的生命力”，仍有开发人员所不太知晓的标签和属性。以下是您应该了解的5个HTML标记和属性：

1 . 懒加载图片

懒加载避免加载浏览器上那些不需要去即可加载的图像，而是当向下滑动页面或接近图像时，图像才开始加载。

换句话说，当用户下滑页面时加载图像，呈现他们，否则不做加载。懒加载图像可以帮助提高网站性能和响应速度。

这可以通过HTML轻松实现，所要做的就是将loading= “lazy”属性添加到图像文件中。

添加属性后，我们的图片元素会是这样：

通过使用Google的Lighthouse工具，你可以get到相关的一些技巧。

相关地址：https://developers.google.com/web/tools/lighthouse/

2 . 输入推荐

用户在做搜索录入时，如果能够拿到相关的输入内容推荐，应该会提升使用体验。

如今，输入补全推荐功能是相当普遍的，你可以在天猫、头条、抖音等太多平台见到。你可以通过JS添加输入补全推荐，方法是在输入字段上设置事件侦听，这样能够把搜索到的词条与预定义推荐进行匹配。

但是，通过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 . 图片标签

你是否曾经遇到图像无法按预期缩放的情况？我是遇到过的，譬如当我要使用大图，同时把它显示为缩略图时，很可能会发生这种情况。

更改viewport width时，你会注意到某些图像未按预期缩放。幸运的是，HTML通过使用<picture>标记使开发人员很容易地解决这个问题，该标记允许你添加适合不同宽度的多个图像，而不必单个缩放。

如下所示：

如你看到的，我们指定了必须显示特定图像的最小宽度。

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

4 . base URL

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

如果我们有很多锚标签重定向到某个URL，并且所有URL都以相同的base address开头时，这个标签应该非常有用。

例如，如果我要指定zhang san和wang er的微博handles的URL，则URL的开头会相同，而其后是它们各自的ID。通常，我必须将链接与相同的域名一起粘贴两次。

不过，HTML有一个<base> tag，这使我可以设置基本URL的标记，如下所示：

上面的代码将生成一个图像重定向到“ https://www.weibo.com/zhangsan”和一个锚标记重定向到“ https://www.weibo.com/wanger”。