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