Your SlideShare is downloading. ×
0
揭秘 HTML5 和 CSS3        鲁超伍 |Adam    http://adamlu.com/  http://revieweb20.com/ http://twitter.com/adamlu
关于我• 网名 Adam ,热爱互联网, 2004 年开始接  触前端方面的东西,多年互联网前端开发  经验,见证了前端开发这个行业的兴起。• 现就职于淘宝网北京 UED (前端开发工程  师),花名空雁。• 追求卓越,不懈努力,做一个专业的前...
网站标准的简单历史XHTML 1               CSS2.1Content           Presentation          2001-2006
网站标准的简单历史• WHATWG? – Web Hypertext Application Technology   Working Group• W3C – Word Wide Web Consortium            2004-...
网站标准的简单历史HTML5              CSS3Content       Presentation    2007-Present
HTML5 HTML5 DEMO
HTML 发展历史HTML4.0   XHTML1   XHTML2   WHATG   HTML51998      2000     2002     2004    2007
支持 HTML5 的浏览器• Opera 9.5+  –   Cross-document messaging  –   Server-sent events  –   Web Forms 2.0  –   Canvas and video• ...
支持 HTML5 的浏览器• FireFox 3.1+  – offline storage and canvas  – Geolocation/Web Workers/    ContentEditable  – Gecko(more HTM...
HTML5 技术概览•   HTML5 新增和移除的元素•   HTML5 基本布局•   HTML5 对表单的支持•   HTML5 DOM 变化•   HTML5 的 Javascript APIs    –   Canvas    –  ...
HTML5 新增的元素• 多媒体及交互式元素  – video, audio...  – details, menu, command...• 结构元素  – header, footer, section, article, nav...• ...
HTML5 移除的元素• 移除的元素 – font, center, strike, big, s, u, acronym, applet,   dir...• 移除的属性 – 如 link 和 a 元素的 rev 属性 , link 元素的 ...
HTML5 基本布局<!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header><h1></h1><h2...
HTML5 对表单的支持• 新的控件类型   – <input type="url|email|date|tel|search|datetime|date|month|week|     datetime-local|number|range|...
<form action=/register enctype="application/x-www-form+xml" method="post">       <p>          <label for=name>ID( 请使用 Emai...
http://adamlu.com/Demo/Speech/Demo/form-html5.html
HTML5 DOM 变化• getElementsByClassName• Selector API  – document.querySelector()  – document.querySelectorAll()• Traversal A...
HTML5 的 Javascript APIs                           y   API                     Histor                                     V...
Video&Audio• <video height="280" width="498"  poster="border.png" id="video">  <source src="coldplay.mp4">  </video>• <aud...
Canvas• <canvas> 是一个新的 HTML 元素,这个元素可以被 Script 语言 ( 通  常是 JavaScript) 用来绘制图形。例如可以用它来画图、合成图象、  或做简单的 ( 和不那么简单的 ) 动画。• var ca...
Drag&Drop• 拖拽事件 : dragstart, dragend, dragenter,  dragleave, dragover, drag, drop• <div draggable="true"  ondragstart="dra...
Web Workers• 让 Javascript 多线程,可以在后台做很多工  作而不会阻断当前的浏览器• var w = new Worker(worker.js);  w.onmessage = function(event){     ...
Web Workers• //worker.js• importScripts(xhr.js, db.js);• onmessage = function(event){      if(event.data == run){         ...
Geolocationnavigator.geolocation.getCurrentPosition( success, error);
Application Cache• <html manifest = "rubiks.manifest">• rubiks.manifest  – CACHE MANIFEST    /demo/rubiks/style.css    /de...
Storage•   database storage( 客户端数据库 SQLite)•   WebKit 中已经实现•   var database = openDatabase(db, 1.0);•   database.executeSq...
Storage• key/val 存储 ()  – sessionStorage(window based)  – localStorage(domain based)• WebKit/IE8/Firefox 3.5 已经实现• .setIte...
Cross-Document Messaging• .postMessage(message, targetOrigin)• .onMessage(event)   – event.data == message• document.getEl...
2022?        http://ishtml5readyyet.com/
CSS3 CSS3 DEMO
CSS 的发展历史CSS1.0   CSS2.0           CSS3.0 1996     1998              2001          Cascading Style Sheets
支持 CSS3 的浏览器http://adamlu.com/Demo/Speech/Demo/CSS-Browser-Support.png
CSS3 技术概况•   选择器•   布局•   样式•   动画•   其它
CSS3- 选择器• 属性选择器 – a[href$=.pdf], a[href^=mailto],   a[class*=‘item’]• 兄弟选择器 – Div~img• 伪类选择器 – :nth-child(n), :nth-last-c...
CSS3- 样式• 圆角 – border-radius: 3px – -moz-border-radius-topleft – -webkit-border-top-left-radius• 阴影 – box-shadow: 5px 5px ...
CSS3- 样式• 边框背景 – border-image: url(border.png) 27 27 27 27 round   round;• 渐变 – background: -moz-linear-gradient(20%, cent...
CSS3- 样式• 透明  – opacity: 0.5;• RGBA  – color: rgba(0, 255, 0, 0.5);• HSL/A  – color: hsl(240, 50%, 50%); hsla(240, 50%,   ...
CSS3- 布局• 盒模型  – box-sizing: content-box|border-box;• 网格模型  – column-count: 3; column-width: 13em; column-gap:    1em; col...
CSS3- 动画• 变换 – transform: rotate(30deg); – transform: scale(0.5, 2.0); – transform: skew(-30deg); – transform: translate(3...
CSS3- 其它• 媒体查询 – .entry{color: red;}   @media all and {min-width: 100em}{     .entry{color: black;}   }• 语音支持 – voice-volu...
浏览器前缀•   Firefox: -moz-box-shadow•   Safari: -webkit-box-shadow•   Opera: -o-box-shadow•   IE: -ms-box-shadow
CSS3 应用原则• 优雅降级• 对于不支持 CSS3 的浏览器可以使用  Javascript 来实现 – 如 ie7.js, ie8.js 对 CSS 选择符的优化 – 如对于不支持 :hover 的 ie6 使用 JS• 在向用户或老板推...
参考资源•   http://zh.wikipedia.org/wiki/HTML_5•   http://www.whatwg.org/html5/•   http://dev.w3.org/html5/spec/Overview.html•...
Thanks!            Q&AGtalk: luchaowu@gmail.comMSN: luchaowu@hotmail.com
Upcoming SlideShare
Loading in...5
×

Html5和css3入门

1,756

Published on

html5

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,756
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5和css3入门"

  1. 1. 揭秘 HTML5 和 CSS3 鲁超伍 |Adam http://adamlu.com/ http://revieweb20.com/ http://twitter.com/adamlu
  2. 2. 关于我• 网名 Adam ,热爱互联网, 2004 年开始接 触前端方面的东西,多年互联网前端开发 经验,见证了前端开发这个行业的兴起。• 现就职于淘宝网北京 UED (前端开发工程 师),花名空雁。• 追求卓越,不懈努力,做一个专业的前端 开发工程师!• Stay Hungry, Stay Foolish!
  3. 3. 网站标准的简单历史XHTML 1 CSS2.1Content Presentation 2001-2006
  4. 4. 网站标准的简单历史• WHATWG? – Web Hypertext Application Technology Working Group• W3C – Word Wide Web Consortium 2004-Present
  5. 5. 网站标准的简单历史HTML5 CSS3Content Presentation 2007-Present
  6. 6. HTML5 HTML5 DEMO
  7. 7. HTML 发展历史HTML4.0 XHTML1 XHTML2 WHATG HTML51998 2000 2002 2004 2007
  8. 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/Palms WebOS)
  9. 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. 10. HTML5 技术概览• HTML5 新增和移除的元素• HTML5 基本布局• HTML5 对表单的支持• HTML5 DOM 变化• HTML5 的 Javascript APIs – Canvas – Video/Audio – Drag&Drop – Geolocation – Application Cache – Database Storage – X-Document Messaging
  11. 11. HTML5 新增的元素• 多媒体及交互式元素 – video, audio... – details, menu, command...• 结构元素 – 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. 12. HTML5 移除的元素• 移除的元素 – font, center, strike, big, s, u, acronym, applet, dir...• 移除的属性 – 如 link 和 a 元素的 rev 属性 , link 元素的 target 属性 , td 的 scope 属性, script 元素的 language 属性 , body 元素的 alink , link , text 和 vlink 属性 ...
  13. 13. HTML5 基本布局<!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ HTML4ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html> HTML5
  14. 14. HTML5 对表单的支持• 新的控件类型 – <input type="url|email|date|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. 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>
  16. 16. http://adamlu.com/Demo/Speech/Demo/form-html5.html
  17. 17. HTML5 DOM 变化• getElementsByClassName• Selector API – document.querySelector() – document.querySelectorAll()• Traversal API – .nextElementSibling – .previousElementSibling – .firstElementChild – .lastElementChild – .children
  18. 18. HTML5 的 Javascript APIs y API Histor Video&Audio M Offline essagi Applica ng tionsWeb Forms2.0 Storage D rop & Drag Undo Geolocation X-Domain Ed Canvas itab le ba se al Data Loc
  19. 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. 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. 21. Drag&Drop• 拖拽事件 : dragstart, dragend, dragenter, dragleave, dragover, drag, drop• <div draggable="true" ondragstart="dragstartHandler(event)"></ div> function dragstartHandler(e){ alert(dragstart); }
  22. 22. Web Workers• 让 Javascript 多线程,可以在后台做很多工 作而不会阻断当前的浏览器• var w = new Worker(worker.js); w.onmessage = function(event){ alert(event.data); } w.postMessage(run);
  23. 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. 24. Geolocationnavigator.geolocation.getCurrentPosition( success, error);
  25. 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. 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. 27. Storage• key/val 存储 () – sessionStorage(window based) – localStorage(domain based)• WebKit/IE8/Firefox 3.5 已经实现• .setItem(key, value)• .getItem(key)
  28. 28. Cross-Document Messaging• .postMessage(message, targetOrigin)• .onMessage(event) – event.data == message• document.getElementById(iframe).contentWindow.post Message(my message, http://adamlu2.com);• window.addEventListener(message, function(e){ if(e.origion !== http://adamlu1.com){ return; } alert(e.origion+ said: +e.data); }, false);
  29. 29. 2022? http://ishtml5readyyet.com/
  30. 30. CSS3 CSS3 DEMO
  31. 31. CSS 的发展历史CSS1.0 CSS2.0 CSS3.0 1996 1998 2001 Cascading Style Sheets
  32. 32. 支持 CSS3 的浏览器http://adamlu.com/Demo/Speech/Demo/CSS-Browser-Support.png
  33. 33. CSS3 技术概况• 选择器• 布局• 样式• 动画• 其它
  34. 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. 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. 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. 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. 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. 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. 40. CSS3- 其它• 媒体查询 – .entry{color: red;} @media all and {min-width: 100em}{ .entry{color: black;} }• 语音支持 – voice-volume, voice-balance, voice-family
  41. 41. 浏览器前缀• Firefox: -moz-box-shadow• Safari: -webkit-box-shadow• Opera: -o-box-shadow• IE: -ms-box-shadow
  42. 42. CSS3 应用原则• 优雅降级• 对于不支持 CSS3 的浏览器可以使用 Javascript 来实现 – 如 ie7.js, ie8.js 对 CSS 选择符的优化 – 如对于不支持 :hover 的 ie6 使用 JS• 在向用户或老板推广新技术的同时也要关 注他们的目标与可行性,不能为了技术而 技术
  43. 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. 44. Thanks! Q&AGtalk: luchaowu@gmail.comMSN: luchaowu@hotmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×