HTML規范 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　HTML是描述網頁結構的超文本標記語言，HTML規范能夠使HTML代碼風格保持一致，使得HTML更容易理解和維護。本文將詳細介紹HTML規范

整體結構

【頁面頭部】

　　1、文件應以“<!DOCTYPE ......>”首行頂格開始，推薦使用“<!DOCTYPE html>”

<!DOCTYPE html>

　　2、必須聲明文檔的編碼charset，且與文件本身編碼保持一致，指定字符編碼的 meta 必須是 head 的第一個直接子元素。推薦使用UTF-8編碼<meta charset="utf-8">

<meta charset="utf-8">

　　3、根據頁面內容和需求填寫適當的keywords和description

<meta name="description" content="不超過150個字符">
<meta name="keywords" content="">

　　4、頁面title是不可缺少的一項，title 必須作為 head 的直接子元素，并緊隨 charset 聲明之后

<head>
    <meta charset="UTF-8">
    <title>頁面標題</title>
</head>

【資源引入】

　　1、保證 favicon 可訪問

<link rel="shortcut icon" href="path/to/favicon.ico">

　　2、引入 CSS 和 JavaScript 時無須指明 type 屬性

　　3、引入 CSS 時必須指明 rel="stylesheet"

<link rel="stylesheet" href="page.css">

　　4、使用link將css文件引入，并置于head中；使用script將js文件引入，并置于body底部

　　5、移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 URL 協議部分與頁面相同，建議省略協議前綴。這是因為使用 protocol-relative URL 引入 CSS，在 IE7/8 下，會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

【結構優化】

　　1、盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度

　　2、結構順序和視覺順序基本保持一致，按照從上至下、從左到右的視覺順序書寫HTML結構。有時為了便于搜索引擎抓取，也會將重要內容在HTML結構順序上提前

　　3、結構、表現、行為三者分離，避免內聯

　　4、每一個塊級元素都另起一行，每一行都使用Tab縮進對齊（head和body的子元素不需要縮進）。刪除冗余的行尾空格

　　5、對于內容較為簡單的表格，建議將tr寫成單行

　　6、可以在大的模塊之間用空行隔開，使模塊更清晰

【語義化】

　　瀏覽器會根據標簽的語義給定一個默認的樣式。判斷網頁標簽語義化是否良好的一個簡單方法：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性

　　1、盡可能少地使用無語義標簽span和div

　　2、在語義不明顯，既可以使用p也可以使用div的地方，盡量用p

　　3、在既可以使用div也可以使用section的地方，盡量用section

　　4、不要使用純樣式標簽，如b、u等，而改用CSS設置

代碼格式

【縮進】

　　使用2個空格代替1個Tab（大多數編輯器中可設置）

<ul>
    <li>first</li>
    <li>second</li>
</ul>

【命名】

　　1、class 必須單詞全字母小寫，單詞間以 - 分隔

　　2、class 必須代表相應模塊或部件的內容或功能，不得以樣式信息進行命名

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

　　3、同一頁面，應避免使用相同的 name 與 id。因為IE7-瀏覽器會混淆元素的 id 和 name 屬性， document.getElementById 可能獲得不期望的元素。所以在對元素的 id 與 name 屬性的命名需要非常小心

【標簽】

　　1、標簽名必須使用小寫字母

　　2、對于無需自閉合的標簽，不需要自閉合

　　3、對 HTML5 中規定允許省略的閉合標簽，不允許省略閉合標簽

　　4、HTML 標簽的使用應該遵循標簽的語義，且要符合標簽嵌套規則

<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>

<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />

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

【注釋】

　　采用類似標簽閉合的寫法，與HTML統一格式；注釋文案兩頭空格，與CSS注釋統一格式

開始注釋：（文案兩頭空格）

結束注釋：（文案前加“/”符號，類似標簽的閉合）

　　允許只有開始注釋

<!-- 頭部 -->
<div class="g-hd">
    <!-- LOGO -->
    <h1 class="m-logo"><a href="#">LOGO</a></h1>
    <!-- /LOGO -->
    <!-- 導航 -->
    <ul class="m-nav">
        <li><a href="#">NAV1</a></li>
        <li><a href="#">NAV2</a></li>
        <!-- 更多導航項 -->
    </ul>
    <!-- /導航 -->
</div>
<!-- /頭部 -->

【屬性】

　　1、屬性和值全部小寫

　　2、屬性值必須用雙引號包圍

　　3、布爾類型的屬性，建議不添加屬性值

　　4、自定義屬性建議以 xxx- 為前綴，推薦使用 data-

　　5、可以省略style標簽和script標簽的type屬性

<!-- 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>

【屬性順序】

　　HTML 屬性應該按照特定的順序出現以保證易讀性

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

特殊元素

【圖片】

　　1、禁止 img 的 src 取值為空，否則會導致部分瀏覽器重新加載一次當前頁面

　　2、為圖片添加 alt 屬性，提高圖片加載失敗時的用戶體驗

　　3、避免為 img 添加不必要的 title 屬性，多余的 title 影響看圖體驗，并且增加了頁面尺寸

　　4、為圖片添加 width 和 height 屬性，以避免頁面抖動

<img src="#" alt="#" width="#" height="#">

　　5、有下載需求的圖片采用 img 標簽實現，無下載需求的圖片采用 CSS 背景圖實現

　　產品 logo、用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便用戶下載

　　無下載需求的圖片，比如：icon、背景、代碼使用的圖片等，盡可能采用 css 背景圖實現

【表單】

　　1、有文本標題的控件使用 label 標簽將其與其標題相關聯。最好將控件置于 label 內，以減少不必要的 id

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

　　2、使用 button 元素時必須指明 type 屬性值。因為button 元素的默認 type 為 submit，如果被置于 form 元素中，點擊后將導致表單提交

<button type="submit">提交</button>
<button type="button">取消</button>

　　3、在針對移動設備開發的頁面時，根據內容類型指定輸入框的 type 屬性，能獲得友好的輸入體驗

<input type="date">

【多媒體】

　　1、在支持 HTML5 的瀏覽器中優先使用 audio 和 video 標簽來定義音視頻元素，并使用退化到插件的方式來對多瀏覽器進行支持

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <object width="100" height="50" data="audio.mp3">
        <embed width="100" height="50" src="audio.swf">
    </object>
</audio>

<video width="100" height="50" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <object width="100" height="50" data="video.mp4">
        <embed width="100" height="50" src="video.swf">
    </object>
</video>