h5新特性
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
video視頻
<video> 標簽的屬性
| 屬性 | 值 | 描述 |
| autoplay | autoplay | 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 如果出現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。 |
| preload | preload |
如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預備播放。
如果使用 "autoplay"，則忽略該屬性。
|
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |
<video src="movie.ogg" controls="controls">
</video>
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
audio音頻(同video類似)
拖放
拖放（Drag 和 drop）是 HTML5 標準的組成部分,任何元素都可以被拖放。
為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true" />
拖動什么 - ondragstart 和 setData()
然后，規(guī)定當元素被拖動時，會發(fā)生什么。
在上面的例子中，ondragstart 屬性調(diào)用了一個函數(shù)，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)。
dataTransfer.setData() 方法設置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中，數(shù)據(jù)類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)。
默認地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
進行放置 - ondrop
當放置被拖數(shù)據(jù)時，會發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
canvas 元素用于在網(wǎng)頁上繪制圖形。(使用 JavaScript 在網(wǎng)頁上繪制圖像)
canvas和Svg
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。
Canvas
Canvas 通過 JavaScript 來繪制 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
Canvas 與 SVG 的比較
下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合游戲應用
地理定位
- 簡單的地理定位實例，可返回用戶位置的經(jīng)度和緯度。
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
例子解釋：
- 檢測是否支持地理定位
- 如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。
- 如果getCurrentPosition()運行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象
- showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度
- getCurrentPosition() 方法的第二個參數(shù)用于處理錯誤。它規(guī)定當獲取用戶位置失敗時運行的函數(shù)
geolocation方法
watchPosition() - 返回用戶的當前位置，并繼續(xù)返回用戶移動時的更新位置（就像汽車上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
Input類型
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
表單元素
-
datalist 元素
datalist 元素規(guī)定輸入域的選項列表。
列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的。
如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：
Webpage: <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>
-
keygen 元素
keygen 元素的作用是提供一種驗證用戶的可靠方法。
keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。
目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
-
output 元素
output 元素用于不同類型的輸出，比如計算或腳本輸出：
<output id="result" onforminput="resCalc()"></output>
表單屬性
- autoComplete
- autofocus
- pattern
- novalidate
- require
- placeholder
- list
- form
css3
邊框
- box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述
| h-shadow | 必需。水平陰影的位置。允許負值。
| v-shadow | 必需。垂直陰影的位置。允許負值。
| blur | 可選。模糊距離,模糊程度。
| spread | 可選。陰影的尺寸
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。
| inset | 可選。將外部陰影 (outset) 改為內(nèi)部陰影。
- border-radius：圓角
- border-image:url() width outset repeated(rounded stretched);
背景
- background-size:
background-size: length|percentage|cover|contain;
- cover:擴展背景圖，以使背景圖像完全覆蓋背景區(qū)域，背景圖部分可能無法顯示載背景定位區(qū)域中。
- contain按寬高的原本比例把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域。
- background-origin:屬性規(guī)定 background-position 屬性相對于什么位置來定位。
如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。
background-origin: padding-box|border-box|content-box; - background-clip:規(guī)定背景的繪制區(qū)域（即裁剪到那個區(qū)域）
background-clip: border-box|padding-box|content-box;
文本效果
- test-shadow:
- word-wrap:允許對長的不可分割的字符串進行分割換行。
字體
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
2D轉換
- translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據(jù)給定的 left（x 坐標） 和 top（y 坐標） 位置參數(shù) - rotate() 方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。 - scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：
scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。 - skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：
skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。 - transform屬性和transform-origin屬性
- transform：向元素應用2d或3d轉換
- transform-origin:改變被轉換元素的位置。
3D轉換
rotate:旋轉
perspective：元素透視程度
過渡屬性(用于從一種狀態(tài)到另一種狀態(tài))
| 屬性 | 描述 | CSS |
| transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規(guī)定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時開始。默認是 0。 | 3 |
動畫
關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
CSS3 動畫屬性
| 屬性 | 描述 | CSS |
| [@keyframes] | 規(guī)定動畫
| [animation]| 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性
| [animation-name] | 規(guī)定 @keyframes 動畫的名稱。
| [animation-duration]| 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0
| [animation-timing-function] | 規(guī)定動畫的速度曲線。默認是 "ease"。
| [animation-delay] | 規(guī)定動畫何時開始。默認是 0。
| [animation-iteration-count] | 規(guī)定動畫被播放的次數(shù)。默認是 1。
| [animation-direction]| 規(guī)定動畫是否在下一周期逆向地播放。默認是 "normal"
| [animation-play-state]| 規(guī)定動畫是否正在運行或暫停。默認是 "running"。
| [animation-fill-mode] | 規(guī)定對象動畫時間之外的狀態(tài)。
多列
| 屬性 | 描述 | CSS |
| [column-count]| 規(guī)定元素應該被分隔的列數(shù)。
| [column-fill]| 規(guī)定如何填充列
| [column-gap] | 規(guī)定列之間的間隔。
| [column-rule] | 設置所有 column-rule-* 屬性的簡寫屬性。
| [column-rule-color]| 規(guī)定列之間規(guī)則的樣式。
| [column-rule-width] | 規(guī)定列之間規(guī)則的寬度。
| [column-span] | 規(guī)定元素應該橫跨的列數(shù)。 | 規(guī)定列的寬度。
| [columns] | 規(guī)定設置 column-width 和 column-count 的簡寫屬性。
apperance設置元素外觀
appearance: normal|icon|window|button|menu|field;
值 描述
normal 將元素呈現(xiàn)為常規(guī)元素。
icon 將元素呈現(xiàn)為圖標（小圖片）。
window 將元素呈現(xiàn)為視口。
button 將元素呈現(xiàn)為按鈕。
menu 將元素呈現(xiàn)為一套供用戶選擇的選項。
field 將元素呈現(xiàn)為輸入字段。
box-sizing:
box-sizing: content-box|border-box|inherit;
icon 屬性為創(chuàng)作者提供了將元素設置為圖標等價物的能力。
除非 "content" 屬性的值被設置為 "icon"，否則元素的圖標不會被使用。
icon: auto|URL|inherit;
resize:
語法
resize: none|both|horizontal|vertical;
值 描述
none 用戶無法調(diào)整元素的尺寸。
both 用戶可調(diào)整元素的高度和寬度。
horizontal 用戶可調(diào)整元素的寬度。
vertical 用戶可調(diào)整元素的高度。
