HTML5 CSS3 及商城脚本命名空间讨论<br />
什么是 HTML5<br />
HTML 5 的历史背景 <br />W3C HTML Working Group 于2007年成立并着手开发 HTML 5。目前,开发工作仍在进行中,并将于2012年向 W3C 提交初步意见,不过现在已经有不少浏览器部分支持 HTML 5。<...
HTML5<br />Parsing rules<br />Canvas<br />Video<br />Audio<br />Elements<br />User interaction<br />Microdata<br />Web app...
HTML5<br />Parsing rules<br />Canvas<br />Video<br />Audio<br />Elements<br />User interaction<br />Microdata<br />Web app...
HTML5 主要新功能<br />1、本地音频视频播放;<br />2、动画;<br />3、地理信息;<br />4、硬件加速;<br />5、本地运行(即使在 Internet 连接中断之后);<br />6、本地存储;<br />7、从桌...
HTML5 的意义远不止上面这些,它最大的意义在于改变了 Web 文档的结构方式,借助 header, footer, section, article 这些标签,我们可以实现更具结构化,语义化的 Web 文档。这样,搜索引擎可以更容易索引 W...
Section elements<br />Section<br />Nav<br />Article<br />Aside<br />Hgroup<br />Header<br />Footer<br />
FORMs<br />Input type=search<br />Input type=tel<br />Input type=url<br />Input type=email<br />
localStorage<br />本地存储<br />最多可支持5MB文本内容<br />
localStorage<br />localStorage.setItem(“name”, “要存储的内容”); <br />localStorage.getItem(" name "); <br />localStorage[name]<b...
商城能用 HTML5 做些什么?<br />
商城能用 HTML5 做些什么?<br />使用更具结构化、语义化的 HTML5 标签,更快的加载速度,从而转化为更好的用户体验。<br />article, aside, footer, header, nav, section, time…...
商城能用 HTML5 做些什么?<br />本地存储<br />将页面中的部分内容存放在客户端,下次在打开类似的页面时则可以从本地读取,而不需要向服务器再发送请求,从而可以节省流量,节省了成本。<br />比如页头、导航、页脚声明等内容。<br />
HTML5 所需的文件<br /><!--[if lt IE 9]><br /><script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script><br /><![endif]--><br...
CSS3表一览<br />
CSS3表一览<br />
Transform 旋转<br />-moz-transform: rotate(0deg);<br />-webkit-transform: rotate(0deg);<br />-o-transform:rotate(0deg);<br /...
结束<br />
Upcoming SlideShare
Loading in …5
×

2011 04-19 html5 css3 及脚本

632 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
632
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2011 04-19 html5 css3 及脚本

  1. 1. HTML5 CSS3 及商城脚本命名空间讨论<br />
  2. 2. 什么是 HTML5<br />
  3. 3. HTML 5 的历史背景 <br />W3C HTML Working Group 于2007年成立并着手开发 HTML 5。目前,开发工作仍在进行中,并将于2012年向 W3C 提交初步意见,不过现在已经有不少浏览器部分支持 HTML 5。<br />和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。<br />HTML5 的使命是实现富 Web 应用的本地化<br />
  4. 4. HTML5<br />Parsing rules<br />Canvas<br />Video<br />Audio<br />Elements<br />User interaction<br />Microdata<br />Web applications<br />Security<br />Geolocation<br />WebGL<br />Communication<br />Files<br />Storage<br />Workers<br />Local devices<br />Other<br />
  5. 5. HTML5<br />Parsing rules<br />Canvas<br />Video<br />Audio<br />Elements<br />User interaction<br />Microdata<br />Web applications<br />Security<br />Geolocation<br />WebGL<br />Communication<br />Files<br />Storage<br />Workers<br />Local devices<br />Other<br />
  6. 6. HTML5 主要新功能<br />1、本地音频视频播放;<br />2、动画;<br />3、地理信息;<br />4、硬件加速;<br />5、本地运行(即使在 Internet 连接中断之后);<br />6、本地存储;<br />7、从桌面拖放文件到浏览器上传;<br />8、语义化标记;<br />
  7. 7. HTML5 的意义远不止上面这些,它最大的意义在于改变了 Web 文档的结构方式,借助 header, footer, section, article 这些标签,我们可以实现更具结构化,语义化的 Web 文档。这样,搜索引擎可以更容易索引 Web 站点,我们也可以搜索到更快,更准确的信息。<br />
  8. 8. Section elements<br />Section<br />Nav<br />Article<br />Aside<br />Hgroup<br />Header<br />Footer<br />
  9. 9. FORMs<br />Input type=search<br />Input type=tel<br />Input type=url<br />Input type=email<br />
  10. 10. localStorage<br />本地存储<br />最多可支持5MB文本内容<br />
  11. 11. localStorage<br />localStorage.setItem(“name”, “要存储的内容”); <br />localStorage.getItem(" name "); <br />localStorage[name]<br />localStorage.name<br />
  12. 12. 商城能用 HTML5 做些什么?<br />
  13. 13. 商城能用 HTML5 做些什么?<br />使用更具结构化、语义化的 HTML5 标签,更快的加载速度,从而转化为更好的用户体验。<br />article, aside, footer, header, nav, section, time…<br />
  14. 14. 商城能用 HTML5 做些什么?<br />本地存储<br />将页面中的部分内容存放在客户端,下次在打开类似的页面时则可以从本地读取,而不需要向服务器再发送请求,从而可以节省流量,节省了成本。<br />比如页头、导航、页脚声明等内容。<br />
  15. 15. HTML5 所需的文件<br /><!--[if lt IE 9]><br /><script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script><br /><![endif]--><br /><style><br />article,aside,footer,header,nav,nest,output,section{display:block;}<br /></style><br />https://github.com/kissyteam/kissy/blob/master/src/cssreset/reset.css<br />/* 重置 HTML5 元素 */<br />article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,<br />summary, time, mark, audio, video {<br /> display: block;<br /> margin: 0;<br /> padding: 0;<br />}<br />
  16. 16. CSS3表一览<br />
  17. 17. CSS3表一览<br />
  18. 18. Transform 旋转<br />-moz-transform: rotate(0deg);<br />-webkit-transform: rotate(0deg);<br />-o-transform:rotate(0deg);<br />-ms-transform: rotate(0deg);<br />transform:rotate(0deg);<br />http://www.css88.com/tool/css3Preview/Transform.html<br />http://www.css3generator.com/<br />
  19. 19. 结束<br />

×