初识 Html5
- 2. HTML5 的诞生 1997年12月，W3C发布 HTML4.0 1998年12月，W3C发布 XHTML1.0 2001年5月，W3C发布 XHTML1.1 2004年6月，WHATWG 成立 MIME: application/xhtml+xml MIME: text/html
- 4. HTML5 的诞生 1997年12月，W3C发布 HTML4.0 1998年12月，W3C发布 XHTML1.0 2001年5月，W3C发布 XHTML1.1 2004年6月，WHATWG 成立 2006年10月，W3C 宣布与 WHATWG 合作开发下一代 HTML —— HTML5
- 10. HTML5: 兼容性和存在即合理 新特性的平滑过渡，向后兼容 <input type="search" placeholder="请输入搜索关键字" /> 不支持 HTML5 的浏览器会将之解析为： <input type="text" /> 存在即合理 <div id="header"></div> <header> <article> <footer>
- 12. HTML5: 化繁为简 简化文档声明 <!DOCTYPE HTML> 简化字符集声明 <meta charset="UTF-8" /> 以浏览器原生能力代替复杂的Javascriptwindow.JSON、DOM Level 3 简单而强大的 HTML5 APIHTML5 表单、Selector API
- 17. <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>WOYO UED</title> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <header> <h1>WOYO UED</h1> <nav> <a href="#">Home</a> <a href="#">Product</a> <a href="#">About</a> </nav> </header>
- 18. <section> <article> <header> <h1>Article Title</h1> <time datetime="2011-02-25">February 25, 2011</time> </header> <p>Article Content...</p> </article><article> <header> <h1>Article Title</h1> <time datetime="2011-02-25">February 25, 2011</time> </header> <p>Article Content...</p> </article> </section> <footer> <p>© 2011 WOYO.COM</p> </footer> </body> </html>
- 20. DOM 结构 预想 article | + -- h1 | | | + -- 文本节点"Hello World！" + -- p | + -- 文本节点 "Touching HTML5" | + -- span | | | + -- 文本节点 "Enjoy Web" | + -- 文本节点 "." 实际（IE） article (无子节点) h1(article 的兄弟节点) | + --文本节点"Hello World！" p(h1的兄弟节点) | + -- 文本节点 "Touching HTML5" | + -- span | | | + -- 文本节点 "Enjoy Web" | + -- 文本节点 "."
- 21. HTML5 SHIV <script type="text/javascript"> var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','); for(var i = 0, len = html5.length; i < len; i++ ) { document.createElement(html5[i]); } </script> 在IE上，使用 javascript 创建一个虚假的 <article> 元素，IE就可以奇迹般地识别 <article> 标签了，并允许给他设定CSS样式。
- 22. HTML5 SHIV <!--[if lt IE 9]> <script src="http://static.woyo.com/js/public/util/html5.js"></script> <![endif]-->
- 23. 检测浏览器支持状况 function support_canvas(){ return !!document.createElement('canvas').getContext(); } Modernizr： <script src="modernizr.min.js"></script> <script type="text/javascript"> if(Modernizr.canvas){ //开始画图 }else{ //浏览器没有提供原始canvas } </script>
- 25. Canvas <canvas></canvas> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0,0); context.lineTo(300,300); context.strokeStyle = 'green'; //将这条线绘制到画布上 context.stroke(); context.restore();
- 26. Canvas <canvas></canvas> 注意： canvas 默认是一个 inline-block 元素 canvas 默认尺寸: 宽 300px，高 150px 使用CSS定义canvas尺寸只是将画布缩放 使用 width height 属性来定义画布尺寸<canvas width="300" height="300"></canvas> canvas 实例 http://www.theshodo.com
- 27. Video & Audio 视频标签 <video controls width="450" height="300"> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="movie.mp4" type='video/mp4'><embed src="http://player.youku.com/player.php/sid/XMjIyMTQxMDg0/v.swf" width="450" height="300" type="application/x-shockwave-flash"></embed> </video> video 实例 http://www.apple.com/html5/showcase/video/
- 28. Video & Audio 音频标签 <audio controls autoplay> <source src="music.ogg"></source> <source src="music.mp3"></source> <embed src="music.mp3" width="300" height="52"></embed> </audio> 注意： 由于音频/视频解码器专利的原因，目前各个浏览器对 Audio 和 Video 支持的文件格式还未达成统一的标准
- 29. Forms <input type="email" /> <input type="tel" /> <input type="url" /> <input type="search" /> <input type="range" /> <input type="date" /> <input type="time" /> … <input type="file" multiple /> <input … autofocus /> <input … autocomplete/>
- 31. Web Storage sessionStorage window.sessionStorage.setItem('myKey', 'myValue'); window.sessionStorage.getItem('myKey');window.sessionStorage.removeItem('myKey'); window.sessionStorage.myKey = 'myValue';window.sessionStorage['myKey'] = 'myValue'; sessionStorage: 使用此方式存储的数据只能在当前窗口中调用。
- 32. Web Storage localStorage window.localStorage.setItem('myKey', 'myValue'); window.localStorage.getItem('myKey');window.localStorage.removeItem('myKey'); window.localStorage.myKey = 'myValue';window.localStorage['myKey'] = 'myValue'; localStorage: 除非删除否则一直可用，相当于增强版的cookie (每个域拥有5M的存储空间) localStorage 实例 http://goo.gl/WVEFo
- 34. 离线Web应用 cache.manifest 文件 CACHE MANIFEST offline.html style.css script.js photo.jpg 注意： manifest 文件的 MIME类型必须为 text/cache-mainfest Apache 服务器配置 .htaccessAddType text/cache-mainfest .manifest
- 35. 更多 HTML5 Geolocation API Communication API WebSockets API Web Workers API Web SQL Database SVG …
- 36. HTML5 资源 HTML5 手册 http://www.w3school.com.cn/html5/index.asp Dive into HTML5 http://diveintohtml5.org/ HTML5 Gallery http://html5gallery.com/ GReader收藏 http://go.rpsh.net/gr-html5
