前端學習系列-html5

一. html5 標籤

1.HTML 5的DTD聲明爲:

<!doctype html>
<!DOCTYPE html > 等也是正確的,因爲HTML語法是不區分大小寫的。

在編寫HTML5文檔時,要求指定文檔類型,以確保瀏覽器能在HTML5的標準模式下進行渲染。
2.新增的HTML5標籤

2.1 結構標籤:(塊狀元素) 有意義的div(新的結構標籤帶來的是網頁佈局的改變及提升對搜索引擎的友好)
	
<article>       標記定義一篇文章
	
<header>        標記定義一個頁面或一個區域的頭部
 	
<nav> 		標記定義導航鏈接
	
<aside> 	標記定義頁面內容部分的側邊欄
	
<hgroup>	標記定義文件中一個區塊的相關信息
	
<figure> 	標記定義一組媒體內容以及它們的標題	
	
<figcaption>	標籤定義 figure 元素的標題。
	
<footer> 	標記定義一個頁面或一個區域的底部
	
<dialog>	標記定義一個對話框(會話框)類似微信

<section>	標記定義一個區域
2.2 多媒體交互標籤(HTML5的多媒體標籤的出現意味着富媒體的發展以及支持不使用插件的情況下即可操作媒體文件,極大地提升了用戶體驗)
	
<video>    標記定義一個視頻
	
<audio>    標記定義音頻內容
 	
<source>   標記定義媒體資源

<canvas>   標記定義圖片
	
<embed>    標記定義外部的可交互的內容或插件 比如flash
2.3 Web應用標籤

<menu>      命令列表

<menuitem>  menu命令列表標籤 FF(嵌入系統)

<command>   menu標記定義一個命令按鈕

<meter>狀態標籤(實時狀態顯示:氣壓、氣溫)C、O

<progress>  狀態標籤 (任務過程:安裝、加載) C、F、O

<datalist>  爲input標記定義一個下拉列表,配合option F、O

<details>   標記定義一個元素的詳細內容 ,配合dt、dd   C
2.4 註釋標籤

<ruby> 標記定義 註釋或音標

<rp> 告訴那些不支持 Ruby元素的瀏覽器如何去顯示
 
<rt> 標記定義對ruby的註釋內容文本


2.5 其他標籤

<keygen> 標記定義表單裏一個生成的鍵值(加密信息傳送)O、F

<mark> 標記定義有標記的文本 (黃色選中狀態)

<output> 標記定義一些輸出類型,計算表單結果配合oninput事件


<time> 標記定義一個日期/時間 目前所有主流瀏覽器都不支持
3、刪除的HTML標籤

純表現的元素:
basefont,big,center,font, s,strike,tt,u;

對可用性產生負面影響的元素:
frame,frameset,noframes;

產生混淆的元素:
acronym ,applet,isindex,dir。
4、重新定義的HTML標籤

5、嶄新新的頁面佈局


二. html5音頻

HTML5能在完全脫離插件的情況下播放音視頻
但是不是所有格式都支持。
HTML5支持的視頻格式:
Ogg:   帶有Theora視頻編碼+Vorbis音頻編碼的Ogg文件           --支持的瀏覽器:F、C、O
MEPG4:   帶有H.264視頻編碼+AAC音頻編碼的MPEG4文件   --支持的瀏覽器: S、C
WebM:  帶有VP8視頻編碼+Vorbis音頻編碼的WebM格式      --支持的瀏覽器: I、F、C、O
1.1 <Video>的使用

1.2 Video的常見屬性

1.3 Video的API方法

1.4 Video的API屬性


1.5  Video的常用事件


1.6  <audio>的使用


1.7 audio的常見屬性


三.  canvas(沒看呢)

四.  智能表單

HTML5中爲了方便排版,可以使from中的表單標籤脫離from的嵌套。方法:from指定ID,所有表單標籤均添加from=id屬性。
<form action="" method="post" id="register" ></form>
   <input  type="text" name="user" form="register" />
   <select name="year" form="register" >
      <option value="1999"></option>
   </select>
   <textarea name="ext" form="register" ></textarea>
   <button type="submit" form="register" >提交</button>
1.1  智能表單的使用和規範



1.2 新增的表單屬性










發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章