HTML編寫規範

佳寶兒發表於2018-11-27
HTML

1、程式碼風格

1.1 縮排與換行與css一樣

1.2 命名

  • class必須單詞全部字母小寫，單詞間以-分隔
  • class必須代表相應模組或部件的內容或功能，不得以樣式資訊進行命名
<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>
複製程式碼
  • 元素ID必須保證頁面唯一同一個頁面中，不同的元素包含相同的 id，不符合 id 的屬性含義。並且使用 document.getElementById 時可能導致難以追查的問題。
  • ID必須使用駝峰命名法
  • ID，class命名，在避免衝突並描述清楚的前提下儘可能短
<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>
複製程式碼
  • 同一頁面，應避免使用相同的name與ID

IE 瀏覽器會混淆元素的 id 和 name 屬性， document.getElementById 可能獲得不期望的元素。所以在對元素的 id 與 name 屬性的命名需要非常小心。

<input name="foo">
<div id="foo"></div>
<script>
// IE6 將顯示 INPUT
alert(document.getElementById('foo').tagName);
</script>
複製程式碼

1.3 標籤

標籤名必須使用小寫字母

<p>Hello world!</p>
複製程式碼

對於無需自閉和的標籤，不允許自閉和

常見無需自閉和的標籤有input、br、img、等

<input type="text" name="title">
複製程式碼

除HTML5 中規定允許省略的閉合標籤外，其他不允許省略閉合標籤。（對程式碼體積要求非常嚴苛的場景，可以例外）

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>
複製程式碼

標籤使用必須符合標籤巢狀規則

比如：div不得置於p中，tbody必須置於table中

在css可以實現相同需求的情況下不得使用表格進行佈局

在相容性允許的情況下應儘量保持語義正確性。對網格對齊和拉伸性有嚴格要求的場景允許例外，如多列複雜表單。

標籤的使用應儘量簡潔，減少不必要的標籤

<!-- good -->
<img class="avatar" src="image.png">

<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>
複製程式碼

1.4 屬性

  • 屬性名必須使用小寫字母
<!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>
複製程式碼
  • 屬性值必須使用雙引號包圍
<!-- good -->
<script src="esl.js"></script>

<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
複製程式碼
  • 布林型別的屬性，建議不新增屬性值
<input type="text" disabled>
<input type="checkbox" value="1" checked>
複製程式碼
  • 自定義屬性推薦使用data-

使用字首有助於區分自定義屬性和標準定義的屬性

<ol data-ui-type="Select"></ol>

1.5 語義化

我們一直都在說語義化程式設計，語義化程式設計，但是在程式碼中很少有人完全使用正確的元素。使用語義化標籤也是有理由SEO的。

語義化是指：根據元素其被創造出來時的初始意義來使用它。意思就是用正確的標籤幹正確的事，而不是隻有div和span。

2、通用

2.1 DOCTYPE

  • 使用 HTML5 的 doctype 來啟用標準模式，建議使用大寫的 DOCTYPE。
<!DOCTYPE html>
複製程式碼
  • 建議在html標籤上設定正確的lang屬性

有助於提高頁面的可訪問性，如：讓語音合成工具確定其所應該採用的發音，令翻譯工具確定其翻譯語言等。

<html lang="zh-CN">
複製程式碼

2.2 CSS和js引入

  • 引入css時必須指明rel="stylesheet"
  • 引入css和js時無須指明type屬性
  • 樣式放置於外部css中，功能放置於外部js中

結構-樣式-行為的程式碼分離，對於提高程式碼的可閱讀性和維護性都有好處。 1、不使用超過一到兩張樣式表 2、不使用超過一到兩個指令碼（學會用合併指令碼） 3、不使用行內樣式（<style>.no-good {}</style>） 4、不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">） 5、不使用行內指令碼（<script>alert('no good')</script>） 6、不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>） 7、不使用表象 class 名（i.e. red, left, center）

  • 在head中引入頁面需要的所有css資源

