前端html編碼規範

weixin_33912445發表於2018-02-07
前端HTML

HTML程式碼規範

通過學習基本的HTML和CSS就能在瀏覽器上看到實際的效果，可是要寫好的HTML，就不是那麼容易了。這裡將和大家分享HTML規範，希望大家讀完之後都能夠有所收穫。本文將主要以下面三個部分展開：

  • HTML整體結構
  • HTML程式碼格式
  • HTML內容語義

第一部分：HTML整體結構

1.HTML基礎設施

  1. 檔案應以<!DOCTYPE.....>首行頂格開始，這句話告訴瀏覽器這是一個什麼檔案，我們推薦使用<!DOCTYPE html>。

  2. 必須在head元素內部的meta標籤內宣告文件的字元編碼charset, 如：<meta charset="UTF-8">，這句程式碼告訴瀏覽器應該此HTML檔案使用的字符集是什麼，如果不加此行程式碼，那麼在瀏覽器中可能顯示為亂碼。

  3. 頁面的title是極為重要的不可缺少的一項。

2.HTML程式碼結構和視覺順序基本保持一致

  1. 按照從上之下，從左到右的視覺順序書寫HTML結構。

  2. 有時候為了便於搜尋引擎抓取，我們也會將重要內容在HTML結構順序上提前，以為搜尋引擎抓取網頁內容是自上而下的，所以將重要內容在HTML結構順序上提前可便於抓取重要的內容。

  3. 儘量不要使用table佈局，現在基本上被淘汰了，而應該代之以div來佈局，方便控制。

  4. 保持良好的樹形結構

第二部分：HTML程式碼格式

說明文案的註釋方法

  1. 開始註釋：
<!-- 註釋文案 -->
  1. 結束註釋：
<!-- /註釋文案 -->
  1. 允許只有開始註釋。

嚴格巢狀

  1. 應當以最嚴格的xhtml strict標準來巢狀，不如內聯元素不能包含塊級元素等等。

  2. 正確閉合標籤且必須閉合。

  3. 嚴格的屬性

  • 每個屬性都必須有一個值，每個值必須加雙引號。

  • 沒有值的屬性必須使用自己的名稱做為值（checked、disabled、readonly、selected等等）。

  • 可以省略style標籤和script標籤的type屬性。

第三部分：HTML內容語義

  1. 加強資源型內容的可訪問性和可用性。比如在img標籤內加入alt屬性，在audio內加入文案和連結等等。

  2. 加強不可見內容的可訪問性，比如背景圖片的文字應該同時解除安裝HTML中，並使用css使其不可見，有利於搜尋引擎抓取你的內容，也可在css失效的情況下看到內容。

  3. 適當使用實體，以實體代替與HTML語法相同的字元，避免瀏覽器解析錯誤。

相關文章