web前端教程之HTMLCSS學習筆記HTML5基礎

　　 好程式設計師web 前端培訓分享 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 = "   />  

     < option   label = "Google"   value = "   />  

     < option   label = "Microsoft"   value = "   />   </ datalist >