HTML規(guī)范

發(fā)布時間：2017年07月25日作者： IT網(wǎng)絡(luò)文摘 (該文來自筆記，點(diǎn)擊查看原文)

前面的話

　　HTML是描述網(wǎng)頁結(jié)構(gòu)的超文本標(biāo)記語言，HTML規(guī)范能夠使HTML代碼風(fēng)格保持一致，使得HTML更容易理解和維護(hù)。本文將詳細(xì)介紹HTML規(guī)范

整體結(jié)構(gòu)

【頁面頭部】

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

<!DOCTYPE html>

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

<meta charset="utf-8">

　　3、根據(jù)頁面內(nèi)容和需求填寫適當(dāng)?shù)膋eywords和description

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

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

<head>
    <meta charset="UTF-8">
    <title>頁面標(biāo)題</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、移動環(huán)境或只針對現(xiàn)代瀏覽器設(shè)計(jì)的 Web 應(yīng)用，如果引用外部資源的 URL 協(xié)議部分與頁面相同，建議省略協(xié)議前綴。這是因?yàn)槭褂?nbsp;protocol-relative URL 引入 CSS，在 IE7/8 下，會發(fā)兩次請求。是否使用 protocol-relative URL 應(yīng)充分考慮頁面針對的環(huán)境

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

【結(jié)構(gòu)優(yōu)化】

　　1、盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不要以犧牲實(shí)用性為代價。任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度

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

　　3、結(jié)構(gòu)、表現(xiàn)、行為三者分離，避免內(nèi)聯(lián)

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

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

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

代碼格式

【縮進(jìn)】

　　使用4個空格代替1個Tab（大多數(shù)編輯器中可設(shè)置）

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

【命名】

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

　　2、class 必須代表相應(yīng)模塊或部件的內(nèi)容或功能，不得以樣式信息進(jìn)行命名

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

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

【標(biāo)簽】

　　1、標(biāo)簽名必須使用小寫字母

　　2、對于無需自閉合的標(biāo)簽，不需要自閉合

　　3、對 HTML5 中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽

　　4、HTML 標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語義，且要符合標(biāo)簽嵌套規(guī)則

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

【注釋】

　　采用類似標(biāo)簽閉合的寫法，與HTML統(tǒng)一格式；注釋文案兩頭空格，與CSS注釋統(tǒng)一格式

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

結(jié)束注釋：（文案前加“/”符號，類似標(biāo)簽的閉合）

　　允許只有開始注釋

<!-- 頭部 --><div class="g-hd">
    <!-- LOGO -->
    <h1 class="m-logo"><a href="#">LOGO</a></h1>
    <!-- /LOGO -->
    <!-- 導(dǎo)航 -->
    <ul class="m-nav">
        <li><a href="#">NAV1</a></li>
        <li><a href="#">NAV2</a></li>
        <!-- 更多導(dǎo)航項(xiàng) -->
    </ul>
    <!-- /導(dǎo)航 --></div><!-- /頭部 -->

【屬性】

　　1、屬性和值全部小寫

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

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

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

　　5、可以省略style標(biāo)簽和script標(biāo)簽的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 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性

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

特殊元素

【圖片】

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

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

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

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

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

　　5、有下載需求的圖片采用 img 標(biāo)簽實(shí)現(xiàn)，無下載需求的圖片采用 CSS 背景圖實(shí)現(xiàn)

　　產(chǎn)品 logo、用戶頭像、用戶產(chǎn)生的圖片等有潛在下載需求的圖片，以 img 形式實(shí)現(xiàn)，能方便用戶下載

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

【表單】

　　1、有文本標(biāo)題的控件使用 label 標(biāo)簽將其與其標(biāo)題相關(guān)聯(lián)。最好將控件置于 label 內(nèi)，以減少不必要的 id

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

　　2、使用 button 元素時必須指明 type 屬性值。因?yàn)閎utton 元素的默認(rèn) type 為 submit，如果被置于 form 元素中，點(diǎn)擊后將導(dǎo)致表單提交

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

　　3、在針對移動設(shè)備開發(fā)的頁面時，根據(jù)內(nèi)容類型指定輸入框的 type 屬性，能獲得友好的輸入體驗(yàn)

<input type="date">

【多媒體】

　　1、在支持 HTML5 的瀏覽器中優(yōu)先使用 audio 和 video 標(biāo)簽來定義音視頻元素，并使用退化到插件的方式來對多瀏覽器進(jìn)行支持

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

　　2、只在必要的時候開啟音視頻的自動播放

http://www.cnblogs.com/xiaohuochai/p/5437216.html

分類導(dǎo)航

HTML規(guī)范

前面的話

整體結(jié)構(gòu)

代碼格式

特殊元素

延伸閱讀

我想了解如何學(xué)習(xí)