六星云課堂：25個構(gòu)建Web項目的HTML建議，你需要了解一下！
html 超文本標(biāo)記語言是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。html是一種基礎(chǔ)技術(shù)，常與css、JavaScript一起被眾多網(wǎng)站用于設(shè)計網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。
HTML是WEB應(yīng)用程序的骨架，盡管非常容易上手，但仍有很多需要注意的規(guī)則，可能因為沒有遵循這些規(guī)則導(dǎo)致WEB應(yīng)用程序的實踐受到影響，現(xiàn)在對于項目開發(fā)，很多規(guī)則是可以通過程序來自動完成，對于初學(xué)者還是有必要了解一下。
1、避免內(nèi)聯(lián)樣式
雖然現(xiàn)代瀏覽器或其他輔助設(shè)備可能能夠有效處理內(nèi)聯(lián)屬性和標(biāo)簽，但一些較舊的設(shè)備不能，這可能會導(dǎo)致一些奇怪的網(wǎng)頁顯示。額外的字符和文字會影響搜索引擎收錄網(wǎng)頁的內(nèi)容，同時內(nèi)聯(lián)樣式也會帶來維護(hù)上的不方便。內(nèi)聯(lián)樣式的使用的唯一場合就是動態(tài)更改樣式，比如從 JavaScript 端完成的一些樣式操作，而不是作為一種設(shè)置 HTML 樣式的方式。
2、優(yōu)先添加關(guān)鍵樣式
如果將網(wǎng)站的所有樣式都放在一個文件中，則可能需要很長時間來獲取和解析，這會延遲網(wǎng)站呈現(xiàn)。最佳的實踐方式是將站點(diǎn)的主要和基本樣式包含在頭部的樣式標(biāo)簽中，或者首先加載一個較小的樣式表，只加載第一次渲染所需的樣式，然后次要樣式文件增加 deferred 屬性。次要樣式可以是用于用戶交互的樣式，例如彈出圖層、下拉列表和通知組件等，或者是用戶需要滾動到頁面下方的內(nèi)容。
3、延遲加載圖片
有些瀏覽器只會在視圖中加載圖片，如果有一個100張圖片的頁面，只會加載視圖內(nèi)的圖片，當(dāng)用戶滾動時，其他的圖片也會相應(yīng)地加載。最佳的實踐方式是用lazy值指定加載屬性。如果想在所有瀏覽器中使用這個特性，可以使用 polyfill。
4、避免過多的 HTML
過多的HTML并不好，采用允許加載足夠的HTML進(jìn)行初始呈現(xiàn)的策略，其余內(nèi)容放在不同的頁面上，或者稍后通過Javascript的滾動或點(diǎn)擊按鈕來獲取。因為太多的HTML意味著更長的解析時間，而且通常是不必要的。
5、停止支持低版本 IE
在WEB項目開發(fā)中，各種兼容性問題的支持，特別的低版本IE的支持簡直是地獄級的體驗，在這里倡議大家停止兼容低版本IE，除非是必須，否則就引導(dǎo)用戶去升級瀏覽器，好消息是微軟將在 2021 年年中停止對 IE11 的支持。
6、為圖片增加適配
圖片標(biāo)簽允許為不同的窗口大小指定多個資源，這可以更快地加載適當(dāng)?shù)膱D像，并為適當(dāng)?shù)囊晥D大小使用不同的圖像。這可以更快地為移動設(shè)備加載較小尺寸的圖像，為桌面加載更大的圖像。
7、為媒體指定多個備份源
對于視頻和音頻，總是設(shè)置多個 sources 。
8、始終為視頻指定預(yù)加載選項
可以使用 preload 屬性在頁面上延遲加載視頻，最佳做法是始終包含此屬性，因為不同的瀏覽器具有不同的默認(rèn)值，preload="none" 將阻止瀏覽器立即加載視頻并同時 poster 設(shè)置的圖片。
9、始終指定按鈕類型
簡單的規(guī)則，始終指定按鈕的類型。如果不指定按鈕將使用默認(rèn)為 submit 類型，這可能并不是你想要的行為。通常情況下，總是指定按鈕類型，即使它是默認(rèn)值。
10、視頻有時比 gif 更好
通常需要展示動畫內(nèi)容時候，首先想到的是 gif 而不是視頻，認(rèn)為 gif 可以更小視頻更大。但根據(jù)視頻不同的格式，視頻并不一定比 gif 文件大，這時視頻可能是更好的選擇，因此，在做出決定之前，請先比較視頻和 gif。
11、避免書寫 Javascript
很多SDK都會將其腳本代碼加入到站點(diǎn)的 <head> 標(biāo)簽中，但其實可以把這些代碼統(tǒng)一放在外部腳本文件中，通過外部加載，并控制它的加載方式。
一般來說，應(yīng)該避免 Javascript 代碼與 HTML 混合。
12、script標(biāo)簽放在頁面底部
對于不支持某些優(yōu)化屬性（如defer 、 async ）的瀏覽器，此規(guī)則就不可避免。一般來說，如果 HTML 和 css 不是異步或延遲的，最好將腳本標(biāo)簽放在最后，以保證瀏覽器在完成解析和呈現(xiàn) HTML 和 CSS 時不會被阻塞。
因為script標(biāo)簽會阻塞HTML的解析.
13、減少外部鏈接的數(shù)量
始終嘗試將外部樣式表和腳本文件合并到一個壓縮的文件中， 并設(shè)置 dns-prefetch 、preload/prefetch、defer、async 屬性，告訴瀏覽器如何處理它們。
dns-prefetch ：用于預(yù)解析CDN的地址的DNS
prefetch：利用瀏覽器空閑時間，預(yù)加載用戶可能會用的資源（圖片、視頻、js、css）緩存到 disk ，如有頁面需要就從disk中讀取
preload：可以對當(dāng)前頁面所需的腳本、樣式等資源進(jìn)行預(yù)加載，將其放在內(nèi)存中，而無需等到解析到 script 和 link 標(biāo)簽時才進(jìn)行加載。
這一機(jī)制使得資源可以更早的得到加載并可用，更不易阻塞頁面的初步渲染。
defer：所有元素解析完成后，DOMContentLoaded 事件觸發(fā)之前。
async：當(dāng)前Javascript腳本加載完成后（加載后立即執(zhí)行，執(zhí)行順序不固定，適合獨(dú)立無依賴的代碼）
14、始終添加圖片 alt
如果圖像加載失敗，alt 標(biāo)簽會顯示替代文本，提供了圖像的額外上下文，這對 seo 很友好。
15、 一個 h1 標(biāo)簽
建議一個 HTML 頁面一個 h1 標(biāo)簽，如果是網(wǎng)站 logo ，可以將 logo 包含在 h1 標(biāo)簽中。當(dāng)然如果使用多個 h1 標(biāo)簽也是沒有問題的。
16、字體預(yù)加載
如果頁面存在字體文件，建議在 <head></head> 標(biāo)簽中使用 prefetch/preload 屬性進(jìn)行與加載。
17、定義響應(yīng)式meta
應(yīng)該始終確保網(wǎng)站具有響應(yīng)性屬性，這樣不管用戶使用什么設(shè)備都可以流暢清晰的瀏覽網(wǎng)站內(nèi)容。
18、始終指定 DOCTYPE
在 DOCTYPE 中包含 HTML 屬性將確保瀏覽器正確呈現(xiàn)內(nèi)容。
19、頁面語言
通過指定網(wǎng)站的語言將有助于屏幕閱讀器選擇正確的語言來渲染，瀏覽器還可以使用它來確定是否應(yīng)該自動翻譯網(wǎng)站，lang 屬性應(yīng)該描述網(wǎng)站大部分內(nèi)容使用的語言。
20、 正確使用 data-*
標(biāo)簽 data 屬性是大部份框架或者插件喜歡傳遞數(shù)據(jù)的方式，但是不要使用 data 屬性來傳遞敏感數(shù)據(jù)，其他屬性可能更適合。
21、 使用 time 標(biāo)簽
一個重要的時間使用 time 標(biāo)簽來展示，這樣可以方便用戶輕松點(diǎn)擊以添加到日歷中。
22、 添加 favicon
瀏覽器會自動為獲取網(wǎng)頁圖標(biāo)，甚至不需要為 favicon 指定鏈接，只需將其放在網(wǎng)站的根目錄中即可。無論您做什么，始終明確為網(wǎng)站包含各種大小和目標(biāo)的網(wǎng)站圖標(biāo)，并為不同的設(shè)備、瀏覽器設(shè)置不同的圖標(biāo)，可以使用在線工具制作不同尺寸。
23、有效的DOM標(biāo)簽
現(xiàn)代瀏覽器會盡力成對匹配標(biāo)簽，但它可能并不正確。因此建議所有 HTML 標(biāo)簽小寫、關(guān)閉標(biāo)簽（可以借助開發(fā)工具自動完成）。
24、正確使用title
為頁面使用一個<title></title>標(biāo)簽，標(biāo)題顯示與瀏覽器選項卡中，并且當(dāng)分享網(wǎng)址的時候能夠清晰的獲取標(biāo)題。
25、轉(zhuǎn)義特殊字符
HTML 有一些特殊字符《HTML特殊符號對照表》，在使用的時候一定要進(jìn)行轉(zhuǎn)義，如果不這樣做，可能會破壞頁面的呈現(xiàn)。
總結(jié)
以上建議都是通用規(guī)則，制定大而全的HTML規(guī)則，對于團(tuán)隊項目開發(fā)是有很大的意義。想學(xué)習(xí)更多web技巧，歡迎持續(xù)關(guān)注六星云課堂！
