前端人不加班全靠它（web前端开发html初学者案例）

HTML 是用来描述网页的一种语言。对于所有的前端开发者来说无论你选择的是哪种框架或后端语言，HTML都是必不可少的。

随着时代和科技的发展，各种框架和编程语言此消彼长，但 HTML 永不会过时。所以，掌握并且熟练运用HTML是非常重要的，作为前端学习时比较靠前的一部分，很多人觉得相比起JS，HTML和CSS都是相对简单的，但是当你真正了解并且在工作中大量实践后，你就会发现，其实想要完全掌握HTML也是非常很难的。

下面小编为大家整理了一些在工作非常实用的HTML 小技巧，不仅能够让你在运用HTML时更加得心应手，也能大大提升你的工作效率，感兴趣的朋友一起来看一下吧~

一、延迟/懒加载

页面中大量图片显示（滚动到可见的区域再进行加载）登陆一个电子商务网站的主页时，该网站有一个指向购物车页面/部分的链接，并且在用户导航时下载其所有源，可以提升了站点性能,缩短页面加载时间。想要实现延迟/懒处理只需要添加 loading= "lazy"属性即可。

• <img src="image.jpg" loading="lazy">
• <iframe src="video-player.html" loading="lazy"></iframe>

这个同样可以运用于延迟加载图像：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

二、HTML鼠标的四个状态

1)cursor:default 默认的箭头模式2)cursor：pointer 变为小手样式3)cursor:text 变为可编辑的文本样式4)cursor:move 此光标指示某对象可被移动。5)cursor：not-allowed 禁止图标

三、取消表单轮廓

新建表单的时候，在输入信息的时候总会有个蓝色的轮廓，可以通过设置outline的值为none来消除。具体操作如下：

• <style>
• input }
• outline: none;
• }
• </style>

四、图片加载失败时显示默认图片

<img src="image.jpg" onerror='this.src="default.jpg"'/>

五、输入框显示输入提示

这项功能能在用户进行输入搜索时，给出有效的提示，提升用户体验；

• <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>

六、Picture标签

为不同的显示/设备场景提供图像版本,针对不同条件裁剪或修改图像；浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中遇到所有浏览器都不支持的特定格式时，提供不同的图像格式；

• <picture>
• <source srcset="image.jpg" media="(min-width: 800px)">
• <img src="default.jpg" alt="" />
• </picture>

七、HTML图片后方文字居中

只需要将图片设置属性vertical-align: middle，即可实现。

用好上面这些HTML小技巧，能够帮你在工作中提升工作效率，也能让你的工作更加轻松。除了上面整理的这些技巧外，HTML还有很多的技巧和窍门，需要前端人在日常的学习和工作中去思考和发现，只要不断地总结与实践才能够让你的技术更近一步，也能让你比别人更有前途。