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還有很多的技巧和竅門，需要前端人在日常的學習和工作中去思考和發現，隻要不斷地總結與實踐才能夠讓你的技術更近一步，也能讓你比别人更有前途。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!