Contenu connexe Similaire à Html5培训内容 (20) Html5培训内容2. Table of Contents
1,DOM
1.1,HTML DOM
1.2,document
2,HTML5
2.1,WHATWG与W3C
2.2,化简为繁
2.3,语义化标签
2.4,canvas
2.5,Web Storage
2.6,WebSockets
2.7,HTML5 Forms
2.8,音频和视频
2.9,Geolocation
2.10,Communication
2.11,拖放
2
4. DOM的发展史
DOM Level 1 1998 年 10 月 1 日
DOM Level 2 Core 2000 年 11 月 13 日
DOM Level 3 Core 2004 年 4 月 7 日
http://www.w3school.com.cn/w3c/w3c_dom.asp
4
7. HTML DOM 简介
• 整个文档是一个文档节点(document)
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点
(attributes)
• 注释属于注释节点
http://www.w3school.com.cn/htmldom/dom_nodes.asp 7
8. 1.1.1 节点(Node Object)
NodeType Named Constant
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE
8
9. HTMLElement
DOM Node
DOM Element
HTMLElement Object
HTMLHtmlElement HTMLHeadElement HTMLBodyElement ……
http://www.w3schools.com/jsref/default.asp 9
10. DOM Node
• 属性: nodeType, nodeName, parentNode,
childNodes, firstChild, nextSibling,
nodeValue, textContent,……
• 方法: cloneNode(), appendChild(),……
10
11. DOM Element
• 属性:id, className, attributes
• 方法: getAttribute(), setAttribute(),
removeAttribute (), hasAttribute (),
getElementsByTagName (),
getElementsByClassName (),
11
12. HTML Element
• 属性: title , lang , tabIndex , style ,
onclick , itemProp , itemType ,
draggable , ……
• 方法: click(),……
12
14. document
• 属性: URL,contentType,
documentElement,……
• 方法: getElementsByTagName(),
getElementsByClassName (),getElementById
(),createElement (), createTextNode
(),……
14
17. HTML的发展
HTML 1.0 1993年6月
HTML 2.0 1995年11月
HTML 3.2 1997年1月14日
HTML 4.0 1997年12月18日(HTML工作小组解散)
HTML 4.01 1999年12月24日(XHTML1.0)
HTML 5.0 2010年6月24日(草案)
http://zh.wikipedia.org/zh/HTML
17
21. • 新的简化的DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html> //可以直接用键盘打出来,而不用担心敲错
• 新的简化的字符集声明
<meta http-equiv="Content-Type" content="text/html; chartset=UTF-8">
<meta charset="UTF-8">
• 简单面强大的HTML5 API
21
22. 2.3 语义化标签
<header> <footer> <section> <article> <aside>
<figure> <figcaption> <nav>
<audio> <video>
使代码更清晰,SEO,减少无意义的DIV元素的使
用。
http://kb.cnblogs.com/page/111802/ HTML5标签使用的常见误区 22
23. 未知元素
• 所有浏览器都将未知元素渲染成 inline 的(display:inline ),
• article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
• IE:不会为未知元素应用任何 CSS 样式,并且会解释成没有子元素的空节
点,
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }
</script>
<![endif]-->
23
24. 2.4 canvas
• 本质上是一个位图画布
• 缺点:用canvas绘制出来的对象不属于页面DOM结构或者任何命名
空间。在动画,鼠标事件方面的处理会比较麻烦。
• 优点:不需要将所绘制的图像中的每个图元当做对象存储,因此执行
性能非常好。
<canvas height="200" width="200">替代内容</canvas>
var ctx = cument.querySelector("canvas").getContext("2d");
http://www.w3school.com.cn/html5/html5_ref_canvas.asp 24
25. API
void lineTo(x, y)//画直线
ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(300,300);ctx.stroke();
void rect(x, y, w, h)//画矩形
ctx.rect(50, 50, 200, 200);ctx.stroke(); //ctx.strokeRect(50, 50, 200, 200);
ctx.rect(50, 50, 200, 200); ctx.fill(); // ctx.fillRect(50, 50, 200, 200);
void arc(x, y, radius, startAngle, endAngle[, anticlockwise=false])//画圆
ctx.arc(100, 100, 50,0, Math.PI*2);ctx.fill(); //圆
ctx.arc(100, 100, 50,0, Math.PI);ctx.stroke(); //半圆
ctx.arc(100, 100, 50,0, Math.PI,true);ctx.stroke(); //逆时针
25
26. void fillText(text, x, y[, maxWidth]); //文本
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.font = " 20px sans-serif "; // (default 10px sans-serif)
ctx.moveTo(149.5,10);
ctx.lineTo(149.5,280);
ctx.stroke(); //画竖线
ctx.moveTo(10,79.5);
ctx.lineTo(280,79.5);
ctx.stroke(); //画横线
ctx.fillText("canvas", 150, 80);
ctx.moveTo(10,109.5);
ctx.lineTo(280,109.5);
ctx.stroke(); //画横线
ctx.fillText("canvas", 150, 110, 30);
26
27. void clearRect(x, y, w, h) //清除
ctx.clearRect(0, 0, 200, 200);
void drawImage(image, dx, dy) //图片
ctx.drawImage(image, 0, 0);
void drawImage(image, dx, dy, dw, dh) //图片,并指定缩放大小
ctx.drawImage(image, 100, 100,
image.width/2,
image.height/2);
void drawImage(image, sx, sy, sw, sh,
dx, dy, dw, dh)
27
28. void createLinearGradient(x0, y0, x1, y1) //线性渐变
void createRadialGradient(x0, y0, r0, x1, y1, r1) //径向渐变
void createPattern(image, repetition)//在指定的方向上重复指定的元素
var linearGradient = ctx.createLinearGradient(0,0,0,300);
linearGradient.addColorStop(0,'#ff0');
linearGradient.addColorStop(1,'#f00');
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,300,300);
ctx.lineWidth=10;
ctx.lineCap = "butt" // "butt", "round", "square" (default "butt")
ctx.lineJoin = "round" // "round", "bevel", "miter" (default "miter")
ctx.miterLimit = 10; //最大斜接长度
//ps:如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示
ctx.moveTo(10,10); ctx.lineTo(10,100);
ctx.lineTo(100,100); //比较直角(100,100)与锐角(100,10)
ctx.stroke(); 28
29. "butt", "round", "square“ "round", "bevel", "miter" 提示:只有当 lineJoin 属性为
lineCap lineJoin "miter" 时,miterLimit 才有效。
/***阴影***/
ctx.shadowOffsetX = 5; // (default 0)
ctx.shadowOffsetY = 5; // (default 0)
ctx.shadowBlur = 10; // (default 0) 模糊级数
ctx.shadowColor = "rgba(0,0,255,0.5)";
ctx.fillRect(10,10,100,100);
29
30. void quadraticCurveTo(cpx, cpy, x, y) //二次贝塞尔曲线
void bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) //三次方贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
ctx.moveTo(0,150);
ctx.bezierCurveTo(50,250, 200,0, 280,150);
ctx.stroke();
ctx.fillRect(50, 250,2,2);
ctx.fillRect(200,0,2,2);
30
31. State Stack
void save(); //push
void restore(); //pop
Transformations
void scale(x, y); //按x,y的比例进行缩放
void rotate(angle); //按角度旋转(0―2*Math.PI)
void translate(x, y) //平移
void transform(a,b,c,d,e,f) //替换当前的绘图矩阵
void setTransform(a,b,c,d,e,f) //同transform
ctx.save();
ctx.translate(150,150); //ctx.rotate(Math.PI/4);
//ctx.transform(1,0,0,1,0,0);
//ctx.strokeRect(20,20,200,200);
ctx.strokeRect(-100,-100,200,200);
ctx.restore();
http://shawphy.com/2011/01/transformation-matrix-in-front-end.html 31
32. 2.5 Web Storage
sessionStorage,localStorage
sessionStorage localStorage
数据会保存到存储它的窗口或标签页关闭 数据的生命期比窗口或浏览器的生命期长
时
(浏览器刷新时可以存储数据,浏览器关
闭时不可以)
数据只在构建它们的窗口或标签页内可见 数据可被同源的每个窗口或者标签页共享
与cookie的区别:
1,不会在服务器与浏览器之间来回来传送。
2,比cookie的存储空间大(5M)
3,跟cookie一样,数据最终会以字符串类型存储
32
33. interface Storage {
length;
DOMString key(index);
DOMString getItem(key);
DOMString setItem(key, value);
void removeItem(key);
void clear();
}
Web Storage 事件
window.addEventListener(“storage”, displayStorageEvent, true); //监听事件
interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString oldValue;
readonly attribute DOMString newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
localStorage .getItem(key);
localStorage[" key "];localStorage.key
33
34. 2.6 WebSockets
HTML5 WebSockets是HTML5中最强大的通信功能,它定义了一个
全双工通信信道,仅通过Web上的一个Socket即可进行通信。
WebSockets不仅仅是对常规HTTP通信的另一种增量加强,它更代表着
一次巨大的进步,对实时、事件驱动的Web应用程序而言更是如此。
ws://
wss://
一条消息以0x00字节开头,以0xFF结尾,中间数据采用UTF-8编码。
var webSocket = new WebSocket(url);
事件
onopen,onmessage,onclose, onerror
send() //向服务器发送数据。
close() //关闭连接
注意:FireFox,Chrome与Safari实现的WebSocket标准不一样。
http://www.w3.org/TR/websockets/ 34
35. 服务器 消息 消息 消息
轮询
浏览器
时间 50ms 100ms 150ms 200ms 50ms
服务器 消息 消息 消息 消息 消息
WebSocket
浏览器
时间 50ms 100ms 150ms 200ms 50ms
轮询和WebSocket应用程序间时延的对比
35
36. 2.7 HTML5 Forms
新增类型:tel,email,url,Search,range,number
未来支持的一些类型:color,datetime,datetime-local(不含时区), time, date,
week, month
新的属性:placeholder, autocomplete, autofocus, spellcheck, list(与
datalist元素组合使用),min, max, step, required
新标签:< progress >
36
37. • 表单验证
• var valCheck = document.myForm.myInput.validity; //获取表单元素的
ValidityState对象,该对象包含了对所有八种验证状态的引用以及最终
的验证结果。
• valCheck.valid; //所有验证都通过返回true
• 任何表单元素都有八个可能的验证约束条件。当所有8个约束条件都
返回false时,valid返回true
1、valueMissing
目的:确保表单控件中的值已填写
用法:在表单控件中将required特性设置为true
示例: <input type=“text” name=“myText” required />
2、typeMismatch
目的:保证控件值与预期类型相匹配
用法:指定表单控件的type特性值
3、patternMismath
目的:根据表单控件上设置的格式规则验证输入是否为有效格式。
用法:在表单控件上设置pattern特性,并赋予适当的匹配规则。
示例:<input type=“number” name=“creditcardnumber” pattern=“*0-
9+,16-”/>
37
38. 4、tooLong
目的:避免输入值包含过多字符
用法:在表单控件上设置maxLength特性
5、rangeUnderflow
目的:限制型控件的最小值。
用法:为表单控件设置min特性,并赋予允许的最小值。
6、rangeOverflow
目的:限制数值型控件的最大值。
用法:为表单控件设置max特性,并赋予允许的最大值。
7、stepMismatch
目的:确保输入值符合min、max及step设置。
用法:为表单控件设置step特性,并指定数值的增量。
8、customError
目的:处理应用代码明确设置及计算产生的错误。
用法:调用setCustomValidity(message)将表单控件置于customError状
态。
38
40. 2.8 音频和视频
• <audio> <video>
• 优点:原生支持,不使用插件
• 缺点:1,受到HTTP跨源资源共享的限制;2,全屏视频无法通过脚本
控制;3,各浏览器支持的视频格式不一样;4,HTML无法实现数字
版权加密
ps:HTML5的媒体标签内建了一套机制来挑选最合适在浏览器中播放
的内容类型。
• controls //显示控制条
• autoplay //自动播放
• loop //循环
• preload //预加载
• void load()
• void play()
• void pause()
• DOMString canPlayType(DOMString type) //测试是否支持给定的MIME
类型的文件,返回"", "maybe", "probably“
40
41. 子元素
• //type='video/mp4; codecs="vp8, vorbis"' type有三部分内容,容器格式,
视频编解码器,音频编解码器
• <source src=“” type=“”/> //备用来源,浏览器可以对这些来源进行
识别,如果都支持会选择第一个来源
• <track src="" /> //字幕
• //后备
• <object data="videoplayer.swf" type="application/x-shockwave-flash">
• <param name="movie" value="video.swf"/>
• </object>
41
42. 2.9 Geolocation
• Location Based Service(LBS)
• navigator.geolocaion.getCurrentPosition(
udpateLocation,//successCallback
handleLocationError,//errorCallback
{enableHighAccuracy:false,//高精度
timeout:Infinity, //超时
maximumage:0} //有效期
);
//可选参数
enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当
开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更
精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久
再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。
42
43. function updateLocation(position){
var coords = position.coords;
coords.latitude //纬度
coords.longitude //经度
coords.accuracy //准确度,(m)
/*可能会返回null的属性*/
coords.altitude //高度,(m)
coords.altitudeAccuracy //高度的准确度,(m)
coords.heading //运动的方向,相对于正北方向的角度
coords.speed //地面速度,(m/s)
}
43
44. function handleLocationError(error){
switch(){
case 0: //UNKNOWN_ERROR
case 1: //PERMISSION_DENIED
case 2: //POSITION_UNAVAILABLE
case 3: //TIMEOUT
}
}
ps:备用方案google Gears;geo.js是一个使用MIT协议的开源JavaScript库,
它封闭了W3C标准、Gears以及移动平台所提供的各种不同类型的地理
位置API,提供了统一调用接口。
44
47. 2.10.2 XMLHttpRequest Level 2
XMLHttpRequest XMLHttpRequest Level 2
* 只支持文本数据的传送,无法用来读 * 可以设置HTTP请求的时限。
取和上传二进制文件。 * 可以使用FormData对象管理表单数据。
* 传送和接收数据时,没有进度信息, * 可以上传文件。
只能提示有没有完成。 * 可以请求不同域名下的数据(跨域请
* 受到"同域限制"(Same Origin Policy),求 CORS)。
只能向同一域名的服务器请求数据。 * 可以获取服务器端的二进制数据。
* 可以获得数据传输的进度信息。
浏览器检测:
var xhr = new XMLHttpRequert();
if (typeof xhr.withCredentials === undefined) {
alert("Your browser does not support cross-origin XMLHttpRequest");
}
IE:XDomainRequest
http://www.w3.org/TR/XMLHttpRequest2/#interface-xmlhttprequest 47
48. interface XMLHttpRequest : XMLHttpRequestEventTarget {
readyState;
onreadystatechange;
// request
void open(method, url, async, user, password);
void setRequestHeader(header, value);
long timeout; //超时触发ontimeout事件
boolean withCredentials;
XMLHttpRequestUpload upload;
void send();
void send(ArrayBuffer data); //Typed Array
void send(Blob data); //二进制文件(图片)
void send(Document data);
void send(DOMString? data);
void send(FormData data);
void abort();
48
49. // response
readonly status; //服务器返回的状态码,等于200表示一切正常。
readonly statusText; //服务器返回的状态文本。
XMLHttpRequestResponseType responseType; //设置返回类型
readonly any response;
readonly DOMString responseText; //服务器返回的文本数据
readonly Document responseXML; //服务器返回的XML格式的数据
DOMString getResponseHeader(header);
DOMString getAllResponseHeaders();
void overrideMimeType(mime);
}
49
50. interface XMLHttpRequestEventTarget:EventTarget { // event handlers
Function? onloadstart; //传输开始
Function? onprogress; //进度信息。
Function? onabort; //传输被用户取消。
Function? onerror; //传输中出现错误。
Function? onload; //传输成功完成。
Function? ontimeout; //超时
Function? onloadend; //传输结束,但是不知道成功还是失败。
}
var oReq = new XMLHttpRequest(); //例:接收二进制数据
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {// Note: not oReq.responseText
var blob = new Blob([oReq.response], {type: "image/png"});
};
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data
50
(Sending and Receiving Binary Data)
51. interface ProgressEvent : Event {
readonly attribute boolean lengthComputable;
readonly attribute unsigned long long loaded;
readonly attribute unsigned long long total;
}
例:
xhr.onprogress = function (e) { // xhr.upload.onprogress
var total = e.total; //待发送数据总量
var loaded = e.loaded; //已发送数据问题
if (e.lengthComputable) {//数据总量是否已知(流式HTTP中可能无法获
知数据总量)
var percentComplete = e.loaded / e.total; //
}
}
51
54. • 事件流
• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend
54
55. 拖放事件流
中间元素 旋转目标
拖动源
(不放置) (放置)
drag
dragstart dragover dragover
dragenter
dragenter dragenter drog
dragend dragleave dragleave
55
56. 传输和控制
• DataTransfer对象
interface DataTransfer{
attribute DOMString dropEffect;
attribute DOMString effectAllowed;
readonly attribute DataTransferItemList items;
void setDragImage(Element image, long x, long y);
/* old interface */
readonly attribute DOMString[] types;
DOMString getData(DOMString format);
void setData(DOMString format, DOMString data);
void clearData(optional DOMString format);
readonly attribute FileList files;
}
56
57. dropEffect: //设置或获取当前执行操作的类型
effectAllowed: //允许操作的类型,各种类型视觉效果不一样
items: //返回所有项及其相关格式的列表
setDragImage(image, x, y): //设置显示在图像,或元素
types: //以数组形式返回所有当前注册的格式
getData(format): //获取指定类型的数据项
setData(format, data): //设置一个MIME类型的数据,只能在dragstart
设置
clearData([format]): //清除指定MIME类型的数据,或全部
files: //返回与放置相关的所有文件
获取DataTransfer对象: event.dataTransfer
对于dropEffect、effectAllowed属性使用的几个注意的地方:
一般的时候我们在ondragstart事件中去设置effectAllowed值,ondragover
事件中指定dropEffect值。其 中如果effectAllowed属性设置为none,则不
允许拖动,如果dropEffect属性设置为none,则不允许拖放到目标元素中。
57
58. HTML5还包括
• Web Workers
• File API
• 离线Web应用
• 浏览器数据库
• 微数据,微格式
• 服务器发送事件
• custom data attribute
• ……
58