構建 WEB 項目的 25 個 HTML 建議

2021-06-26

構建WEB項目的 25 個HTML建議

HTML 超文本标記語言是一種(zhǒng)用于創建網頁的标準标記語言。HTML 是一種(zhǒng)基礎技術，常與 CSS、JavaScript 一起(qǐ)被(bèi)衆多網站用于設計網頁、網頁應用程序以及移動應用程序的用戶界面(miàn)。

HTML 是 WEB 應用程序的骨架，盡管非常容易上手，但仍有很多需要注意的規則，可能(néng)因爲沒(méi)有遵循這(zhè)些規則導緻 WEB 應用程序的實踐受到影響，現在對(duì)于項目開(kāi)發(fā)，很多規則是可以通過(guò)程序來自動完成(chéng)，對(duì)于初學(xué)者還(hái)是有必要了解一下。

1. 避免内聯樣(yàng)式

雖然現代浏覽器或其他輔助設備可能(néng)能(néng)夠有效處理内聯屬性和标簽，但一些較舊的設備不能(néng)，這(zhè)可能(néng)會(huì)導緻一些奇怪的網頁顯示。額外的字符和文字會(huì)影響搜索引擎收錄網頁的内容，同時(shí)内聯樣(yàng)式也會(huì)帶來維護上的不方便。内聯樣(yàng)式的使用的唯一場合就(jiù)是動态更改樣(yàng)式，比如從 Javascript 端完成(chéng)的一些樣(yàng)式操作，而不是作爲一種(zhǒng)設置 HTML 樣(yàng)式的方式。

2. 優先添加關鍵樣(yàng)式

如果將(jiāng)網站的所有樣(yàng)式都(dōu)放在一個文件中，則可能(néng)需要很長(cháng)時(shí)間來獲取和解析，這(zhè)會(huì)延遲網站呈現。最佳的實踐方式是將(jiāng)站點的主要和基本樣(yàng)式包含在頭部的樣(yàng)式标簽中，或者首先加載一個較小的樣(yàng)式表，隻加載第一次渲染所需的樣(yàng)式，然後(hòu)次要樣(yàng)式文件增加deferred屬性。

次要樣(yàng)式可以是用于用戶交互的樣(yàng)式，例如彈出圖層、下拉列表和通知組件等，或者是用戶需要滾動到頁面(miàn)下方的内容。

3. 延遲加載圖片

有些浏覽器隻會(huì)在視圖中加載圖片，如果有一個 100 張圖片的頁面(miàn)，隻會(huì)加載視圖内的圖片，當用戶滾動時(shí)，其他的圖片也會(huì)相應地加載。最佳的實踐方式是用lazy值指定加載屬性。如果想在所有浏覽器中使用這(zhè)個特性，可以使用polyfill。

4. 避免過(guò)多的 HTML

過(guò)多的 HTML 并不好(hǎo)，采用允許加載足夠的 HTML 進(jìn)行初始呈現的策略，其餘内容放在不同的頁面(miàn)上，或者稍後(hòu)通過(guò) Javascript 的滾動或點擊按鈕來獲取。因爲太多的 HTML 意味著(zhe)更長(cháng)的解析時(shí)間，而且通常是不必要的。

5. 停止支持低版本 IE

在 WEB 項目開(kāi)發(fā)中，各種(zhǒng)兼容性問題的支持，特别的低版本 IE 的支持簡直是地獄級的體驗，在這(zhè)裡(lǐ)倡議大家停止兼容低版本 IE，除非是必須，否則就(jiù)引導用戶去升級浏覽器，好(hǎo)消息是微軟將(jiāng)在 2021 年年中停止對(duì) IE11 的支持。

6. 爲圖片增加适配

圖片标簽允許爲不同的窗口大小指定多個資源，這(zhè)可以更快地加載适當的圖像，并爲适當的視圖大小使用不同的圖像。這(zhè)可以更快地爲移動設備加載較小尺寸的圖像，爲桌面(miàn)加載更大的圖像。

<picture>
    <source srcset="apple-360.jpg" media="(min-width: 800px)">
    <img src="apple.jpg" alt=""/>
</picture>

7. 爲媒體指定多個備份源

對(duì)于視頻和音頻，總是設置多個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屬性在頁面(miàn)上延遲加載視頻，最佳做法是始終包含此屬性，因爲不同的浏覽器具有不同的默認值，preload="none"將(jiāng)阻止浏覽器立即加載視頻并同時(shí)poster設置的圖片。

<video controls preload="none" poster="movie.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

9. 始終指定按鈕類型

簡單的規則，始終指定按鈕的類型。如果不指定按鈕將(jiāng)使用默認爲submit類型，這(zhè)可能(néng)并不是你想要的行爲。通常情況下，總是指定按鈕類型，即使它是默認值。

<button type="button">我是開(kāi)心按鈕</button>
<input type="text"/>

10. 視頻有時(shí)比 gif 更好(hǎo)

通常需要展示動畫内容時(shí)候，首先想到的是gif而不是視頻，認爲gif可以更小視頻更大。但根據視頻不同的格式，視頻并不一定比gif文件大，這(zhè)時(shí)視頻可能(néng)是更好(hǎo)的選擇，因此，在做出決定之前，請先比較視頻和gif。

