1.1.html5的新特性
- 用于繪畫的canvas元素
- 用于媒介回放的video和audio元素
- 對(duì)本地離線存儲(chǔ)的更好支持
- 新的特殊內(nèi)容元素磅叛，比如article,footer,header,nav,section
- 新的表單控件径簿，比如calendar,date,time,email,url,search
2.1.視頻類
- 當(dāng)前，video元素支持三種視頻格式：Ogg,MPEG4,WebM
- 在HTML5中顯示視頻，通過(guò)以下代碼
<video src="movie.ogg" contrlos="controls">
</video>
- tips:
- control屬性提供添加播放、暫停、音量控件
- 也可以增加對(duì)于寬高的設(shè)定咆爽，通過(guò)width="400" height="400"
-
<video>和</video>之間可以插入內(nèi)容以供不支持video元素的瀏覽器顯示 - 對(duì)于不同瀏覽器存在的支持視頻格式問(wèn)題，也可以通過(guò)添加多條鏈接來(lái)預(yù)防置森，代碼如下
<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>
- 【video】標(biāo)簽的屬性
- autoplay [autoplay="autoplay" 自動(dòng)播放]
- controls [controls="controls" 顯示控件]
- height [height="300" 設(shè)置高度]
- width [width="320" 設(shè)置寬度]
- loop [loop="loop" 重復(fù)播放]
- preload [preload="auto" 頁(yè)面加載后載入視頻斗埂，若設(shè)置了autoplay屬性則忽略該屬性]
- src [src="movie.ogg" 規(guī)定要播放的視頻的url，也可以使用<source>標(biāo)簽來(lái)設(shè)置]
- HTML5 video + DOM 進(jìn)行控制
3.1.音頻類
-
<audio>標(biāo)簽類似與<video>標(biāo)簽凫海。 - 使用代碼如下
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
4.1.HTML5拖放（drag和drop）
- 簡(jiǎn)單拖放事件的分析
- 設(shè)置元素為可拖放
<img draggable="true"> - 拖動(dòng)什么（ondragstart和setData()）呛凶，然后規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么
- ondraggable屬性調(diào)用一函數(shù)drag(event)行贪，其規(guī)定了被拖動(dòng)的數(shù)據(jù)
- dataTransfer.setData()設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值
- 如下例子中漾稀，數(shù)據(jù)類型是"Text",值是可拖動(dòng)元素的id("drag1")
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
- 放到何處（ondragover），默認(rèn)的無(wú)法將數(shù)據(jù)或元素放置到其他元素中建瘫，所以如果需要設(shè)置允許放置崭捍，我們必須阻止對(duì)元素的默認(rèn)處理方式，即調(diào)用ondragover事件的
event.preventDefault() - 進(jìn)行放置（ondrop）
- 通過(guò)
dataTransfer.getdata("Text")方法獲得被拖的數(shù)據(jù)啰脚，返回在setData()中設(shè)置為相同類型的任何數(shù)據(jù)殷蛇。 - 被拖數(shù)據(jù)是被拖元素的id（“drag1”）
function drop(event)
{
event.preventDataFault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
簡(jiǎn)單拖放事件的代碼如下
<!doctype html>
<html>
<head>
<script type="text/javascript">
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
- 操作實(shí)例（一個(gè)圖片拖到一個(gè)里面）：
<!doctype>
<html>
<head>
<style type="text/css">
#div1 {
width:198px;
height:66px;
padding:10px;
border:1px;
border-style;solid;
}
</style>
<script type="text/javascript">
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>請(qǐng)將圖片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</body>
</html>
- 來(lái)回拖放圖片
<!DOCTYPE>
<html>
<head>
<style type="text/css">
#div1, #div2
{
float:left;
width:198px;
height:66px;
margin:10px;
padding:10px;
border:1px;
border-style:solid;
}
</style>
<script type="text/javascript">
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
5.1.canvas
- canvas擁有多種繪制路徑、矩形橄浓、圓形晾咪、字符以及添加圖像的方法
- 添加canvas元素規(guī)定元素的id、寬度和高度
<canvas id="myCanvas" width="200" height="100"></canvas> - canvas元素本身沒(méi)有繪圖能力贮配，所有繪制工作必須在javascript內(nèi)部完成
- 例如
- javascript使用id來(lái)尋找canvas元素
var c=document.getElementById("myCanvas"); - 然后創(chuàng)建context對(duì)象。getContext（“2d”）對(duì)象是內(nèi)建的HTML5對(duì)象塞赂，擁有多種繪制路徑泪勒、矩形、圓形、字符以及添加圖像的方法
var cxt=c.getContext("2d"); - 繪制一個(gè)紅色的矩形圆存。fillStyle將其染成紅色叼旋，fillRect規(guī)定了形狀、位置和尺寸
- javascript使用id來(lái)尋找canvas元素
cxt.fillstyle="#ff0000";
cxt.fillRect(0,0,150,75);
<script type="text/script">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
6.1.SVG
- svg指可伸縮矢量圖形scalable vector graphics
- svg使用xml格式定義圖形
- svg是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
7.1.svg與canvas的比較
- svg是一種使用xml描述2d圖形的語(yǔ)言沦辙，其基于xml夫植，即svg dom中的每個(gè)元素都是可用的，可為某個(gè)元素附加javascript事件處理器油讯，在svg中详民，每個(gè)被繪制的圖形均被視為對(duì)象。若svg對(duì)象的屬性發(fā)生變化陌兑，那么瀏覽器能自動(dòng)重現(xiàn)圖形
- canvas通過(guò)JavaScript繪制2D圖形沈跨，為逐像素進(jìn)行渲染，一旦圖形被繪制完成兔综，它就不會(huì)繼續(xù)得到瀏覽器關(guān)注饿凛，若其位置發(fā)生變化，則整個(gè)場(chǎng)景也需要重新繪制包括任何或許已被圖形覆蓋的對(duì)象
| Canvas | SVG |
|---|---|
| 依賴分辨率 | 不依賴分辨率 |
| 不支持事件處理器 | 支持事件處理器 |
| 弱的文本渲染能力 | 最適合帶有大型渲染區(qū)域的應(yīng)用程序（如谷歌地圖） |
| 能夠以.png或.jpg格式保存結(jié)果圖形 | 復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用DOM的應(yīng)用都不快） |
| 最適合圖像密集型的游戲软驰，其中的許多對(duì)象會(huì)被頻繁重繪 | 不適合游戲應(yīng)用 |
8.1.地理定位
- 使用getCurrentPosition()來(lái)獲得用戶的位置
9.1.Web存儲(chǔ)
- HTML5提供兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法
- localStorage 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage 針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)
- HTML5使用JavaScript來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)
10.1.應(yīng)用程序緩存Application Cache
- 通過(guò)創(chuàng)建cache manifest文件涧窒，來(lái)輕松的創(chuàng)建web應(yīng)用的離線版本
11.1.Web Workers
- Web Workers是運(yùn)行在后臺(tái)的JavaScript，獨(dú)立于其他腳本锭亏。
12.1.服務(wù)器發(fā)送事件
- HTML5服務(wù)器發(fā)送事件（server-sent event）允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器的更新纠吴。
剩下的未看內(nèi)容
修改于20171017
