HTMLCSS學習筆記（十三）-- HTML5基礎

HTML5發展史

HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML 工做團隊。

 • HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。 ​

 • 2012年12月17日，萬維網聯盟（W3C）正式宣佈凝結了大量網絡工做者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱：「HTML5是開放的Web網絡平臺的奠定石。」 ​ 

• 2013年5月6日， HTML 5.1正式草案公佈。該規範定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的做者，努力提升新元素互操做性。

 ​ • 本次草案的發佈，從2012年12月27日至今，進行了多達近百項的修改，包括HTML和XHTML的標籤，相關的API、Canvas等，同時HTML5的圖像img標籤及svg也進行了改進，性能獲得進一步提高

兼容

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的 遨遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。

語法

• 內容類型（ContentType）

             HTML5的文件擴展符與內容類型保持不變，仍然爲".html"或".htm"

• DOCTYPE聲明

​             不區分大小寫 ​

• 指定字符集編碼

            <meta charset="UTF-8">

• 可省略標記的元素

             不容許寫結束標記的元素：br、col、embed、hr、img、input、、link、meta

• 能夠省略結束標記的元素：

              li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

• 能夠省略所有標記的元素：html、head、body、colgroup、tbody
• 屬性值可使用雙引號，也可使用單引號。

語義化標籤

在HTML 5出來以前，咱們用div來表示頁面章節，可是這些div都沒有實際意義。（即便咱們用css樣式的id和class形容這塊內容的意義）。這些標籤只是咱們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但如今，那些以前沒「意義」的標籤由於由於html5的出現消失了，這就是咱們平時說的「語義」。

• section元素 表示頁面中的一個區塊
• article元素 表示一塊與上下文無關的獨立的內容
• aside元素 在article以外的，與article內容相關的輔助信息
• header元素 表示頁面中一個內容區塊或整個頁面的標題
• footer元素 表示頁面中一個內容區塊或整個頁面的腳註
• nav元素 表示頁面中導航連接部分
• figure元素 表示一段獨立的內容，使用figcaption元素爲其添加標題(第一個或最後一個子元素的位置)
• main元素 表示頁面中的主要的內容(ie不兼容)
• hgroup標題的一個分組
• mark定義高亮顯示的文本(span)
• time時間
• dialog標記定義一個對話框(會話框)相似微信
• embed 標記定義外部的可交互的內容或插件 好比flash

多媒體標籤

<video src=""></video> <audio src=""></audio>複製代碼

屬性

• controls屬性：若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
• autoplay屬性：若是出現該屬性，則視頻在就緒後立刻播放。
• loop屬性：重複播放屬性。
• muted屬性：靜音屬性。
• poster屬性：規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。

source

• <source> 標籤爲媒介元素（好比 <video> 和 <audio>）定義媒介資源。
• <source> 標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
• Type屬性值：

            用於視頻：video/ogg video/mp4 video/webm
            用於音頻：audio/ogg audio/mpeg

HTML5表單

• 新增type類型

Type=「email」 限制用戶必須輸入email類型 

 Type=「url」 限制用戶必須輸入url類型 

 Type=「range」 產生一個滑動條表單 

 Type=「number」 限制用戶必須輸入number類型

 Type=「search」 產生一個搜索意義的表單 

 Type=「color」 生成一個顏色選擇的表單 

 Type=「time」 限制用戶必須輸入時間類型 

 Type=「month」 限制用戶必須輸入月類型 

 Type=「week」 限制用戶必須輸入周類型 

 Type=「datetime-local」 選取本地時間 Type=」date」

• 新增表單屬性

required 監測是否爲空。

 min 最小

 max 最大

 step 步幅 肯定一個法定值。 -3 0 3 6 9

 list 必須結合datalist標籤，綁定datalist id名稱。

 autocomplete 是否自動提示信息 屬性值 on off 

 placeholder 文本框的提示信息 

 autofocus 自動聚焦。一個頁面只能由一個。

 pattern 後面的屬性值是一個正則表達式。

 novalidate 取消驗證 

 multiple 選擇（上傳）多個

新增表單標籤

• output

<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input id="a" type="range" min="0" max="100">100+ <input id="b" type="text" value="50">= <output name="x" for="a b"></output> </form>複製代碼

• datalist 必須和list屬性結合使用。作提示信息。

<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.W3School.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>複製代碼

本文摘自知乎號：千鋒HTML5學院

原文連接：HTMLCSS學習筆記（十三）-- HTML5基礎