面向初學者的HTML的10個最佳作法

時間 2020-08-09

標籤面向初學者 html 最佳作法欄目 HTML 简体版

原文原文鏈接

來源：公衆號《前端全棧開發者》

在當今世界，JavaScript框架每週都會出現，其餘一切都會隨之改變，這很容易讓人陷入困境，並懷疑你的網站是否以最佳狀態執行。哪些作法要保留，哪些要放棄。我讀到過，使用 implementation x 能夠幫助提高性能。但另外一個帖子提到要不惜一切代價避免使用它——真相是什麼？前端

使用HTML（最終構成咱們的內容），咱們能夠輕鬆完成工做。它不會像JavaScript頁面那樣頻繁地更改。可是，這裏提到的某些方面——有時甚至是大多數——常常被忽略，這確實會損害你的網站。最終，它驅使最終用戶離開。web

在進入這些步驟以前，先作一個站點報告。不論是Lighthouse仍是別的什麼。而後，在應用此處提到的全部內容後再取一個。你會有一個很好的對比，它到底有什麼不一樣。瀏覽器

所以，下一次編寫HTML時，請牢記如下10個最佳實踐。服務器

1.編寫有效且可讀的DOM

第一個聽起來有些明顯。但我想在這裏提一下我常常遇到的相似問題：框架

所有小寫：不少時候，我看到基礎結構寫的都是大寫，例如 <HTML> 或 <BODY>，甚至更糟的是，整個HTML自己。每一個標籤都應該是小寫的，因此請不要在HTML標籤中使用任何大寫。
縮進是可讀性的關鍵：使用它。不然，你的文檔會顯得很平淡，裏面的一切都會顯得很雜亂。加強可讀性也意味着能夠減小開發時間。
自動關閉標籤曾經是強制性的。可是使用HTML5，它是可選的，徹底由開發人員決定。要麼在全部標籤上使用它，要麼根本不使用它。這裏的關鍵是保持一致。固然，不要忘記關閉常規標籤。
避免過分使用註釋：除非你有一個構建系統，或者你使用的是模板引擎，不然這些真的會增長你的HTML文件的體積。反過來，這也會拖慢你的初始頁面加載速度，會讓你的用戶等待。最終，讓他們離開。
組織DOM：始終考慮是否須要額外的div或額外的元素。嘗試只建立絕對必要的元素，並使用語義HTML元素而不是div來劃分頁面的大部分。其餘地方也同樣，若是能夠，請始終使用HTML5語義元素。它能夠幫助搜索引擎知道頁面上哪一部分很重要，哪一部分不重要。記住，要時刻問本身，你是否真的須要那裏多出來的div。把多餘的東西處理掉。

2.不要使用內聯樣式和腳本

不然你的文檔很快就會變得雜亂無章，沒法閱讀。老是使用外部樣式表。另外，儘可能避免在CSS文件中使用 import 語句，它們會產生額外的服務器請求。dom

你還應該將它們捆綁在一塊兒以減小請求數量。對於大型bundle，你能夠利用域分片的優點，將它們分割爲2-4個更小的塊。工具

內聯JavaScript也是如此。除了可讀性問題，這將使你的文檔變得更重、更難維護。性能

3.內聯關鍵CSS

咱們討論了爲何不該該內聯CSS。如今咱們來討論一下爲何你應該這樣作。考慮將關鍵的CSS放在頂部，這樣，用戶能夠更快地看到頁面的第一部分。僅內聯關鍵CSS，僅此而已！優化

關鍵CSS指的是渲染頁面頂部所需的最小CSS集，即用戶在登錄你的網站時首先看到的CSS。

此外，請記住，連接標籤的順序可能會重寫規則，因此要當心放置它們。若是你有用於重置或第三方庫的單獨文件，請先放置這些文件，而後放置其他文件。網站

4.將腳本標籤放在底部

將腳本標籤放在文檔的底部。從官方的角度來講，腳本標籤是活在 head 裏面的，但若是咱們把它們放在文檔底部，就在正文標籤關閉以前，咱們就能夠延遲它們的下載。這樣咱們的文檔就能夠先加載到dom中，展現給用戶，而後再請求腳本。

之因此這樣，是由於瀏覽器會逐行從上到下解釋你的文檔。當它到達 head 並遇到 script 標籤時，它將向服務器發出請求以獲取文件。若是它是一個巨大的文件，它將繼續加載，用戶將只看到一個空白頁面，由於它仍在加載頭部。所以，將它們移到底部。這樣，在加載腳本標籤的內容以前，將加載正文的全部內容。做爲回報，咱們能夠誘使用戶相信咱們的頁面正在快速加載。你也能夠在你的腳本標籤中添加一個 defer 標籤，以確保HTML被優先加載。

5. 照顧無障礙

你是否知道，根據世界衛生組織的說法，世界人口的15％患有某種殘疾？超過10億人可能會在使用你的網站時遇到問題。現在，咱們網站上的互動很是頻繁，可訪問性很容易受到衝擊。花一些時間用 aria 屬性裝飾複雜的UI元素。這帶來了對輔助技術的支持，所以你能夠覆蓋更多的受衆。

6.對圖片使用alt標籤

alt標籤爲圖像指定替代文本。因此萬一由於某種緣由不能顯示圖片，就會顯示這段文字。當你的圖片缺乏alt標籤時，搜索引擎是不喜歡的，會所以下降你的頁面排名。

7.每頁一個h1

每頁僅使用一個 h1。將最重要的文字放在此處，以描述頁面的內容。好比你的博客文章或文章標題。每一個頁面使用多個 h1 標籤不必定是個好主意，也不建議這樣作，由於它可能會損害你的搜索引擎結果，這有助於搜索引擎正確地索引你的網站。另外，這是W3C規範中定義的，反正你的頁面內容應該由一個標籤來描述，因此每頁只保留一個 h1。