本红领巾来了，今天分享下几个HTML开发小技巧，希望能对你有些帮助。\
-
延迟/懒加载
定义：一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略；
场景：页面中大量图片显示（滚动到可见的区域再进行加载）登陆一个电子商务网站的主页时，该网站有一个指向购物车页面/部分的链接，并且在用户导航时下载其所有源；
好处：提升了站点性能,缩短页面加载时间；通常做法是Js进行处理，也可以通过Html自带标签属性loading="lazy"处理：
<img src="image.jpg" loading="lazy"> <iframe src="video-player.html" loading="lazy"></iframe>
2. ### 图片加载失败时显示默认图片
<img src="image.jpg" onerror='this.src="default.jpg"'/>
注意：小心默认图片也加载不出的情况下不断触发error方法，页面不停闪烁；（实际是死循环）；
解决办法：定义全局变量 num，监听error事件每触发一次error num++，当num大于某一值的时候error赋值null；
-
输入框显示输入提示
场景：当用户在进行输入搜索功能时，给出有效的提示，提升用户体验；
<label>选择浏览器: <input list="browsers" name="myBrowser" /></label><datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"></datalist>
4. ### Picture标签
场景：为不同的显示/设备场景提供图像版本,针对不同条件裁剪或修改图像；浏览器会选择最匹配的子 元素，如果没有匹配的，就选择 元素的 src 属性中的URL。然后，所选图像呈现在
元素占据的空间中遇到所有浏览器都不支持的特定格式时，提供不同的图像格式；
<picture> <source srcset="image.jpg" media="(min-width: 800px)"> <img src="default.jpg" alt="" /></picture>
今天的分享到此结束了！喜欢就点个赞.