在頁面渲染的過程中，新的CSS可能導致元素的樣式重新計算和繪製，頁面閃爍。

  • js應當放在頁面的末尾，或採用非同步載入
  • 移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 URL 協議部分與頁面相同，建議省略協議字首。
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
複製程式碼
  • 圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現出了與內容相關的一些資訊。

3、head

3.1 title

  • 頁面必須包含title標籤宣告標題
  • title必須作為head的直接子元素，並緊隨charset宣告之後

3.2 favicon

  • 保證favicon可訪問

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證favicon可訪問，避免404，必須遵循以下兩種方法之一： 1、在 Web Server 根目錄放置 favicon.ico 檔案。 2、使用 link 指定 favicon。

<link rel="shortcut icon" href="path/to/favicon.ico">
複製程式碼

3.3 viewport

  • 若頁面需要在移動裝置上使用，需設定viewport
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製程式碼

4、圖片

禁止img的src取值為空，延遲載入的圖片也要增加預設的src

src 取值為空，會導致部分瀏覽器重新載入一次當前頁面

避免為img新增不必要的title屬性

多餘的title影響看圖體驗，並且增加了頁面尺寸

為重要圖片新增alt屬性。

可以提高圖片載入失敗時的使用者體驗

新增width和height屬性，以避免頁面抖動 有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用CSS 雪碧圖實現。

1、產品 logo、使用者頭像、使用者產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便使用者下載。 2、無下載需求的圖片，比如：icon、背景、程式碼使用的圖片等，儘可能採用 css 雪碧圖實現。

4、表單

4.1 控制元件標題

有文字標題的控制元件必須使用 label標籤將其與其標題相關聯。

有兩種方式： 1、將控制元件置於 label 內。 2、label 的 for 屬性指向控制元件的 id。 推薦使用第一種，減少不必要的 id。如果 DOM 結構不允許直接巢狀，則應使用第二種。

<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>

<label for="username">使用者名稱：</label> <input type="textbox" name="username" id="username">
複製程式碼

4.2 按鈕

使用button元素時必須指明type屬性值 button 元素的預設 type 為 submit，如果被置於 form 元素中，點選後將導致表單提交。為顯示區分其作用方便理解，必須給出 type 屬性。

<button type="submit">提交</button>
<button type="button">取消</button>
複製程式碼

儘量不要使用按鈕類元素的name屬性 由於瀏覽器相容性問題，使用按鈕的name屬性會帶來許多難以發現的問題，具體情況可參照http://w3help.org/zh-cn/causes/CM2001

4.3 可訪問性

負責主要功能的按鈕在DOM中的順序應靠前 負責主要功能的按鈕應相對靠前，以提高可訪問性。如果在 CSS 中指定了 float: right 則可能導致視覺上主按鈕在前，而 DOM 中主按鈕靠後的情況。

<!-- good -->
<style>
.buttons .button-group {
    float: right;
}
</style>

<div class="buttons">
    <div class="button-group">
        <button type="submit">提交</button>
        <button type="button">取消</button>
    </div>
</div>

<!-- bad -->
<style>
.buttons button {
    float: right;
}
</style>

<div class="buttons">
    <button type="button">取消</button>
    <button type="submit">提交</button>
</div>
複製程式碼

在針對移動裝置開發的頁面時，根據內容型別指定輸入框的 type屬性。 根據內容型別指定輸入框型別，能獲得能友好的輸入體驗。

<input type="date">
複製程式碼

5、多媒體

當在現代瀏覽器中使用 audio以及 video 標籤來播放音訊、視訊時，應當注意格式。 音訊應儘可能覆蓋到如下格式：

  • MP3
  • WAV
  • Ogg

視訊應儘可能覆蓋到如下格式：

  • MP4
  • WebM
  • Ogg

在支援 HTML5 的瀏覽器中優先使用 audio 和 video 標籤來定義音視訊元素。

只在必要的時候開啟音視訊的自動播放。

相關文章