5個不常說起的HTML技巧

時間 2021-02-21

標籤 javascript html java 後端框架 ide 性能學習網站欄目 HTML 简体版

原文原文鏈接

2021年你須要知道的HTML標籤和屬性

Web開發人員都在普遍的使用HTML。不管你使用什麼框架或者選擇哪一個後端語言，框架在變，可是HTML始終如一。儘管被普遍使用，但仍是有一些標籤或者屬性是大部分開發者不熟知的。雖然如今有不少的模版引擎供咱們使用，可是咱們仍是須要儘量的熟練掌握HTML內容，就像CSS同樣。javascript

在我看來，最好儘量使用HTML特性來實現咱們的功能，而不是使用JavaScript實現相同的功能，儘管我認可編寫HTML可能會是重複的和無聊的。html

儘管許多開發人員天天都在使用HTML，但他們並無嘗試改進本身的項目，也沒有真正利用HTML的一些不爲人知的特性。java

下面這5個經過HTML標籤/屬性實現的功能我以爲須要瞭解一下：後端

圖片懶加載

圖片懶加載能夠幫助提高網站的性能和響應能力。圖片懶加載能夠避免當即加載那些不在屏幕中當即顯示的圖片素材，當用戶滾動臨近圖片時再去開始加載。框架

換言之，當用戶滾動到圖片出現時再進行加載，不然不加載。這就下降了屏幕內容展現過程當中的圖片素材的請求數量，提高了站點性能。ide

每每咱們都是經過javascript來實現的，經過監聽頁面滾動事件來肯定加載對應的資源。可是，在不徹底考慮兼容性的場景下，咱們其實能夠直接經過HTML來直接實現。性能

注：本篇的提到的標籤和屬性的兼容性須要你們根據實際場景來選取是否使用

能夠經過爲圖片文件添加loading="lazy"的屬性來實現:學習

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

輸入提示

當用戶在進行輸入搜索功能時，若是可以給出有效的提示，這會大大提高用戶體驗。輸入建議和自動完成功能如今處處可見，咱們可使用Javascript添加輸入建議，方法是在輸入框上設置事件偵聽器，而後將搜索到的關鍵詞與預約義的建議相匹配。網站

其實，HTML也是可以讓咱們來實現預約義輸入建議功能的，經過<datalist>標籤來實現。須要注意的是，使用時這個標籤的id屬性須要和input元素的list屬性一致。ui

<label for="country">請選擇喜歡的國家:</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">
  <option value=「China」>
</datalist>

Picture標籤

你是否遇到過在不一樣場景或者不一樣尺寸的設備上面的時候，圖片展現適配問題呢？我想你們都遇到過。

針對只有一個尺寸的圖片素材的時候，咱們每每能夠經過CSS的object-fit屬性來進行裁切適配。可是有些時候須要針對不一樣的分辨率來顯示不一樣尺寸的圖片的場景的時候，咱們是否能夠直接經過HTML來實現呢？

HTML提供了<picture>標籤，容許咱們來添加多張圖片資源，而且根據不一樣的分辨率需求來展現不一樣的圖片。

<picture>
  <source media="(min-width:768px)" srcset="med_flower.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flower" style="width: auto;" />
</picture>

咱們能夠定義不一樣區間的最小分辨率來肯定圖片素材，這個標籤的使用有些相似<audio>和<video>標籤。

Base URL

當咱們的頁面有大量的錨點跳轉或者靜態資源加載時，而且這些跳轉或者資源都在統一的域名的場景時，咱們能夠經過<base>標籤來簡化這個處理。
例如，咱們有一個列表須要跳轉到微博的不一樣大V的主頁，咱們就能夠經過設置<base>來簡化跳轉路徑

<head>
  <base href="https://www.weibo.com/" target="_blank">  
</head>
<body>
  <a href="jackiechan">成龍</a>
  <a href="kukoujialing">賈玲</a>
</body>

<base>標記必須具備href和target屬性。

頁面重定向（刷新）

當咱們但願實現一段時間後或者是當即重定向到另外一個頁面的功能時，咱們能夠直接經過HTML來實現。

咱們常常會遇到有些站點會有這樣一個功能，「5s後頁面將跳轉」。這個交互能夠嵌入到HTML中，直接經過<meta>標籤，設置http-equiv="refresh"來實現

<meta http-equiv="refresh" content="4; URL='https://google.com' />

這裏content屬性指定了重定向發生的秒數。值得一提的是，儘管谷歌聲稱這種形式的重定向和其餘的重定向方式同樣可用，可是使用這種類型的重定向其實並非那麼的優雅，每每會顯得很突兀。
所以，最好在某些特殊的狀況下使用它，好比在長時間用戶不活動以後再重定向到目標頁面。

後記

HTML和CSS是很是強大的，哪怕咱們僅僅使用這兩種技術也能建立出一些奇妙的網站。雖然它們的使用量很大很廣泛，仍是有不少的開發者並無真正的深刻了解他們，還有不少的內容須要咱們深刻的去學習和理解，實踐，有不少的技巧等待着咱們去發現。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。