HTML5

1,334 views

Published on

html5

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,334
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1.
  2. 2. HTML5<br />发展史<br />有何不同?<br />可以做些什么?<br />有哪些新东西?<br />是什么?<br />为什么会这样设计?<br />
  3. 3. HTML5 <br />概述<br />
  4. 4. 一种web标记语言<br />为开发人员提供极大的便利<br />强化了Web网页的表现性能<br />HTML5提供了多种web应用API<br />
  5. 5. 语义化标签<br />无插件音频视频播放<br />Canvas 动画<br />HTML5<br />根据类名获得元素<br />地理位置信息<br />本地存储<br />硬件加速<br />从桌面拖放文件到浏览器上传<br />跨文档通信<br />随意拖放<br />多线程处理<br />本地缓存<br />内置SVG<br />
  6. 6. 浏览器支持情况<br />
  7. 7. HTML5 <br />的历史<br />为什么要了解历史?<br />
  8. 8. HTML tags非官方 较早前<br />HTML 2.0(IETF)1995HTML 3.2 1997HTML 4.0 1997HTML 4.01 1999<br />————————————————————————————————————————————————————————————————————<br />因特网任务工程组<br />
  9. 9. 1999~2000<br />HTML4过渡XHTML1.0<br />相同:规范的内容,词汇表,元素,属性<br />区别:XHTML使用XML语法,元素、属性小写,属性值加引号,使用结束标签和自结束标签<br />为什么过去10年XHMTL1.0那么成功?<br />
  10. 10. XHTML 1.0  2000XHTML 1.1 2001 XHTML 2 未完成<br />XHTML1.1/XHTML2 都必须把文档标记XML文档<br />XML的错误处理模型决定了1.1和2不能得到长期发展<br />
  11. 11. 伯斯塔尔法则:接收时要开放,发送时要保守<br />
  12. 12. Web超文本应用技术工作组(opera/apple/google…)<br />WHATWG   2004<br />W3C    2007<br />目标为研发简单的web新技术,不断迭代<br />独裁式工作流程<br />万维网联盟(World Wide Web Consortium)<br />规范会成为工作草案,定格在某个历史时刻<br />民主式工作流程,投票决定<br />HTML5<br />主编辑:伊恩·希克森(来自google)<br />一种格式,两个版本<br />如何看待这两种工作方式?<br />
  13. 13. HTML5 <br />的设计原理<br />
  14. 14. 设计原理本质上是一种信念、一种想法、一个概念,是你行动的支柱。<br />孔子曰:<br />“己所不欲,勿施于人。”<br />可以理解为是种为人处事的设计原理<br />
  15. 15. 尽可能的简单<br />避免不必要的复杂性<br />
  16. 16. HTML 4.01<br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />XHTML 1.0<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />HTML5<br /><!DOCTYPE html><br />伯斯塔尔法则,浏览器接收时必须足够开放<br />向后兼容<br />Doctype是否为了浏览器而写?<br />
  17. 17. HTML 4.01<br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />XHTML 1.0<br /><?xml version="1.0" encoding="UTF-8"?><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />HTML5<br /><meta charset="utf-8"><br />浏览器会这样解释它:“元数据(meta)⋯⋯,字符集(charset)utf-8。<br />
  18. 18. 去掉重复性的,多余的,让其变得简单。<br /><link rel="stylesheet" type="text/css" href="file.css”><br /><script type="text/javascript"> </script><br />
  19. 19. 支持现有的内容<br />support existing content<br />还记得XHTML2.0是如何烂尾的吗?<br />
  20. 20. <imgsrc="foo" alt="bar" /> <br /><p class="foo">Hello world</p><br /><imgsrc="foo" alt="bar"> <br /><p class="foo">Hello world<br /><IMG SRC="foo" ALT="bar"> <br /><P CLASS="foo">Hello world</P><br /><imgsrc=foo alt=bar> <br /><p class=foo>Hello world</p><br />看到这种设计方案后作何感想?如何看待以后自己的代码编写?<br />
  21. 21. 解决实际问题<br />solve real problems<br />
  22. 22. (X)HTML<br /><h2><a href="/path/to/resource">Headline text</a></h2> <br /><p><a href=“/path/to/resource”>Paragraph text.</a></p><br />HTML5<br /><a href="/path/to/resource"> <br /> <h2>Headline text</h2> <br /> <p>Paragraph text.</p> <br /></a><br />解决了什么实际问题?<br />
  23. 23. 走牛走的路<br />pave the cow paths<br />
  24. 24. 多年以来,我们已经习惯了这样的写法<br /><body> <br /><div id="header">...</div> <br /><div id="navigation">...</div> <br /><div id="main">...</div> <br /><div id="sidebar">...</div> <br /><div id="footer">...</div> <br /></body><br />
  25. 25. section <br />article <br />aside<br />nav<br />header footer details figure<br />
  26. 26. <body> <br /><header>...</header> <br /><nav>...</nav> <br /><div id="main">...</div> <br /><aside>...</aside> <br /><footer>...</footer> <br /></body><br />每个元素都允许在同一页面被多次使用<br />
  27. 27. 语义化趋势<br />
  28. 28. <div class="item"> <br /><h2>...</h2> <br /><div class="meta">...</div> <br /><div class="content"> ... </div> <br /><div class="links">...</div> <br /></div><br />——————————————————————————————————————————————————————————————————————<br /><section class="item"> <br /><header><h1>...</h1></header> <br /><footer class="meta">...</footer> <br /><div class="content"> ... </div> <br /><nav class="links">...</nav> <br /></section><br />
  29. 29. <H1>带来的革命性转变<br /><ul><li>你可以在不同的内容分区中定义H1
  30. 30. 浏览器可能会重新排列她在页面中扮演的角色,这</li></ul> 取决于所出现的位置。<br /><ul><li>新语义标签的正在价值</li></li></ul><li>优雅退化,老旧兼容<br />degrade gracefully<br />
  31. 31. From2.0<br />input type="number" <br />input type="search" <br />input type="range" <br />input type="email" <br />input type="date" <br />input type="url”<br />
  32. 32. Input type="number” <br />Input type="range” <br />Input type=“search” <br />Input type=“text”placeholder=“selven” <br />
  33. 33. HTML5 video<br />Flash object<br />
  34. 34. <video src=“movie.mp4”> <br /><!–后备内容--> <br /></video><br />H.264 是MPEG-4 标准所定义的最新格式,同时也是技术含量最高、代表最新技术水平的视频编码格式之一,有的也称(AVC)。<br />
  35. 35. <video src=“movie.mp4”> <br /><object data="movie.swf"><br /><!–后备内容--> <br /></object><br /></video><br />
  36. 36. <video> <br /><source src="movie.mp4"> <br /><source src="movie.ogv"> <br /><source src="movie.webm"><br /><object data="movie.swf"> <br /><a href="movie.mp4">download</a> <br /></object><br /></video><br />
  37. 37. 最终用户优先<br />priority of constituencies<br />一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。<br />
  38. 38. Thanks for you are time<br />谢谢大家的参与<br />@selven<br />

×