据谷歌统计，全球有700多种编程语言，是不是听上去很耸人听闻？！现今，各种框架和各种编程语言一直是你方唱罢我登场，来来往往。
而对于HTML，不管你习惯与否，它始终在那。无论选择哪种框架或后端语言，所有Web开发人员都必须躲不开使用HTML。个人认为，即使是实现相同的功能，最好还是使用HTML编写，而非JS，尽管我也承认编写HTML可能显得比较“重体力”，而且很无聊。
HTML有如此广泛的用途和“坚强的生命力”，仍有开发人员所不太知晓的标签和属性。以下是您应该了解的5个HTML标记和属性：
1 . 懒加载图片懒加载避免加载浏览器上那些不需要去即可加载的图像，而是当向下滑动页面或接近图像时，图像才开始加载。
换句话说，当用户下滑页面时加载图像，呈现他们，否则不做加载。懒加载图像可以帮助提高网站性能和响应速度。
这可以通过HTML轻松实现，所要做的就是将loading= “lazy”属性添加到图像文件中。
添加属性后，我们的图片元素会是这样：
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
通过使用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>标记使开发人员很容易地解决这个问题，该标记允许你添加适合不同宽度的多个图像，而不必单个缩放。
如下所示：
<picture>
<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>
如你看到的，我们指定了必须显示特定图像的最小宽度。
这个标签和<audio>和<video>标签非常相似。
4 . base URL在创建网站索引或站点地图的时候，这应该算是我最喜欢的标签之一。
如果我们有很多锚标签重定向到某个URL，并且所有URL都以相同的base address开头时，这个标签应该非常有用。
例如，如果我要指定zhang san和wang er的微博handles的URL，则URL的开头会相同，而其后是它们各自的ID。通常，我必须将链接与相同的域名一起粘贴两次。
不过，HTML有一个<base> tag，这使我可以设置基本URL的标记，如下所示：
<head>
<base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<img src="zhangsan" alt="Zhang San">
<a href="wanger">Wang Er</a>
</body>
上面的代码将生成一个图像重定向到“ https://www.weibo.com/zhangsan”和一个锚标记重定向到“ https://www.weibo.com/wanger”。
这个<base> tab应该要么是具有“href”或是所提供对象的属性。
5 . 文档刷新如果要把用户重定向到另一个页面，那么是可以用纯HTML来轻松实现的。
过往你打开某些网站的时，可能注意到了这个功能：弹出“你会在5秒钟内被重定向”。
你是可以通过<meta> tab，并对它进行设置http-equiv= “refresh”从而使用它。
<meta http-equiv="refresh" content="4; URL='https://google.com' />
在此，content属性指定重定向发生的秒数。
HTML加CSS是很强大，我们其实是可以仅使用它们两就构建出像样的网站的，只要你足够沉浸于其中，不断学习。
