溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“不常提及的HTML技巧有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“不常提及的HTML技巧有哪些”這篇文章吧。
圖片懶加載可以幫助提升網(wǎng)站的性能和響應(yīng)能力。圖片懶加載可以避免立即加載那些不在屏幕中立即顯示的圖片素材，當(dāng)用戶滾動臨近圖片時再去開始加載。
換言之，當(dāng)用戶滾動到圖片出現(xiàn)時再進(jìn)行加載，否則不加載。這就降低了屏幕內(nèi)容展示過程中的圖片素材的請求數(shù)量，提升了站點(diǎn)性能。
往往我們都是通過javascript來實(shí)現(xiàn)的，通過監(jiān)聽頁面滾動事件來確定加載對應(yīng)的資源。但是，在不完全考慮兼容性的場景下，我們其實(shí)可以直接通過HTML來直接實(shí)現(xiàn)。
注：本篇的提到的標(biāo)簽和屬性的兼容性需要大家根據(jù)實(shí)際場景來選取是否使用
可以通過為圖片文件添加 loading="lazy" 的屬性來實(shí)現(xiàn):
<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />
當(dāng)用戶在進(jìn)行輸入搜索功能時，如果能夠給出有效的提示，這會大大提升用戶體驗(yàn)。輸入建議和自動完成功能現(xiàn)在到處可見，我們可以使用Javascript添加輸入建議，方法是在輸入框上設(shè)置事件偵聽器，然后將搜索到的關(guān)鍵詞與預(yù)定義的建議相匹配。
其實(shí)，HTML也是能夠讓我們來實(shí)現(xiàn)預(yù)定義輸入建議功能的，通過 <datalist> 標(biāo)簽來實(shí)現(xiàn)。需要注意的是，使用時這個標(biāo)簽的id屬性需要和input元素的list屬性一致。
<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>
你是否遇到過在不同場景或者不同尺寸的設(shè)備上面的時候，圖片展示適配問題呢？我想大家都遇到過。
針對只有一個尺寸的圖片素材的時候，我們往往可以通過CSS的 object-fit 屬性來進(jìn)行裁切適配。但是有些時候需要針對不同的分辨率來顯示不同尺寸的圖片的場景的時候，我們是否可以直接通過HTML來實(shí)現(xiàn)呢？
HTML提供了 <picture> 標(biāo)簽，允許我們來添加多張圖片資源，并且根據(jù)不同的分辨率需求來展示不同的圖片。
<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>
我們可以定義不同區(qū)間的最小分辨率來確定圖片素材，這個標(biāo)簽的使用有些類似 <audio> 和 <video> 標(biāo)簽。
當(dāng)我們的頁面有大量的錨點(diǎn)跳轉(zhuǎn)或者靜態(tài)資源加載時，并且這些跳轉(zhuǎn)或者資源都在統(tǒng)一的域名的場景時，我們可以通過 <base> 標(biāo)簽來簡化這個處理。
例如，我們有一個列表需要跳轉(zhuǎn)到微博的不同大V的主頁，我們就可以通過設(shè)置 <base> 來簡化跳轉(zhuǎn)路徑
<head> <base href="https://www.weibo.com/" target="_blank"> </head> <body> <a href="jackiechan">成龍</a> <a href="kukoujialing">賈玲</a> </body>
<base> 標(biāo)記必須具有 href 和 target 屬性。
當(dāng)我們希望實(shí)現(xiàn)一段時間后或者是立即重定向到另一個頁面的功能時，我們可以直接通過HTML來實(shí)現(xiàn)。
我們經(jīng)常會遇到有些站點(diǎn)會有這樣一個功能，“5s后頁面將跳轉(zhuǎn)”。這個交互可以嵌入到HTML中，直接通過 <meta> 標(biāo)簽，設(shè)置 http-equiv="refresh" 來實(shí)現(xiàn)
<meta http-equiv="refresh" content="4; URL='https://google.com' />
這里 content 屬性指定了重定向發(fā)生的秒數(shù)。值得一提的是，盡管谷歌聲稱這種形式的重定向和其他的重定向方式一樣可用，但是使用這種類型的重定向其實(shí)并不是那么的優(yōu)雅，往往會顯得很突兀。
因此，最好在某些特殊的情況下使用它，比如在長時間用戶不活動之后再重定向到目標(biāo)頁面。
以上是“不常提及的HTML技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
