構(gòu)建WEB項目的 25 個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)。最佳的實踐方式是將站點的主要和基本樣式包含在頭部的樣式標(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的滾動或點擊按鈕來獲取。因為太多的HTML意味著更長的解析時間，而且通常是不必要的。
5. 停止支持低版本 IE
在WEB項目開發(fā)中，各種兼容性問題的支持，特別的低版本IE的支持簡直是地獄級的體驗，在這里倡議大家停止兼容低版本IE，除非是必須，否則就引導(dǎo)用戶去升級瀏覽器，好消息是微軟將在 2021 年年中停止對 IE11 的支持。
6. 為圖片增加適配
圖片標(biāo)簽允許為不同的窗口大小指定多個資源，這可以更快地加載適當(dāng)?shù)膱D像，并為適當(dāng)?shù)囊晥D大小使用不同的圖像。這可以更快地為移動設(shè)備加載較小尺寸的圖像，為桌面加載更大的圖像。
<picture>
<source srcset="apple-360.jpg" media="(min-width: 800px)">
<img src="apple.jpg" alt=""/>
</picture>
7. 為媒體指定多個備份源
對于視頻和音頻，總是設(shè)置多個 sources 。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>你的瀏覽器不支持HTML5 audio 標(biāo)簽</p>
</audio>
<video controls width="360">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<p>你的瀏覽器不支持HTML5 video 標(biāo)簽</p>
</video>
8. 始終為視頻指定預(yù)加載選項
可以使用 preload 屬性在頁面上延遲加載視頻，最佳做法是始終包含此屬性，因為不同的瀏覽器具有不同的默認(rèn)值，preload="none" 將阻止瀏覽器立即加載視頻并同時 poster 設(shè)置的圖片。
<video controls preload="none" poster="movie.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
</video>
9. 始終指定按鈕類型
簡單的規(guī)則，始終指定按鈕的類型。如果不指定按鈕將使用默認(rèn)為 submit 類型，這可能并不是你想要的行為。通常情況下，總是指定按鈕類型，即使它是默認(rèn)值。
<button type="button">我是開心按鈕</button>
<input type="text"/>
10. 視頻有時比 gif 更好
通常需要展示動畫內(nèi)容時候，首先想到的是 gif 而不是視頻，認(rèn)為 gif 可以更小視頻更大。但根據(jù)視頻不同的格式，視頻并不一定比 gif 文件大，這時視頻可能是更好的選擇，因此，在做出決定之前，請先比較視頻和 gif。
11. 避免書寫 Javascript
很多SDK都會將其腳本代碼加入到站點的 <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的地址的DNSprefetch： 利用瀏覽器空閑時間，預(yù)加載用戶可能會用的資源（圖片、視頻、js、css）緩存到 disk ，如有頁面需要就從disk中讀取preload：可以對當(dāng)前頁面所需的腳本、樣式等資源進(jìn)行預(yù)加載，將其放在內(nèi)存中，而無需等到解析到script和link標(biāo)簽時才進(jìn)行加載。這一機制使得資源可以更早的得到加載并可用，更不易阻塞頁面的初步渲染。defer：所有元素解析完成后，DOMContentLoaded 事件觸發(fā)之前。async：當(dāng)前Javascript腳本加載完成后（加載后立即執(zhí)行，執(zhí)行順序不固定，適合獨立無依賴的代碼）
<link rel="dns-prefetch" href="http://www.46649.cn" />
<link rel="preload" href="./app.css" as="style" />
<link rel="preload" href="./app.js" as="script" />
<link rel="prefetch" href="./app.js" />
<script async />
<script defer/>
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)容。
<meta name="viewport" content="width=device-width, initial-scale=1" />
18. 始終指定 DOCTYPE
在 DOCTYPE 中包含 HTML 屬性將確保瀏覽器正確呈現(xiàn)內(nèi)容。
<!DOCTYPE html>
19. 頁面語言
通過指定網(wǎng)站的語言將有助于屏幕閱讀器選擇正確的語言來渲染，瀏覽器還可以使用它來確定是否應(yīng)該自動翻譯網(wǎng)站，lang 屬性應(yīng)該描述網(wǎng)站大部分內(nèi)容使用的語言。
<html lang="zh">
20. 正確使用 data-*
標(biāo)簽 data 屬性是大部份框架或者插件喜歡傳遞數(shù)據(jù)的方式，但是不要使用 data屬性來傳遞敏感數(shù)據(jù)，其他屬性可能更適合。
21. 使用 time 標(biāo)簽
一個重要的時間使用 time 標(biāo)簽來展示，這樣可以方便用戶輕松點擊以添加到日歷中。
<time datetime="20:00">20:00</time>
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ī)則，對于團隊項目開發(fā)是有很大的意義。