16.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聲明
 <!DOCTYPE html>不區分大小寫
  • 指定字符集編碼
  • 可省略標記的元素
  • 不允許寫結束標記的元素: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的出現消失了,這就是我們平時說的“語義”。

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

多媒體標籤

<video src=""></video> 
<audio src=""></audio>
 屬性

   controls屬性:如果出現該屬性,則向用戶顯示控件,比如播放按鈕。
   autoplay屬性:如果出現該屬性,則視頻在就緒後馬上播放。( 谷歌屏蔽了 )
   loop屬性:重複播放屬性。
   muted屬性:靜音屬性。
   poster屬性:規定視頻正在下載時顯示的圖像,直到用戶點擊播放按鈕。

 source
  <source> 標籤爲媒介元素(比如 <video> 和 <audio>)定義媒介資源。
  <source> 標籤允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
  <audio>
          <source type="audio/mpeg" src="./wangs/a.mp3"></source>
  </audio>
 Type屬性值:
   				用於視頻:video/ogg   video/mp4     video/webm
   				用於音頻: 
​						type="audio/mpeg"
​       					type="audio/ogg"
​        				type="audio/wav"
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章