• Like
  • Save
Html5培训内容
Upcoming SlideShare
Loading in...5
×
 

Html5培训内容

on

  • 912 views

 

Statistics

Views

Total Views
912
Views on SlideShare
883
Embed Views
29

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 29

http://htkar.wordpress.com 27
http://my.51job.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5培训内容 Html5培训内容 Presentation Transcript

    • @余军 1
    • Table of Contents1,DOM 1.1,HTML DOM 1.2,document2,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
    • 1、 DOMHTML DOM 定义了访问和操作 HTML文档的标准方法。 3
    • 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
    • 1.1 HTML DOM 5
    • DOM树 6
    • HTML DOM 简介• 整个文档是一个文档节点(document)• 每个 HTML 标签是一个元素节点• 包含在 HTML 元素中的文本是文本节点• 每一个 HTML 属性是一个属性节点 (attributes)• 注释属于注释节点http://www.w3school.com.cn/htmldom/dom_nodes.asp 7
    • 1.1.1 节点(Node Object)NodeType Named Constant1 ELEMENT_NODE2 ATTRIBUTE_NODE3 TEXT_NODE4 CDATA_SECTION_NODE5 ENTITY_REFERENCE_NODE6 ENTITY_NODE7 PROCESSING_INSTRUCTION_NODE8 COMMENT_NODE9 DOCUMENT_NODE10 DOCUMENT_TYPE_NODE11 DOCUMENT_FRAGMENT_NODE12 NOTATION_NODE 8
    • HTMLElement DOM Node DOM Element HTMLElement ObjectHTMLHtmlElement HTMLHeadElement HTMLBodyElement …… http://www.w3schools.com/jsref/default.asp 9
    • DOM Node• 属性: nodeType, nodeName, parentNode, childNodes, firstChild, nextSibling, nodeValue, textContent,……• 方法: cloneNode(), appendChild(),…… 10
    • DOM Element• 属性:id, className, attributes• 方法: getAttribute(), setAttribute(), removeAttribute (), hasAttribute (), getElementsByTagName (), getElementsByClassName (), 11
    • HTML Element• 属性: title , lang , tabIndex , style , onclick , itemProp , itemType , draggable , ……• 方法: click(),…… 12
    • 1.2 documentDOM树的根节点是一个Document 对象 13
    • document• 属性: URL,contentType, documentElement,……• 方法: getElementsByTagName(), getElementsByClassName (),getElementById (),createElement (), createTextNode (),…… 14
    • 2、HTML 5 15
    • HTML起源• 1980年,蒂姆·伯纳斯-李为使世界各地的物 理学家能够方便的进行合作研究,创建了 使用于其系统的HTML。• 两个浏览器,IE,Netscape 16
    • 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
    • HTML基本结构<html> <head> <title></title> </head> <body> <body></html> 18
    • 2.1 WHATWG与W3C• WHATWG:2004年6月,Web浏览器生产厂 商和一些相关团体形成的一个松散的、非 正式的协作组织,他们改进的目标是创建 Web 应用程序 Web applications 1.0• 2006年10月,W3C将和WHAT小组合作来开 发下一代HTML。• 2009年10月,W3C解散了XHTML 2工作小组。 19
    • 2.2 化简为繁• 以浏览器原生能力替代复杂的JavaScript代码document.getElementById,document.getElementByName,document.getElem entByTagName==》document.querySelector,document.querySelectorAll• <link rel="stylesheet" href="css/styles.css“ type=“text/css”/> <script src="js/scripts.js"></script> 20
    • • 新的简化的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
    • 2.3 语义化标签<header> <footer> <section> <article> <aside><figure> <figcaption> <nav><audio> <video>使代码更清晰,SEO,减少无意义的DIV元素的使 用。http://kb.cnblogs.com/page/111802/ HTML5标签使用的常见误区 22
    • 未知元素• 所有浏览器都将未知元素渲染成 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
    • 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
    • APIvoid 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
    • 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
    • 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
    • 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
    • "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
    • 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
    • State Stack void save(); //push void restore(); //popTransformations 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
    • 2.5 Web StoragesessionStorage,localStorage sessionStorage localStorage数据会保存到存储它的窗口或标签页关闭 数据的生命期比窗口或浏览器的生命期长时(浏览器刷新时可以存储数据,浏览器关闭时不可以)数据只在构建它们的窗口或标签页内可见 数据可被同源的每个窗口或者标签页共享与cookie的区别:1,不会在服务器与浏览器之间来回来传送。2,比cookie的存储空间大(5M)3,跟cookie一样,数据最终会以字符串类型存储 32
    • 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
    • 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
    • 服务器 消息 消息 消息轮询 浏览器 时间 50ms 100ms 150ms 200ms 50ms 服务器 消息 消息 消息 消息 消息WebSocket 浏览器 时间 50ms 100ms 150ms 200ms 50ms 轮询和WebSocket应用程序间时延的对比 35
    • 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
    • • 表单验证• var valCheck = document.myForm.myInput.validity; //获取表单元素的 ValidityState对象,该对象包含了对所有八种验证状态的引用以及最终 的验证结果。• valCheck.valid; //所有验证都通过返回true• 任何表单元素都有八个可能的验证约束条件。当所有8个约束条件都 返回false时,valid返回true1、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
    • 4、tooLong 目的:避免输入值包含过多字符 用法:在表单控件上设置maxLength特性5、rangeUnderflow 目的:限制型控件的最小值。 用法:为表单控件设置min特性,并赋予允许的最小值。6、rangeOverflow 目的:限制数值型控件的最大值。 用法:为表单控件设置max特性,并赋予允许的最大值。7、stepMismatch 目的:确保输入值符合min、max及step设置。 用法:为表单控件设置step特性,并指定数值的增量。8、customError 目的:处理应用代码明确设置及计算产生的错误。 用法:调用setCustomValidity(message)将表单控件置于customError状 态。 38
    • 验证反馈只要发生表单验证(不管是在提交表单时,还是直接调用checkValidity函数),所有未通过验证的表单都会接收到一个invalid事件。 39
    • 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
    • 子元素• //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
    • 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
    • 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
    • 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
    • 2.10 Communication• 2.10.1 跨文档消息通信• 2.10.2 XMLHttpRequest Level 2 45
    • 2.10.1 跨文档消息通信可以确保iframe,标签页,窗口间安全地进行跨源通信。window.postMessage(message //要发送的数据 , targetOrigin //消息传送的目的地 [, transfer ] )interface MessageEvent : Event { readonly attribute any data; readonly attribute DOMString origin; readonly attribute DOMString lastEventId; readonly attribute (WindowProxy or MessagePort)? source; readonly attribute MessagePort[]? ports;}; 46
    • 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:XDomainRequesthttp://www.w3.org/TR/XMLHttpRequest2/#interface-xmlhttprequest 47
    • 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
    • // 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
    • 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)
    • 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
    • 使用FormData对象管理表单数据[Constructor,Constructor(HTMLFormElement form)]interface FormData { void append(DOMString name, Blob value, optional DOMString filename); void append(DOMString name, DOMString value);} 用法var formData = new FormData ();var formData = new FormData (document.forms[o]);xhr.send(formData); 52
    • 2.11 拖放已经存在的拖放操作? 53
    • • 事件流• dragstart• drag• dragenter• dragleave• dragover• drop• dragend 54
    • 拖放事件流 中间元素 旋转目标 拖动源 (不放置) (放置) dragdragstart dragover dragoverdragenter dragenter dragenter drog dragend dragleave dragleave 55
    • 传输和控制• 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
    • 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
    • HTML5还包括• Web Workers• File API• 离线Web应用• 浏览器数据库• 微数据,微格式• 服务器发送事件• custom data attribute• …… 58
    • 附录检测技术1、检测全局对象是否拥有特定的属性,(navigator)2、创建一个元素,然后检测该元素的DOM对象是否特定的属性。 (canvas)3、创建一个元素,然后检测这个元素的DOM对象是否拥有特定的方法, 同时调用这个方法检查综的返回值。(支持的视频格式)4、创建一个元素,给这个元素的DOM对象设定特定的属性值,然后检查 浏览器是否保留了该属性值。(input type)ps:Modernizr――一个HTML5特性检测库 59