HTML5 標(biāo)準(zhǔn)規(guī)范有哪些，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細(xì)節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及三維植被網(wǎng)等，在網(wǎng)站建設(shè)公司、成都全網(wǎng)營銷、WAP手機(jī)網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

1.1文檔結(jié)構(gòu)

文檔類型

在每一個html頁面的第一行添加標(biāo)準(zhǔn)模式的聲明,必須使用

語言屬性

必須為html根元素制定lang屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時所應(yīng)遵守的規(guī)則等

區(qū)分瀏覽器

參照以下寫法

這樣寫的好處：

• 可以使用class作為全局條件區(qū)分低版本的IE瀏覽器并進(jìn)行調(diào)整，這顯然要優(yōu)于使用CSS Hack

• 可以避免IE6條件注釋引起的高版本IE文件阻塞問題，原文的解決方法是在前面加一個空白的條件注釋，但是這里顯然將原本無用空白的條件注釋變得有意義了

• 仍然可以通過HTML驗證

• 與Modernizr等特征檢測類庫使用相同的class，更具備通用性

no-js標(biāo)簽是需要與Modernizr等類庫配合使用的

viewport

必須加上viewport可以讓我們開發(fā)出來的頁面在不同大小的設(shè)備上都能統(tǒng)一友好顯示

兼容屬性

IE 支持通過特定的標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則設(shè)置為edge mode，從而通知 IE 采用其所支持的最新的模式

字符編碼

所有標(biāo)記都應(yīng)設(shè)置為utf–8，它應(yīng)該同時指定在HTTP報頭和文檔頭部

文檔描述

為了更好讓搜索引擎找到你的頁面，必須寫上keywords和description

頁面title

必須給每個頁面加上有意義的標(biāo)題

type屬性：省略

將樣式表和腳本中的type省略，除非你不是用的css或javascript，在html5，該值默認(rèn)是text/css和text/javascript

協(xié)議部分

在指向圖片或其他媒體文件、樣式表和腳本的URL地址中省略http: https:協(xié)議部分，除非已知相應(yīng)文件不能同時兼容2個協(xié)議

關(guān)注點分離

將結(jié)構(gòu)(markup)、表現(xiàn)樣式(style)和行為動作(script)分開處理,盡量使三者之間的關(guān)聯(lián)度降到最小,這樣有利于維護(hù)

• 必須將css文件引入并置于head中

• 必須將js文件引入并置于body底部 ###大小寫：只使用小寫 所有的代碼都應(yīng)是小寫的，包括元素名稱、屬性，屬性值（除非text或CDATA的內(nèi)容）、選擇器、css屬性、屬性值（字符串除外）

Home



color: #E5E5E5;

color: #e5e5e5;

縮進(jìn)

每次縮進(jìn)使用4個空格不要使用Tab

.example {
    color: blue;
}

    
Fantastic
    
Great

樹形結(jié)構(gòu)

針對每一個塊級元素都另起一行，并在每個子元素前縮進(jìn)，可提升可讀性

    
        
            header 1
            header 2
    
        
            
            
line 1
line 2

減少嵌套

盡可能減少嵌套,減少不必要的標(biāo)簽，如果結(jié)構(gòu)可以滿足上下文要求，就不需要有冗余的結(jié)構(gòu)

test

test

test

test

標(biāo)簽嵌套規(guī)則

1.塊級元素 address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h2~h7、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

2.內(nèi)嵌元素 a、abbr、acronym、b、bdo、big、br、cite、code、 dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、 strong、sub、sup、textarea、tt、u、var

嵌套規(guī)則

1. 塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素：

 —— 對

 —— 對

 —— 錯

2. 塊級元素不能放在

里面：

 —— 錯

 —— 錯

3. 有幾個特殊的塊級元素只能包含內(nèi)嵌元素，不能再包含塊級元素，這幾個特殊的標(biāo)簽是：

h2、h3、h4、h5、h6、h7、p、dt

4. 塊級元素與塊級元素并列、內(nèi)嵌元素與內(nèi)嵌元素并列：

 —— 對

 —— 對

 —— 錯

1.2代碼規(guī)范

注釋

• 單行注釋，需在前空一格

• 多行注釋，注釋起始和結(jié)尾都另起一行，注釋內(nèi)容縮進(jìn)4個空格，不要使用Tab

This is a comment

HTML有效性驗證

使用有效的html標(biāo)簽，并利用工具如W3C html validator進(jìn)行檢查

This is  a demo.


This is a demo.

語義性

根據(jù)標(biāo)簽的語義來合理使用它 如使用footer元素來定義頁腳，section元素來定義文檔中的章節(jié) 這對代碼的執(zhí)行效率和可讀性都非常重要

Journey
One day you finally knew what you had to do, and began.



Journey
One day you finally knew what you had to do, and began.

HTML5 data-* 自定義屬性

添加屬性的時候需要去掉前綴data-*，-后為一個單詞小寫.如下

    Click Here