揭秘Html5和Css3
Download as PPT, PDF18 likes2,281 views
该文档详细介绍了HTML5和CSS3的历史与发展，包括技术新特性、结构以及与浏览器的兼容性。文档还探讨了新元素、属性、以及表单支持的变化，以及CSS3的选择器、动画和布局属性。作者在文中分享了个人前端开发的经历，并提供了多个在线资源供进一步学习。
![<form action='/register' enctype="application/x-www-form+xml" method="post"> <p> <label for='name'>ID( 请使用 Email 注册 )</label> <input name='name' required type='email' /> <p> <label for='password'> 密码 </label> <input name='password' required type='password' /> <p> <label for='birthday'> 出生日期 </label> <input type='date' name='birthday' /> <p> <label for='gender'> 国籍 </label> <select name='country' data='countries.xml' ></select> <p> <label for='photo'> 个性头像 </label> <input type='file' name='photo' accept='image/*' /> <table> <thead> <td><button type="add" template="questionId" >+</button> 保密问题 </td> <td> 答案 </td> <td></td> </thead> <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3" > <td><input type="text" name="questions[questionId].q" /></td> <td><input type="text" name="questions[questionId].a" /></td> <td><button type="remove"> 删除 </button></td> </tr> </table> <p><input type='submit' value='send' class='submit' /></p> </form>](https://image.slidesharecdn.com/html5css3-091209001917-phpapp01/85/Html5-Css3-15-320.jpg)
![CSS3- 选择器 属性选择器 a[href$='.pdf'], a[href^='mailto'], a[class*=‘item’] 兄弟选择器 Div~img 伪类选择器 :nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even)](https://image.slidesharecdn.com/html5css3-091209001917-phpapp01/85/Html5-Css3-34-320.jpg)
![Thanks! Q&A Email: [email_address] MSN: luchaowu@hotmail.com](https://image.slidesharecdn.com/html5css3-091209001917-phpapp01/85/Html5-Css3-44-320.jpg)
揭秘Html5和Css3
- 1. 揭秘 HTML5 和 CSS3 鲁超伍 | Adam http://adamlu.com/ http://twitter.com/adamlu
- 2. 关于我 网名 Adam ，热爱互联网， 2004 年开始接触前端方面的东西，多年互联网前端开发经验，见证了前端开发这个行业的兴起。 现就职于淘宝网北京 UED （前端开发工程师），花名空雁。 追求卓越，不懈努力，做一个专业的前端开发工程师！ Stay Hungry, Stay Foolish!
- 3. 网站标准的简单历史 2001-2006 XHTML 1 Content CSS2.1 Presentation
- 4. 网站标准的简单历史 WHATWG ? Web Hypertext Application Technology Working Group W3C Word Wide Web Consortium 2004- Present
- 5. 网站标准的简单历史 200 7 - Present HTML 5 Content CSS3 Presentation
- 7. HTML 发展历史 1998 2000 2002 2004 2007 HTML 4.0 XHTML1 XHTML2 WHATG HTML 5
- 8. 支持 HTML5 的浏览器 Opera 9.5+ Cross-document messaging Server-sent events Web Forms 2.0 Canvas and video Safari 3.1+ <video> and <audio> tags Offline data storage API Webkit(Iphone/Chrome/Android/ Nokia s60/Palm's WebOS)
- 9. 支持 HTML5 的浏览器 FireFox 3.1+ offline storage and canvas Geolocation/Web Workers/ ContentEditable Gecko(more HTML5 APIS) Internet Explorer 8.0+ embed element and contentEditable attribute cross-document messaging
- 10. HTML5 技术概览 HTML5 新增和移除的元素 HTML5 基本布局 HTML5 对表单的支持 HTML5 DOM 变化 HTML5 的 Javascript APIs Canvas Video/Audio Drag&Drop Geolocation Application Cache Database Storage X-Document Messaging
- 11. HTML5 新增的元素 多媒体及交互式元素 video , audio... details , menu , c ommand... 结构元素 header , footer, section, article, nav ... 块级语义及行内元素 aside, figure, dialog ... time, meter, mark, progress ... 表单控件 email, url, datetime, number, range, color ... HTML5 新增的属性 contenteditable, contextmenu, data-*, hidden, item, itemprop, subject, role, aria-*, spellcheck, draggable, irrelevant, template , placeholder , autofocus, required, async, manifest ... HTML5 新增的事件 onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload ...
- 12. HTML5 移除的元素 移除的元素 font, center, strike, big, s, u, acronym, applet, dir ... 移除的属性 如 a , area , button , input , label , legend 和 textarea 元素的 accesskey 属性 如 link 和 a 元素的 rev 和 charset 属性 , link 元素的 target 属性 , td 的 scope 属性， script 元素的 language 属性 , body 元素的 alink ， link ， text 和 vlink 属性
- 13. HTML5 基本布局 HTML4 HTML5 <! DOCTYPE html> <htm lang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header> <h1></h1><h2></h2> </header> <nav> <ul><li></li><li></li></ul> </nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
- 14. HTML5 对表单的支持 新的控件类型 <input type="url | email |d ate |tel|search|datetime|date|month|week|datetime-local|number|range|color ">, <select data="http://domain/getoptions"></select> 文件上传控件 <input type="file" accept = "image/png" /> 重复的模型 add, remove, move-up, move-down 内建表单验证 <input type="email" required />, <input type="number" min=10 max=100 /> XML Submission application/x-www-form+xml
- 15. <form action='/register' enctype="application/x-www-form+xml" method="post"> <p> <label for='name'>ID( 请使用 Email 注册 )</label> <input name='name' required type='email' /> <p> <label for='password'> 密码 </label> <input name='password' required type='password' /> <p> <label for='birthday'> 出生日期 </label> <input type='date' name='birthday' /> <p> <label for='gender'> 国籍 </label> <select name='country' data='countries.xml' ></select> <p> <label for='photo'> 个性头像 </label> <input type='file' name='photo' accept='image/*' /> <table> <thead> <td><button type="add" template="questionId" >+</button> 保密问题 </td> <td> 答案 </td> <td></td> </thead> <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3" > <td><input type="text" name="questions[questionId].q" /></td> <td><input type="text" name="questions[questionId].a" /></td> <td><button type="remove"> 删除 </button></td> </tr> </table> <p><input type='submit' value='send' class='submit' /></p> </form>
- 17. HTML5 DOM 变化 getElementsByClassName Selector API document.querySelector() document.querySelectorAll() Traversal API .nextElementSibling .previousElementSibling .firstElementChild .lastElementChild .children
- 18. HTML5 的 Javascript APIs Web Forms2.0 Messaging Offline Applications History API Video&Audio Drag&Drop Undo Canvas Editable X-Domain Storage Geolocation Local Database
- 19. Video & Audio <video height="280" width="498" poster ="border.png" id="video"> <source src ="coldplay.mp4"> </video> <audio src ="music.oga" controls > <a href="music.oga">Download song</a> </audio>
- 20. Canvas <canvas> 是一个新的 HTML 元素，这个元素可以被 Script 语言 ( 通常是 JavaScript) 用来绘制图形。例如可以用它来画图、合成图象、或做简单的 ( 和不那么简单的 ) 动画。 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); context.fillStyle="rgb(0,0,200)"; context.fillRect(10, 10, 50, 50); context.save(); context.restore(); context.scale(x, y); context.rotate(angle); context.translate(x, y); ......
- 21. Drag&Drop 拖拽事件 : dragstart, dragend, dragenter, dragleave, dragover, drag, drop <div draggable="true" ondragstart="dragstartHandler(event)"></div> function dragstartHandler(e){ alert('dragstart'); }
- 22. Web Workers 让 Javascript 多线程，可以在后台做很多工作而不会阻断当前的浏览器 var w = new Worker('worker.js'); w.onmessage = function(event){ alert(event.data); } w.postMessage('run');
- 23. Web Workers //worker.js importScripts('xhr.js', 'db.js'); onmessage = function(event){ if(event.data == 'run'){ run(); } } function run(){ var data = doCrazyNumberCrunch(); postMessage(data); }
- 24. Geolocation navigator .geolocation .getCurrentPosition( success, error);
- 25. Application Cache <html manifest = "rubiks.manifest" > rubiks.manifest CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js #version 15 http://remysharp.com/demo/rubiks
- 26. Storage database storage( 客户端数据库 SQLite) WebKit 中已经实现 var database = openDatabase('db', '1.0'); database.executeSql('SELECT * FROM test', function(result){ database.executeSql('DROP TABLE test'); });
- 27. Storage key/val 存储 () sessionStorage(window based) localStorage(domain based) WebKit/IE8/Firefox 3.5 已经实现 .setItem(key, value) .getItem(key)
- 28. Cross-Document Messaging .postMessage (message, targetOrigin ) .onMessage(event) event.data == message document.getElementById('iframe').contentWindow.postMessage('my message' , 'http://adamlu2.com' ); window.addEventListener('message', function(e){ if(e.origion !== 'http://adamlu 1 .com'){ return; } alert(e.origion+' said: '+e.data); }, false);
- 30. CSS3 CSS3 DEMO
- 31. CSS 的发展历史 1996 1998 2001 CSS1.0 CSS2.0 CSS3.0 Cascading Style Sheets
- 32. 支持 CSS3 的浏览器 http://adamlu.com/Demo/Speech/Demo/CSS-Browser-Support.png
- 33. CSS3 技术概况 选择器 布局 样式 动画 其它
- 34. CSS3- 选择器 属性选择器 a[href$='.pdf'], a[href^='mailto'], a[class*=‘item’] 兄弟选择器 Div~img 伪类选择器 :nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even)
- 35. CSS3- 样式 圆角 border-radius: 3px -moz-border-radius-topleft -webkit-border-top-left-radius 阴影 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) text-shadow: 2px 2px #444, 3px 3px #555 自定义字体 @font-face{ font-family: Adam, src:url(adam.ttf); } p{font-family:Adam, serif;} 文本换行 word-wrap: normal|break-word
- 36. CSS3- 样式 边框背景 border-image: url(border.png) 27 27 27 27 round round; 渐变 background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat; 背景 background-size: 100px 50px; background-origin: content-box|border-box|padding-box; background-clip: border-box|padding-box
- 37. CSS3- 样式 透明 opacity: 0.5; RGBA color: rgba(0, 255, 0, 0.5); HSL/A color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5) 调整元素尺寸 resize: both|horizontal|vertical
- 38. CSS3- 布局 盒模型 box-sizing: content-box|border-box; 网格模型 column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black; CSS Table Display #content{display: table;} #main{display: table-cell; width:620px; padding-right: 22px;} #side{display: table-cell; width: 300px;} Outline outline-offset
- 39. CSS3- 动画 变换 transform: rotate(30deg); transform: scale(0.5, 2.0); transform: skew(-30deg); transform: translate(30px, 0); 过渡 transition: all 1s ease-out ; 动画 animation: greenPulse infinite ease-in-out 3s;
- 40. CSS3- 其它 媒体查询 .entry{color: red;} @media all and {min-width: 100em}{ .entry{color: black;} } 语音支持 voice-volume, voice-balance, voice-family
- 41. 浏览器前缀 Firefox: -moz-box-shadow Safari: -webkit-box-shadow Opera: -o-box-shadow IE: -ms-box-shadow
- 42. CSS3 应用原则 优雅降级 对于不支持 CSS3 的浏览器可以使用 Javascript 来实现 如 ie7.js, ie8.js 对 CSS 选择符的优化 如对于不支持 :hover 的 ie6 使用 JS 在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术
- 43. 参考资源 http://zh.wikipedia.org/wiki/HTML_5 http://www.whatwg.org/html5/ http://dev.w3.org/html5/spec/Overview.html http://html5demos.com/ http://www.w3.org/TR/html5-diff/ http://www.alistapart.com/articles/previewofhtml5 https:// developer.mozilla.org/cn/DOM/Storage http://www.w3.org/TR/css3-roadmap/ http://dev.w3.org/html5 / http://dev.w3.org/csswg/ http://www.css3.info/modules/
- 44. Thanks! Q&A Email: [email_address] MSN: luchaowu@hotmail.com