HTML5技术培训

1、HTML5 技术介绍制作人：刘臣目 录n HTML5简介 流行浏览器介绍 HTML5介绍n HTML5新特性 Canvas（画布） Video（视频） 数据存储 其他n 小结n 学习资料HTML5 简介v流行浏览器介绍 IE（Internet Explorer）微软：最广泛的网页浏览器 FirefoxMozilla：支持多种操作系统 Safari苹果公司：内建于Mac OS,也是iPhone与iPad的指定浏览器 Opera挪威Opera Software ASA公司 ChromeGoogle：开放源代码浏览器HTML5 简介HTML5 简介HTML5 简介vHTML5发展历程 HTML(Hy

2、per Text Markup Language) 超文本标记语言（第一版）在1993年6月发为互联网工程工作小组（IETF）工作草案发布（并非标准） HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.21996年1月14日，W3C推荐标准 HTML 4.01997年12月18日，W3C推荐标 HTML 4.01（微小改进）2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准 XHTML 依次经历了XHTML1.0、XHTML2.0 HTML 5 处于草案阶段HTML5

3、简介v与与HTML5标准创建相关的组织标准创建相关的组织CERN(European Organization for Nuclear Research)IETF(Internet Engineering Task Force)W3C(World Wide Web Consortium)WHATWG(Web Hypertext Application Technology Working Group)(Apple, Mozilla, Opera)HTML5简介vHTML5标准解决的主要问题标准解决的主要问题浏览器支持标准的统一降低网页插件的重要性现HTML不支持音频或视频，没有发现、抓取、显示和

4、控制流媒体甚至动画的能力，所以需要网页插件（flash，silverlight等）来支持。HTML 5具备支持音频或视频能力。HTML5新特性vHTML5新特性新特性 新的标签：内容元素（eg：article、footer、header、nav、section）、表单控件（eg：calendar、date、time、email、url、search）等等 画布（Canvas） 视频（Video） 数据存储HTML5新特性vHTML5新的内容元素新的内容元素HTML5新特性vHTML5新的表单控件新的表单控件HTML5新特性v画布（Canvas）简介HTML5 的 canvas 元素使用 Jav

5、aScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。HTML5新特性vCanvas与与SvgnSVG，全称为Scalable Vector Graphics（可伸缩矢量图形）。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点，比如可扩充性（scalable），动态的，交互性强。SVG支持无极放大，对SVG图片进行任意比例的放大都不会损害图片的显示nCanvas ，HTML5新标签HTML5新特性vcanvas实例实例var canvas = document.getElementByI

6、d(myCanvas);var ctx = canvas.getContext(2d);ctx.fillStyle = rgb(200,0,0);ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = rgba(0, 0, 200, 0.5);ctx.fillRect (30, 30, 55, 50);HTML5新特性vsvg实例实例 var rect = document.getElementById(myRect);rect.style.fill = green;rect.onclick = function() alert(hello); HTML5新

7、特性vcanvas and SVG实例网站实例网站 SVG (http:/ Canvas (http:/ 的的 video元素提供了对元素提供了对Ogg、 MPEG4两种视频格式（两种视频格式（ Ogg = 带有带有 Thedora 视频编码和视频编码和 Vorbis 音频编码的音频编码的 Ogg 文件；文件；MPEG4 = 带有带有 H.264 视频编码和视频编码和 AAC 音频编码的音频编码的 MPEG 4 文件）；自带添加播文件）；自带添加播放、暂停和音量控件等视频功能放、暂停和音量控件等视频功能HTML5新特性vvideo实例实例Your browser does not suppor

8、t the video element.var v = document.getElementsByTagName(video)0;v.play();HTML5新特性v本地离线存储本地离线存储html5通过通过ApplicationCache接口解决了一些问题，接口解决了一些问题，并且使离线存储成为可能，离线存储使得你的并且使离线存储成为可能，离线存储使得你的web应用应用可以在用户离线的状况下进行访问，该技术优点：可以在用户离线的状况下进行访问，该技术优点：n 最直接的好处就是用户可以离线访问你的web应用n 因为文件被缓存在本地使得web页面加载速度提升许多n 离线应用只加载被修改过的资源

9、，因此大大降低了用户请求对服务器造成的负载压力HTML5新特性v本地离线存储实例本地离线存储实例 Clock The time is: HTML5新特性v本地离线存储实例本地离线存储实例/* clock.css */output font: 2em sans-serif; /* clock.js */setTimeout(function () document.getElementById(clock).value = new Date();, 1000); /* clock.manifest */CACHE MANIFESTclock.htmlclock.cssclock.js HTML5

10、新特性v选择器选择器v 通过通过 class 定位元素定位元素 (DOM API) var el = document.getElementById(section1); el.focus(); var els = document.getElementsByTagName(div); els0.focus(); var els = document.getElementsByClassName(section); els0.focus();v 通过类似通过类似 css 选择器的语法定位元素选择器的语法定位元素 (Selectors API)var els = document.querySelectorAll(ul li:nth-child(odd); var els = document.querySelectorAll(table.test tr td); 小 结n HTML5简介 5种流行浏览器（ IE、Firefox、Safari、Oper