構建 WEB 項目的(de) 25 個(gè) HTML 建議
HTML 超文本标記語言是(shì)一(yī / yì ／yí)種用于(yú)創建網頁的(de)标準标記語言。HTML 是(shì)一(yī / yì ／yí)種基礎技術，常與 CSS、JavaScript 一(yī / yì ／yí)起被衆多網站用于(yú)設計網頁、網頁應用程序以(yǐ)及移動應用程序的(de)用戶界面。
HTML 是(shì) WEB 應用程序的(de)骨架，盡管非常容易上(shàng)手，但仍有很多需要(yào / yāo)注意的(de)規則，可能因爲(wéi / wèi)沒有遵循這(zhè)些規則導緻 WEB 應用程序的(de)實踐受到(dào)影響，現在(zài)對于(yú)項目開發，很多規則是(shì)可以(yǐ)通過程序來(lái)自動完成，對于(yú)初學者還是(shì)有必要(yào / yāo)了(le／liǎo)解一(yī / yì ／yí)下。
1. 避免内聯樣式
雖然現代浏覽器或其他(tā)輔助設備可能能夠有效處理内聯屬性和(hé / huò)标簽，但一(yī / yì ／yí)些較舊的(de)設備不(bù)能，這(zhè)可能會導緻一(yī / yì ／yí)些奇怪的(de)網頁顯示。 額外的(de)字符和(hé / huò)文字會影響搜索引擎收錄網頁的(de)内容，同時(shí)内聯樣式也(yě)會帶來(lái)維護上(shàng)的(de)不(bù)方便。内聯樣式的(de)使用的(de)唯一(yī / yì ／yí)場合就(jiù)是(shì)動态更改樣式，比如從 Javascript 端完成的(de)一(yī / yì ／yí)些樣式操作，而(ér)不(bù)是(shì)作爲(wéi / wèi)一(yī / yì ／yí)種設置 HTML 樣式的(de)方式。
2. 優先添加關鍵樣式
如果将網站的(de)所有樣式都放在(zài)一(yī / yì ／yí)個(gè)文件中，則可能需要(yào / yāo)很長時(shí)間來(lái)獲取和(hé / huò)解析，這(zhè)會延遲網站呈現。最佳的(de)實踐方式是(shì)将站點的(de)主要(yào / yāo)和(hé / huò)基本樣式包含在(zài)頭部的(de)樣式标簽中，或者首先加載一(yī / yì ／yí)個(gè)較小的(de)樣式表，隻加載第一(yī / yì ／yí)次渲染所需的(de)樣式，然後次要(yào / yāo)樣式文件增加deferred屬性。
次要(yào / yāo)樣式可以(yǐ)是(shì)用于(yú)用戶交互的(de)樣式，例如彈出(chū)圖層、下拉列表和(hé / huò)通知組件等，或者是(shì)用戶需要(yào / yāo)滾動到(dào)頁面下方的(de)内容。
3. 延遲加載圖片
有些浏覽器隻會在(zài)視圖中加載圖片，如果有一(yī / yì ／yí)個(gè) 100 張圖片的(de)頁面，隻會加載視圖内的(de)圖片，當用戶滾動時(shí)，其他(tā)的(de)圖片也(yě)會相應地(dì / de)加載。最佳的(de)實踐方式是(shì)用lazy值指定加載屬性。如果想在(zài)所有浏覽器中使用這(zhè)個(gè)特性，可以(yǐ)使用polyfill。
4. 避免過多的(de) HTML
過多的(de) HTML 并不(bù)好，采用允許加載足夠的(de) HTML 進行初始呈現的(de)策略，其餘内容放在(zài)不(bù)同的(de)頁面上(shàng)，或者稍後通過 Javascript 的(de)滾動或點擊按鈕來(lái)獲取。因爲(wéi / wèi)太多的(de) HTML 意味着更長的(de)解析時(shí)間，而(ér)且通常是(shì)不(bù)必要(yào / yāo)的(de)。
5. 停止支持低版本 IE
在(zài) WEB 項目開發中，各種兼容性問題的(de)支持，特别的(de)低版本 IE 的(de)支持簡直是(shì)地(dì / de)獄級的(de)體驗，在(zài)這(zhè)裏倡議大(dà)家停止兼容低版本 IE，除非是(shì)必須，否則就(jiù)引導用戶去升級浏覽器，好消息是(shì)微軟将在(zài) 2021 年年中停止對 IE11 的(de)支持。
6. 爲(wéi / wèi)圖片增加适配
圖片标簽允許爲(wéi / wèi)不(bù)同的(de)窗口大(dà)小指定多個(gè)資源，這(zhè)可以(yǐ)更快地(dì / de)加載适當的(de)圖像，并爲(wéi / wèi)适當的(de)視圖大(dà)小使用不(bù)同的(de)圖像。這(zhè)可以(yǐ)更快地(dì / de)爲(wéi / wèi)移動設備加載較小尺寸的(de)圖像，爲(wéi / wèi)桌面加載更大(dà)的(de)圖像。
<picture> <source srcset="apple-360.jpg" media="(min-width: 800px)"> <img src="apple.jpg" alt=""/> </picture>
7. 爲(wéi / wèi)媒體指定多個(gè)備份源
對于(yú)視頻和(hé / huò)音頻，總是(shì)設置多個(gè)sources。
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <p>你的(de)浏覽器不(bù)支持HTML5 audio 标簽</p> </audio> <video controls width="360"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> <p>你的(de)浏覽器不(bù)支持HTML5 video 标簽</p> </video>
8. 始終爲(wéi / wèi)視頻指定預加載選項
可以(yǐ)使用preload屬性在(zài)頁面上(shàng)延遲加載視頻，最佳做法是(shì)始終包含此屬性，因爲(wéi / wèi)不(bù)同的(de)浏覽器具有不(bù)同的(de)默認值，preload="none"将阻止浏覽器立即加載視頻并同時(shí)poster設置的(de)圖片。
<video controls preload="none" poster="movie.jpg"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> </video>
9. 始終指定按鈕類型
簡單的(de)規則，始終指定按鈕的(de)類型。如果不(bù)指定按鈕将使用默認爲(wéi / wèi)submit類型，這(zhè)可能并不(bù)是(shì)你想要(yào / yāo)的(de)行爲(wéi / wèi)。通常情況下，總是(shì)指定按鈕類型，即使它是(shì)默認值。
<button type="button">我是(shì)開心按鈕</button> <input type="text"/>
10. 視頻有時(shí)比 gif 更好
通常需要(yào / yāo)展示動畫内容時(shí)候，首先想到(dào)的(de)是(shì)gif而(ér)不(bù)是(shì)視頻，認爲(wéi / wèi)gif可以(yǐ)更小視頻更大(dà)。但根據視頻不(bù)同的(de)格式，視頻并不(bù)一(yī / yì ／yí)定比gif文件大(dà)，這(zhè)時(shí)視頻可能是(shì)更好的(de)選擇，因此，在(zài)做出(chū)決定之(zhī)前，請先比較視頻和(hé / huò)gif。
11. 避免書寫 Javascript
很多 SDK 都會将其腳本代碼加入到(dào)站點的(de)<head>标簽中，但其實可以(yǐ)把這(zhè)些代碼統一(yī / yì ／yí)放在(zài)外部腳本文件中，通過外部加載，并控制它的(de)加載方式。一(yī / yì ／yí)般來(lái)說(shuō)，應該避免 Javascript 代碼與 HTML 混合。
12. script 标簽放在(zài)頁面底部
對于(yú)不(bù)支持某些優化屬性（如defer、async）的(de)浏覽器，此規則就(jiù)不(bù)可避免。一(yī / yì ／yí)般來(lái)說(shuō)，如果 HTML 和(hé / huò) CSS 不(bù)是(shì)異步或延遲的(de)，最好将腳本标簽放在(zài)最後，以(yǐ)保證浏覽器在(zài)完成解析和(hé / huò)呈現HTML和(hé / huò)CSS時(shí)不(bù)會被阻塞。因爲(wéi / wèi)script标簽會阻塞 HTML 的(de)解析.
13.減少外部鏈接的(de)數量
始終嘗試将外部樣式表和(hé / huò)腳本文件合并到(dào)一(yī / yì ／yí)個(gè)壓縮的(de)文件中， 并設置dns-prefetch、preload/prefetch、defer、async屬性，告訴浏覽器如何處理它們。
dns-prefetch： 用于(yú)預解析 CDN 的(de)地(dì / de)址的(de) DNSprefetch： 利用浏覽器空閑時(shí)間，預加載用戶可能會用的(de)資源（圖片、視頻、js、css）緩存到(dào) disk ，如有頁面需要(yào / yāo)就(jiù)從disk中讀取preload：可以(yǐ)對當前頁面所需的(de)腳本、樣式等資源進行預加載，将其放在(zài)内存中，而(ér)無需等到(dào)解析到(dào)script和(hé / huò)link标簽時(shí)才進行加載。這(zhè)一(yī / yì ／yí)機制使得資源可以(yǐ)更早的(de)得到(dào)加載并可用，更不(bù)易阻塞頁面的(de)初步渲染。defer：所有元素解析完成後，DOMContentLoaded 事件觸發之(zhī)前。async：當前 Javascript 腳本加載完成後（加載後立即執行，執行順序不(bù)固定，适合獨立無依賴的(de)代碼）
<link rel="dns-prefetch" href="/www.devpoint.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标簽會顯示替代文本，提供了(le／liǎo)圖像的(de)額外上(shàng)下文，這(zhè)對SEO很友好。
15. 一(yī / yì ／yí)個(gè) h1 标簽
建議一(yī / yì ／yí)個(gè) HTML 頁面一(yī / yì ／yí)個(gè)h1标簽，如果是(shì)網站 logo ，可以(yǐ)将 logo 包含在(zài)h1标簽中。當然如果使用多個(gè)h1标簽也(yě)是(shì)沒有問題的(de)。
16. 字體預加載
如果頁面存在(zài)字體文件，建議在(zài)<head></head>标簽中使用prefetch/preload屬性進行與加載。
17. 定義響應式 meta
應該始終确保網站具有響應性屬性，這(zhè)樣不(bù)管用戶使用什麽設備都可以(yǐ)流暢清晰的(de)浏覽網站内容。
<meta name="viewport" content="width=device-width, initial-scale=1" />
18. 始終指定 DOCTYPE
在(zài) DOCTYPE 中包含 HTML 屬性将确保浏覽器正确呈現内容。
<!DOCTYPE html>
19. 頁面語言
通過指定網站的(de)語言将有助于(yú)屏幕閱讀器選擇正确的(de)語言來(lái)渲染，浏覽器還可以(yǐ)使用它來(lái)确定是(shì)否應該自動翻譯網站，lang屬性應該描述網站大(dà)部分内容使用的(de)語言。
<html lang="zh-cn">
20. 正确使用data-*
标簽data屬性是(shì)大(dà)部份框架或者插件喜歡傳遞數據的(de)方式，但是(shì)不(bù)要(yào / yāo)使用data屬性來(lái)傳遞敏感數據，其他(tā)屬性可能更适合。
21. 使用time标簽
一(yī / yì ／yí)個(gè)重要(yào / yāo)的(de)時(shí)間使用time标簽來(lái)展示，這(zhè)樣可以(yǐ)方便用戶輕松點擊以(yǐ)添加到(dào)日曆中。
<time datetime="20:00">20:00</time>
22. 添加 favicon
浏覽器會自動爲(wéi / wèi)獲取網頁圖标，甚至不(bù)需要(yào / yāo)爲(wéi / wèi) favicon 指定鏈接，隻需将其放在(zài)網站的(de)根目錄中即可。無論您做什麽，始終明确爲(wéi / wèi)網站包含各種大(dà)小和(hé / huò)目标的(de)網站圖标，并爲(wéi / wèi)不(bù)同的(de)設備、浏覽器設置不(bù)同的(de)圖标，可以(yǐ)使用在(zài)線工具制作不(bù)同尺寸。
23. 有效的(de) DOM 标簽
現代浏覽器會盡力成對匹配标簽，但它可能并不(bù)正确。因此建議所有 HTML 标簽小寫、關閉标簽（可以(yǐ)借助開發工具自動完成）。
24. 正确使用 title
爲(wéi / wèi)頁面使用一(yī / yì ／yí)個(gè)<title></title>标簽，标題顯示與浏覽器選項卡中，并且當分享網址的(de)時(shí)候能夠清晰的(de)獲取标題。
25. 轉義特殊字符
HTML 有一(yī / yì ／yí)些特殊字符《HTML特殊符号對照表》，在(zài)使用的(de)時(shí)候一(yī / yì ／yí)定要(yào / yāo)進行轉義，如果不(bù)這(zhè)樣做，可能會破壞頁面的(de)呈現。
總結
以(yǐ)上(shàng)建議都是(shì)通用規則，制定大(dà)而(ér)全的(de) HTML 規則，對于(yú)團隊項目開發是(shì)有很大(dà)的(de)意義。