11. 避免書寫 Javascript

很多 SDK 都(dōu)會(huì)將(jiāng)其腳本代碼加入到站點的<head>标簽中，但其實可以把這(zhè)些代碼統一放在外部腳本文件中，通過(guò)外部加載，并控制它的加載方式。一般來說(shuō)，應該避免 Javascript 代碼與 HTML 混合。

12. script 标簽放在頁面(miàn)底部

對(duì)于不支持某些優化屬性（如defer、async）的浏覽器，此規則就(jiù)不可避免。一般來說(shuō)，如果 HTML 和 CSS 不是異步或延遲的，最好(hǎo)將(jiāng)腳本标簽放在最後(hòu)，以保證浏覽器在完成(chéng)解析和呈現HTML和CSS時(shí)不會(huì)被(bèi)阻塞。因爲script标簽會(huì)阻塞 HTML 的解析.

13.減少外部鏈接的數量

始終嘗試將(jiāng)外部樣(yàng)式表和腳本文件合并到一個壓縮的文件中，并設置dns-prefetch、preload/prefetch、defer、async屬性，告訴浏覽器如何處理它們。

dns-prefetch：用于預解析 CDN 的地址的 DNS
prefetch：利用浏覽器空閑時(shí)間，預加載用戶可能(néng)會(huì)用的資源（圖片、視頻、js、css）緩存到 disk ，如有頁面(miàn)需要就(jiù)從disk中讀取
preload：可以對(duì)當前頁面(miàn)所需的腳本、樣(yàng)式等資源進(jìn)行預加載，將(jiāng)其放在内存中，而無需等到解析到script和link标簽時(shí)才進(jìn)行加載。這(zhè)一機制使得資源可以更早的得到加載并可用，更不易阻塞頁面(miàn)的初步渲染。
defer：所有元素解析完成(chéng)後(hòu)，DOMContentLoaded 事(shì)件觸發(fā)之前。
async：當前 Javascript 腳本加載完成(chéng)後(hòu)（加載後(hòu)立即執行，執行順序不固定，适合獨立無依賴的代碼）

<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标簽會(huì)顯示替代文本，提供了圖像的額外上下文，這(zhè)對(duì)SEO很友好(hǎo)。

15. 一個 h1 标簽

建議一個 HTML 頁面(miàn)一個h1标簽，如果是網站 logo ，可以將(jiāng) logo 包含在h1标簽中。當然如果使用多個h1标簽也是沒(méi)有問題的。

16. 字體預加載

如果頁面(miàn)存在字體文件，建議在<head></head>标簽中使用prefetch/preload屬性進(jìn)行與加載。

17. 定義響應式 meta

應該始終确保網站具有響應性屬性，這(zhè)樣(yàng)不管用戶使用什麼(me)設備都(dōu)可以流暢清晰的浏覽網站内容。

<meta name="viewport" content="width=device-width, initial-scale=1" />

18. 始終指定 DOCTYPE

在 DOCTYPE 中包含 HTML 屬性將(jiāng)确保浏覽器正确呈現内容。

<!DOCTYPE html>

19. 頁面(miàn)語言

通過(guò)指定網站的語言將(jiāng)有助于屏幕閱讀器選擇正确的語言來渲染，浏覽器還(hái)可以使用它來确定是否應該自動翻譯網站，lang屬性應該描述網站大部分内容使用的語言。

<html lang="zh-cn">

20. 正确使用`data-*`

标簽data屬性是大部份框架或者插件喜歡傳遞數據的方式，但是不要使用data屬性來傳遞敏感數據，其他屬性可能(néng)更适合。

21. 使用`time`标簽

一個重要的時(shí)間使用time标簽來展示，這(zhè)樣(yàng)可以方便用戶輕松點擊以添加到日曆中。

<time datetime="20:00">20:00</time>

22. 添加 favicon

浏覽器會(huì)自動爲獲取網頁圖标，甚至不需要爲 favicon 指定鏈接，隻需將(jiāng)其放在網站的根目錄中即可。無論您做什麼(me)，始終明确爲網站包含各種(zhǒng)大小和目标的網站圖标，并爲不同的設備、浏覽器設置不同的圖标，可以使用在線工具制作不同尺寸。

23. 有效的 DOM 标簽

現代浏覽器會(huì)盡力成(chéng)對(duì)匹配标簽，但它可能(néng)并不正确。因此建議所有 HTML 标簽小寫、關閉标簽（可以借助開(kāi)發(fā)工具自動完成(chéng)）。

24. 正确使用 title

爲頁面(miàn)使用一個<title></title>标簽，标題顯示與浏覽器選項卡中，并且當分享網址的時(shí)候能(néng)夠清晰的獲取标題。

25. 轉義特殊字符

HTML 有一些特殊字符《HTML特殊符号對(duì)照表》，在使用的時(shí)候一定要進(jìn)行轉義，如果不這(zhè)樣(yàng)做，可能(néng)會(huì)破壞頁面(miàn)的呈現。

總結

以上建議都(dōu)是通用規則，制定大而全的 HTML 規則，對(duì)于團隊項目開(kāi)發(fā)是有很大的意義。

來源：InfoQ