《基于新信息技术HTML5和CSS3网页设计进阶教程课件.pptx》由会员分享，可在线阅读，更多相关《基于新信息技术HTML5和CSS3网页设计进阶教程课件.pptx（394页珍藏版）》请在三一办公上搜索。
1、第1章 HTML5的重要使命,1.1 Web时代的变迁1.2 HTML5的目标1.3 HTML5的新功能,基于新信息技术的HTML5和CSS3网页设计进阶教程,第1章 HTML5的重要使命1.1 Web时代的变迁基于,1.1 Web时代的变迁,Web(World Wide Web)即全球广域网，也称为万维网，它和我们经常说的“互联网”是两个联系极其紧密但却不尽相同的概念。互联网是通过一组通用协议互相连接在一起的计算机网络，而Web是运行在互联网上的一个超大规模的分布式系统。,1.1 Web时代的变迁Web(World Wi,Web的设计初衷是一个静态信息资源发布媒介，通过超文本标记语言(HTM
2、L)描述信息资源，统一资源标识符(URI)定位信息资源，超文本转移协议(HTTP)请求信息资源。HTML、URL和HTTP三个规范构成了Web的核心体系结构，是支撑Web运行的基石。Web是人类伟大的发明之一，也是计算机影响人类的表现之一。,Web的设计初衷是一个静态信息资源发布媒介，通过超文本,1.1.1 Web1.0Web1.0的主题是信息共享。Web设计的初衷是用于科学家之间共享和传递信息，后来被一些大公司看到了其中所蕴含的巨大商业价值，他们开始将自己的商品及联系方式放到Web上进行展示，并取得了巨大的成功。随后，各种公司蜂拥进入Web宣传、推广自己的产品，Web用户进入一个快速增长期。
3、随着进入Web的商家越来越多，Web也开始逐步走向商业化的道路。,1.1.1 Web1.0Web1.0的主题是信息共,Web1.0是Web技术发展的第一个阶段，局限于当时的硬件条件及网络环境，网站主要以静态页面技术为主。大部分网站以纯HTML语言编写，由文字和图片组成，制作形式以表格为主，内容以网站编辑为主导，用户能够看到的内容是网站编辑处理后的。这个过程是网站向用户单向传递信息，网站负责展示信息，用户负责浏览信息，因此也有人将Web1.0时代称为“只读的时代”。,Web1.0是Web技术发展的第一个阶段，局限于当时的,1.1.2 Web2.0Web2.0的主题是信息共建。Web1.0只解决了
4、人对信息搜索、聚合的需求，而没有解决人与人之间沟通、互动和参与的需求。因此，为了满足广大网民的需求，Web2.0应运而生。,1.1.2 Web2.0Web2.0的主题是信息共,Web2.0的代表应用有以新浪微博为代表的博客网站、以土豆优酷为代表的视频网站、以QQ空间为代表的个人空间网站、以豆瓣为代表的评论网站等。打开这些网站，你会发现它们都有以下一些共同的特点： 内容大多都是由用户自主创造的，突出个人观点及个性化。 重视网站用户体验，网站具有漂亮的外观、简易的操作性及快速的响应速度。 突出用户参与度，可读可写。,Web2.0的代表应用有以新浪微博为代表的博客网站、以,Web2.0相比Web1.
5、0的最大改变是，加强了网站与用户之间的互动，网站内容主要由用户提供，网站的诸多功能也由用户参与建设，实现了网站与用户的双向互动交流。,Web2.0相比Web1.0的最大改变是，加强了网站与,1.1.3 Web3.0目前，Web3.0还只是一个业内人士之间的概念词语。业内对Web3.0的解释有很多，其中最常见的一种解释是用户可以在Web上拥有自己的数据，并且在多家网站中使用这些数据，完全基于Web，用浏览器即可实现复杂系统程序才能实现的系统功能，用户数据在被审计后，同步于网络数据。也就是说，在Web3.0时代，用户在Web上将拥有自己的身份，使用这个身份信息，可以登录各种不同的网站；用户也将不再
6、是在某个网站上传自己的作品，而是将这些作品上传到Web中，再给某个网站授权，以达到在该网站发布作品的目的。,1.1.3 Web3.0目前，Web3.0还只是一,另外，用户参与互联网的创作其实也算是一种劳动，这种劳动在Web2.0时代是无法直接带给用户经济利益的，只有当用户的创作获得了一定的认可度后才能通过其他方式获得劳动报酬。这种现象在Web3.0时代将会有所改变，人们参与到互联网的劳动中，特别是在内容上的创造，将会获得更多的荣誉、认同，包括财富和地位。,另外，用户参与互联网的创作其实也算是一种劳动，这种劳动,其实，这些在现在的Web中已经有所体现，只不过很少有人关注。现在的很多网站，用户可以
7、不用注册而通过其他网站的账号，如QQ号、支付宝账号等直接登录；发布于某个网站的内容，可以通过转载或引用等方式直接发布到另外的网站上；某些网站提供积分、虚拟币等方式，当用户的积分或虚拟币达到一定数量后可以兑换成人民币等。这些新出现的Web模式已经有了Web3.0的特征，当条件达到一定支持度时，Web3.0将会不知不觉地来到我们的身边。,其实，这些在现在的Web中已经有所体现，只不过很少有人,当然，Web3.0的这些特征都还处在概念阶段，至于真正到来的Web3.0具有哪些特征，只有当我们真正处于那个时代时才能进行总结、归纳。但不论如何，Web发展的脚步是不会停下的，新的时代必将会来临。,当然，We
8、b3.0的这些特征都还处在概念阶段，至于真正,1.2 HTML5的目标,1.2.1 HTML的发展历程1993年6月，互联网工程工作小组(IETF)发布了一份工作草案“超文本标记语言(第一版)”，这被认为是HTML的第一个版本，但它并不是一个成型的标准，因为当时有很多不同的版本。,1.2 HTML5的目标1.2.1 HTML的发展,2007年，W3C从WHATWG接手相关工作，重新开始发展HTML5，而此时的W3C同时进行着两套规范的制定工作：XHTML2和HTML5。直到2009年，W3C宣布终止XHTML2的相关工作，HTML5开始逐渐进入广大开发者的视野中。2014年10月29日，W3C
9、宣布，经过近8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。,2007年，W3C从WHATWG接手相关工作，重新开始,1.2.2 HTML5要解决的问题HTML5将取代HTML4.01、XHTML1.0标准，在互联网应用迅速发展的今天，使网络标准符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。它将成为开放Web平台(Open Web Platform)的基石，进一步推动更深入的跨平台Web应用的发展。同时，HTML5还解决了HTML历史遗留的几个大问题。,1.2.2 HTML5要解决的问题HTML5将取代,HTML4.01没有考虑到Web的发展如此迅猛，在标准中
10、没有提供对视频、动画和声音的支持，而Web这方面的需求被浏览器插件补充了。想要在网页中播放视频或者声音，只能通过第三方插件实现，而其中最为著名的是Adobe公司提供的第三方插件“Adobe Flash Player”，久而久之，这个部署在亿万浏览器里的商业插件俨然成为了HTML中的另外一个标准。,HTML4.01没有考虑到Web的发展如此迅猛，在标准,除了Flash这个商业产品成为事实标准，HTML4.01标准还面临一个问题，那就是另一个扩展标准的制定者IE。当时的IE在浏览器市场中占有绝对的统治地位，并且扩展了大量的仅IE支持的“IE Only”语法，比如IE默认的脚本语言是JScript，
11、它跟标准脚本语言JavaScript在功能和语法虽然大致相同，但在细节上还是有着一些差别，这就导致Web程序员不得不痛苦地为IE及其他浏览器编写两种脚本。浏览器不兼容现象由此而来，很多网站甚至只能使用IE进行浏览。,除了Flash这个商业产品成为事实标准，HTML4.0,就这样，整个Web世界被两大IT巨头微软和Adobe绑架了。Web企业每年不得不向IE和Adobe缴纳巨额的费用来使用它们的产品。最终，IT巨头们都坐不住了，既然HTML4.01无法解决这个问题，那么就用新的标准来解决吧，而这个新的标准就是HTML5。HTML5就这样诞生了。,就这样，整个Web世界被两大IT巨头微软和Adob
12、e绑,1.3 HTML5的新功能,1.3.1 无插件范式过去，很多功能只能通过插件或者复杂的hack(针对原程序文件的直接修改)来实现，但在HTML5中，提供了对这些功能的原生支持。比如过去只能通过Flash播放视频和声音，而现在HTML5提供了video和audio元素来对视频和声音进行支持；再比如过去想在页面中画出某些图形是非常困难的，而现在有了canvas元素就能很轻易地实现了。现在的Web开发人员不需要再依赖插件就能制作出效果绚丽、功能强大的页面了。,1.3 HTML5的新功能1.3.1 无插件范式,1.3.2 新的DOCTYPE和字符集HTML5对HTML代码规范进行了大量的简化操作
13、，使得Web页面的代码更加精简、高效。如Web页面的DOCTYPE就被极大地简化了。以前的DOCTYPE有很多的版本，以下列举几个常见的DOCTYPE： HTML 4.01 Strict,1.3.2 新的DOCTYPE和字符集HTML5对,基于新信息技术HTML5和CSS3网页设计进阶教程课件,这些谁能够记得住？一般来说，在新建页面时，开发工具会直接为页面添加默认的DOCTYPE，而开发人员如果需要用到其他类型的DOCTYPE，则需要通过复制、粘贴来进行更换，这无疑又给开发人员增加了工作量和工作难度。HTML5干净利落地解决了这一问题：,这些谁能够记得住？一般来说，在新建页面时，开发工具会直,
14、现在的DOCTYPE非常简单，相信你读两三遍就能背下它。跟DOCTYPE一样，字符集的声明也被简化了。过去，设置字符集为UTF-8是这样写的：现在的写法是：,现在的DOCTYPE非常简单，相信你读两三遍就能背下它,1.3.3 新的HTML元素HTML5不仅仅是把现有的标记进行了简化，使它们更加简短，它还定义了一批新的元素，扩展出了许多新的功能。表1-1列举了几个比较常用的新元素。,1.3.3 新的HTML元素HTML5不仅仅是把现,基于新信息技术HTML5和CSS3网页设计进阶教程课件,1.3.4 新的输入类型和属性HTML5不仅定义了一批新的元素，还为input元素提供了许多新的输入类型。比
15、如在过去，我们想要创建一个优秀的时间选择输入框，需要写非常多的代码或者使用第三方提供的插件，但在HTML5中，我们只需一条命令就能实现：,1.3.4 新的输入类型和属性HTML5不仅定义了,表1-2列举出了HTML5新增的输入类型。,表1-2列举出了HTML5新增的输入类型。,同时，HTML5还添加了许多input元素的属性，提供更多便利功能，如表1-3所示。,同时，HTML5还添加了许多input元素的属性，提供,基于新信息技术HTML5和CSS3网页设计进阶教程课件,1.3.5 简化页面元素查找方式HTML5在document对象中引入了一种新的页面元素查找方式，使用这种方式，可以更加精确
16、地获取想要获取的页面元素而不必再使用标准DOM获取所有元素再遍历查找。我们来对比一下HTML5出现前后页面元素查找方法的区别，如表1-4和表1-5所示。,1.3.5 简化页面元素查找方式HTML5在doc,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,例1-1 页面中有一个表格，鼠标点击某个单元格时改变单元格背景颜色为红色。改变点击单元格背景颜色的代码如下：,例1-1 页面中有一个表格，鼠标点击某个单元格时改变单,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,从上
17、面的代码可以看出，核心代码是：通过一行代码即可找到点击表格时鼠标所悬停的单元格，这在以前是不可想象的。相比HTML4.01，HTML5的新功能实在太多了，我们很难一一列举出来，那么接下来请你跟随我们的脚步开始HTML5新功能的探索旅程吧。,从上面的代码可以看出，核心代码是：通过一行,第2章 HTML5的多媒体,2.1 容器格式和编/解码格式2.2 浏览器支持特性检测2.3 视频、音频的脚本控制2.4 HTML5中的音频2.5 HTML5中的视频,第2章 HTML5的多媒体2.1 容器格式和编/解码格式,2.1 容器格式和编/解码格式,2.1.1 视频、音频的容器我们常见的视频文件的扩展名有mk
18、v、avi、mp4等，音频文件的扩展名有mp3、wav等，其实这些仅仅只是容器的格式，它们类似于压缩了一组文件的压缩包文件。对于一个视频文件(视频容器)，一般包含了视频轨道、音频轨道及其他一些元数据，如图2-1所示。,2.1 容器格式和编/解码格式2.1.1 视频、音,基于新信息技术HTML5和CSS3网页设计进阶教程课件,目前，视频文件(视频容器)种类有很多，此处只列举一些最常见的： Audio Video Interactive(.avi) Flash Video(.flv) MPEG-4(.mp4) Matroska(.mkv) Ogg(.ogv) WebM(.webm),目前，视频文件
19、(视频容器)种类有很多，此处只列举一些最,2.1.2 视频、音频的编/解码器视频、音频的编/解码器其实就是一组算法，用来对视频或音频进行编码和解码。对视频和音频进行编码，是为了它们能够快速地传播。需要注意的是，不同容器格式对应的编/解码器是不同的。,2.1.2 视频、音频的编/解码器视频、音频的编/,常见的音频编/解码器如下： ACC MPEG-3 Ogg Vorbis常见的视频编/解码器如下： H.264 VP8 Ogg Theora,常见的音频编/解码器如下： ACC,有些编/解码器是免费的，有些则受专利保护，需要付费，虽然HTML5很想统一指定编/解码器，但实施起来却困难重重，最后不得不
20、放弃对编/解码器的要求。因此而引发的问题就是各种不同的浏览器对视频格式的支持是有区别的，后面我们将会详细讲解。Web开发人员只能熟悉各种浏览器对视频和音频编/解码器的支持情况，并针对不同的浏览器环境嵌入不同的源文件。相信随着HTML5的发展，HTML5对不同编/解码器的支持程度会越来越高，最终支持任何格式的视频文件。,有些编/解码器是免费的，有些则受专利保护，需要付费，虽,2.2 浏览器支持特性检测,video和audio元素是HTML5的新元素，它们的可用性被有意地设计为不需要任何脚本来进行检测。你可以设置多个源文件，支持HTML5新特性的浏览器会自动选择一个它所支持的视频格式来进行播放，而
21、不支持HTML5新特性的浏览器(目前除了IE8及之前的版本，其余都支持HTML5)会完全忽略掉这两个元素。,2.2 浏览器支持特性检测video和audio,根据这一特点，我们在一般页面制作中只需要在video或audio元素中写入提示信息即可。向页面中插入视频和音频的完整代码如下：,根据这一特点，我们在一般页面制作中只需要在video或,如果支持HTML5的浏览器，如Chrome则会显示如图2-2所示的内容。,图2-2 支持HTML5浏览器显示audio及video元素,如果支持HTML5的浏览器，如Chrome则会显示如图,如果不支持HTML5的浏览器，如IE8则会显示如图2-3所示的内容
22、。,图2-3 不支持HTML5浏览器显示audio及video元素,如果不支持HTML5的浏览器，如IE8则会显示如图2-,但是，如果你想要任何页面都能正确打开所制作的视频播放页面或者你需要对视频做更多的操作，就需要使用JavaScript。检测浏览器是否支持video和audio元素，我们可以用以下JavaScript函数来进行。检测页面是否支持video的代码如下：,但是，如果你想要任何页面都能正确打开所制作的视频播放页,如果浏览器支持video及audio元素，则被创建的元素对应的DOM对象会有一个名为canPlayType()的方法，反之，该对象只会拥有一些所有元素都具有的公共属性。我
23、们先动态创建一个需要检测的对象，检测canPlayType()方法是否存在，再通过“!”运算符将结果转换成bool值，就可以检测出元素是否被支持。如果检测到浏览器不支持video或audio元素，那么我们可以使用JavaScript向页面嵌入媒体标签来引入想要播放的视频。虽然同样可以用脚本控制媒体，但是使用的是诸如Flash等其他播放技术。,如果浏览器支持video及audio元素，则被创建的元,2.3 视频、音频的脚本控制,HTML5 DOM为audio和video元素提供了方法、属性和事件。这些方法、属性和事件允许我们使用JavaScript来操作audio和video元素，开发人员可以基
24、于这些方法、属性和事件自行开发媒体播放用户界面，制作属于自己的视频或音频播放器。列举一些常用的方法和属性如表2-1表2-4所示。,2.3 视频、音频的脚本控制HTML5 DOM为,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,2.4 HTML5中的音频,2.4.1 audio元素的基本操作在下面的代码中，我们创建一个页面，页面中有一个播放器，其中加载了一首歌曲，点击播放按钮就能播放歌曲。歌曲播放页面的完整代码如下：,2.4 HTML5中的音频2.4.1 audio元,基于新信息技术HTML5和CSS3网页设计进阶教程课件,这段代
25、码中，在页面中嵌入了一个名为“audio.mp3”的音频文件，它和HTML文档在同一个路径下。在Chrome浏览器中打开的效果如图2-4所示，在图中可以看到一个音频播放器，它有播放/暂停按钮、播放时间/总播放时间、播放进度条、声音控制滑动条及更多操作按钮(展开后有一个下载按钮，有些浏览器会直接显示为下载按钮)。这是HTML5默认音频播放器，支持audio元素的不同浏览器显示的外观有区别，但功能基本一致。,这段代码中，在页面中嵌入了一个名为“audio.mp3,图2-4 简单音频播放页面,图2-4 简单音频播放页面,在上面的代码中，向页面中嵌入音频的代码为：,在上面的代码中，向页面中嵌入音频的代
26、码为：,代码中，src属性用于告诉浏览器播放的声音的数据源位置；controls属性告诉浏览器显示用户控件，如果不设置显示用户控件，则页面上将不会显示播放器，当然你也无法开始播放音乐，除非你设置音乐自动播放；开始标签和结束标签中间的文字用于为不支持audio元素的浏览器提供替代显示内容，当然，这些文字你也可以将它设置为Flash播放器等播放插件，或者直接给出播放源文件的链接地址。,代码中，src属性用于告诉浏览器播放的声音的数据源位置,标签有很多属性，用于为音频提供更多的设置，如表2-5所示。,标签有很多属性，用于为音频提供更多的设置,例2-1 制作一个带有背景音乐的页面。带有背景音乐页面的完
27、整代码如下：,例2-1 制作一个带有背景音乐的页面。带有背景音,代码非常简单，思路也不难，背景音乐有几个特点：(1) 打开页面后，背景音乐会自动播放；(2) 背景音乐不需要显示音乐播放控制器；(3) 背景音乐应该循环播放。总结了背景音乐的特点后，我们就能很容易地为页面添加背景音乐了。首先使用audio元素在页面中嵌入一个音频，使用autoplay属性设置页面加载完成后自动播放歌曲；不加入controls属性，页面中则不会生成播放控制器；使用loop属性设置音乐循环播放。,代码非常简单，思路也不难，背景音乐有几个特点：(,一般设置背景音乐的目的是给页面渲染某种氛围，但是大部分用户对页面背景音乐比
28、较反感，这个时候可以考虑在页面中添加一个按钮来设置背景音乐的打开或关闭，利用按钮或超链接关联JavaScript来控制audio元素，在页面body元素中添加以下代码可加入背景音乐控制按钮。在例2-1制作的页面的audio元素后面添加如下代码：,一般设置背景音乐的目的是给页面渲染某种氛围，但是大部分,基于新信息技术HTML5和CSS3网页设计进阶教程课件,2.4.2 使用source元素前面我们已经介绍过，音频的格式有很多，而HTML5中的audio元素支持的音频格式只有3种：Ogg Vorbis(.ogg)、MP3(.mp3)、Wav(.wav)。因为涉及专利权和特许权使用费等法律和财务问题
29、，不同浏览器对视频格式的支持是不同的。我们可以通过表2-6看到主流浏览器对音频格式的支持情况。,2.4.2 使用source元素前面我们已经介绍过,基于新信息技术HTML5和CSS3网页设计进阶教程课件,由表2-6可以看到，没有一种格式的音频文件是所有主流浏览器所支持的，如果想要让任何浏览器打开你的页面都能播放音频的话，至少需要在页面中嵌入两种不同格式的音频文件。HTML5标准也考虑到了这个问题，可以为一个audio元素设置多个源文件，格式如下：,由表2-6可以看到，没有一种格式的音频文件是所有主流浏,2.4.3 浏览器支持音频格式检测我们可以通过JavaScript检测技术来检测浏览器的音频
30、格式支持情况。我们先来看看下面这段测试浏览器是否支持.ogg类型的代码。,2.4.3 浏览器支持音频格式检测我们可以通过Ja,在2.2浏览器支持特性检测章节中，我们已经了解了如何检测浏览器是否支持audio元素，因此上面的代码直接使用我们提供的isSupportAudio()方法来判断浏览器是否支持audio元素，如果浏览器不支持audio元素，则肯定无法播放音频，直接返回false。接下来使用 createElement()方法创建一个audio元素，然后调用它的canPlayType()方法，将Ogg Vorbis类型的参数传入，测试audio能否播放.ogg格式的音频文件。,在2.2浏览
31、器支持特性检测章节中，我们已经了解了如何检,基于新信息技术HTML5和CSS3网页设计进阶教程课件, probably：表示浏览器有充分的把握可以播放此格式。 maybe：表示浏览器有可能可以播放此格式。 空字符串：表示浏览器无法播放此格式。, probably：表示浏览器有充分的把握可以播放,因此，在使用我们提供的方法判断能否播放某种格式的音频时，应该判断返回值不为空则表示可以播放。如判断能否播放.mp3格式文件：,因此，在使用我们提供的方法判断能否播放某种格式的音频时,2.5 HTML5中的视频,2.5.1 video元素的基本操作在下面的代码中，我们创建了一个页面，页面中有一个播放器，其
32、中加载了一个视频，点击播放按钮就能播放视频。视频播放页面的完整代码如下：,2.5 HTML5中的视频2.5.1 video元,基于新信息技术HTML5和CSS3网页设计进阶教程课件,看到这段代码是不是很熟悉？没错，在页面中嵌入视频和嵌入音频的代码基本一样，差别只是标签名和数据源的格式不同而已。在上面的代码中，我们在页面中嵌入了一个名为video.mp4的视频，这是最近非常流行的一首歌曲的MV。Chrome浏览器打开的效果如图2-5所示。,看到这段代码是不是很熟悉？没错，在页面中嵌入视频和嵌入,图2-5 视频播放页面,图2-5 视频播放页面,从图2-5中可以看到，视频播放器和音频播放器一样有播放
33、/暂停按钮、播放时间/总播放时间、播放进度条、声音控制滑动条及更多操作(下载)等按钮，另外还多了一个全屏模式按钮和画面。通过上面的图片及分析代码可以看到，视频并没有播放，而等待画面是视频的第一帧。在上面的代码中，向页面中嵌入视频的代码为：,从图2-5中可以看到，视频播放器和音频播放器一样有播放,代码与嵌入音频相似，因此这里不再赘述。我们直接来看看video元素有哪些属性吧。video属性如表2-7所示。,代码与嵌入音频相似，因此这里不再赘述。我们直接来看看,基于新信息技术HTML5和CSS3网页设计进阶教程课件,与audio属性进行对比，video属性多了3个：height、width和pos
34、ter。可以发现，这3个属性都是和画面有关，其中需要注意的是： 对于视频来说，同时设置height和width只能设置播放器的高度和宽度，并不会改变视频画面的长宽比。因此，我们一般只设置height和width中的一个即可。,与audio属性进行对比，video属性多了3个：he, 请记住每次在页面嵌入视频时都要设置height或width，否则页面加载完成时视频播放器只会默认大小，等加载了视频后视频播放器会扩大，将有一个从小到大的闪现变化，且视频的大小会根据视频分辨率发生变化，不利于页面布局。 poster与autoplay属性一般不同时出现，因为设置视频自动播放时，视频的封面图片会一闪而过
35、，就失去了设置它的意义。poster与preload=meta属性设置一般同时出现，这样可以为网页用户节省流量，提高网页打开速度。, 请记住每次在页面嵌入视频时都要设置height或w,2.5.2 使用source元素和audio元素相似，目前video元素支持的视频格式也是3种：Ogg Vorbis(.ogg)、MPEG-4(.mp4)、WebM(.webm)。各主流浏览器对视频格式的支持如表2-8所示。,2.5.2 使用source元素和audio元素相,通过表2-8可以看到，除了Chrome浏览器支持所有的视频格式外，其他主流浏览器都只支持3种格式中的一种或两种。如果想要让任何浏览器打开
36、你的页面都能播放视频的话，至少需要在页面中嵌入两种不同格式的视频文件。同audio元素一样，我们可以使用source元素为一个video元素设置多个源文件，格式如下：,通过表2-8可以看到，除了Chrome浏览器支持所有的,2.5.3 浏览器支持视频格式检测视频格式支持与音频格式支持类似，前面我们已经了解了音频格式检测的方法，因此此处不再赘述，只展示检测代码。检测是否支持.ogg类型的代码如下：,2.5.3 浏览器支持视频格式检测视频格式支持与音,基于新信息技术HTML5和CSS3网页设计进阶教程课件,使用我们提供的方法判断能否播放某种格式的视频，如判断能否播放.mp4格式文件如下：,使用我们
37、提供的方法判断能否播放某种格式的视频，如判断能,第3章 HTML5的拖放,3.1 浏览器支持检测3.2 实现简单拖放3.3 拖放相关的属性和事件3.4 dataTransfer对象3.5 拖放图片到浏览器,第3章 HTML5的拖放3.1 浏览器支持检测,3.1 浏览器支持检测,Internet Explorer 9、Firefox、Opera 12、Chrome以及 Safari 5 支持拖放。我们可以通过以下代码来测试浏览器是否支持HTML5拖放特性。,3.1 浏览器支持检测Internet Expl,基于新信息技术HTML5和CSS3网页设计进阶教程课件,3.2 实现简单拖放,例3-1 拖
38、动前页面效果如图3-1所示，页面中有一个方框，方框下有一张图片，将图片拖动放入方框中。,3.2 实现简单拖放例3-1 拖动前页面效果如图,图3-1 拖动前页面效果,图3-1 拖动前页面效果,拖动效果实现代码如下：,拖动效果实现代码如下：,基于新信息技术HTML5和CSS3网页设计进阶教程课件,拖放后页面效果如图3-2所示。,图3-2 拖动后页面效果,拖放后页面效果如图3-2所示。图3-2 拖动后页面,实现拖动的思路是：当光标在图片上按住鼠标左键进行移动时，将被该图片元素的id存入dataTransfer对象中；当光标移动到目标div元素中放开鼠标左键时，将被记录了id的图片元素设置为该div元
39、素的子元素。在这个过程中，我们称被拖动的元素为源元素，拖动的目的地为目的地元素。,实现拖动的思路是：当光标在图片上按住鼠标左键进行移动时,同时，目的地元素默认拒绝接收被拖放的元素，我们在页面拖动元素的过程中，需要通过preventDefault()方法关闭目的地元素默认行为。在上面的代码中，首先是题目提供的内容：一张图片和一个div元素。其代码如下：,同时，目的地元素默认拒绝接收被拖放的元素，我们在页面拖,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,当鼠标左键在目的地元素内松开时，关闭目的地元素的默认行为，再从dataTran
40、sfer对象中将保存在其中的id取出来，通过此id找到源元素，再将源元素设置为目的地元素的子元素。编写以下JavaScript代码，绑定到目的地元素的ondrop事件。,当鼠标左键在目的地元素内松开时，关闭目的地元素的默认行,基于新信息技术HTML5和CSS3网页设计进阶教程课件,3.3 拖放相关的属性和事件,1. 拖放相关的属性要实现元素的拖放，需要先设置元素的draggable=true属性，即将元素设置为可拖放。在上面的例子中并没有设置这个属性，因为链接和图片默认是可拖放的，不需要设置draggable 属性。,3.3 拖放相关的属性和事件1. 拖放相关的属性,属性设置语法如下： tru
41、e: 可以拖动。 false: 禁止拖动。 auto: 跟随浏览器定义是否可以拖动。,属性设置语法如下： true: 可以拖动,2. 拖放相关的事件与拖放相关的元素有两个，在拖放的过程中会分别触发如表3-1所示的事件。,2. 拖放相关的事件与拖放相关的元素有两个，在拖,ondragenter、ondragover和ondrop事件的默认行为是拒绝接收任何被拖放的元素，因此，我们必须阻止浏览器这种默认行为。通过event.preventDefault()方法可以阻止浏览器默认行为(对于火狐浏览器，需要使用event.stopPropagation()方法阻止浏览器默认行为)。,ondragent
42、er、ondragover和ondr,3.4 dataTransfer对象,1. dataTransfer对象的属性dataTransfer对象列入标准的属性有4个，如表3-2所示。,3.4 dataTransfer对象1. da,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,2. dataTransfer对象的方法dataTransfer对象列入标准的方法有4个，如表3-3所示。,2. dataTransfer对象的方法dat,3.5 拖放图片到浏览器,HTML5可以实现
43、从本地拖放文件到浏览器中，利用FileReader对象读取文件，并进行后续操作。此功能一般应用在图片拖放和文件上传操作中，将本地图片拖放并显示到页面指定位置或为文件选择控件提供直接拖放功能。,3.5 拖放图片到浏览器HTML5可以实现从本地,例3-2 拖动本地图片放入页面指定的位置。拖放图片到浏览器的代码如下：,例3-2 拖动本地图片放入页面指定的位置。拖放图,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,拖入图片前页面显示效果如图3-3所示，拖入图片后页面显示效果如图3-4所示。,图3-3 拖入图片前页面显示,拖入图片前页面显
44、示效果如图3-3所示，拖入图片后页面显,图3-4 拖入图片后页面显示,图3-4 拖入图片后页面显示,需要注意的是：拖动本地文件到浏览器，当浏览器支持拖放文件格式时，浏览器默认会打开本地文件；当浏览器不支持拖放文件格式时，浏览器会默认触发下载器下载该文件。同时，不同浏览器打开本地文件的方式有所不同。 Chrome：如果该文件是浏览器可浏览文件(图片等)，浏览器会在当前窗口打开文件的预览。 FireFox：如果该文件是浏览器可浏览文件(图片等)，浏览器会在新窗口打开文件的预览。 IE：如果该文件是浏览器可浏览文件(图片等)，浏览器会在当前窗口打开文件的预览。,需要注意的是：拖动本地文件到浏览器，当
45、浏览器支持拖放文,要阻止浏览器的默认行为，直接为目的地元素添加事件的方法是不行的，只能通过JavaScript在页面加载完成后为目的地元素追加相应方法。关键代码如下：,要阻止浏览器的默认行为，直接为目的地元素添加事件的方法,基于新信息技术HTML5和CSS3网页设计进阶教程课件,基于新信息技术HTML5和CSS3网页设计进阶教程课件,在ondrop事件中，先阻止元素的默认行为；再通过dataTransfer对象获取文件列表，因为我们只拖动一个图片文件，因此可以直接通过下标0找到文件，获取文件类型；然后创建一个img元素和一个FileReader对象；接下来判断获取的文件类型是否支持img元素，
46、如果不支持，则给出提示并返回；如果img元素支持文件类型，则使用FileReader对象读取文件地址并赋值给img元素，并将该img元素添加为目的地元素的子元素；最后通过FileReader对象的readAsDataURL()方法将读取到的文件编码成Data URL置于页面中。其代码如下：,在ondrop事件中，先阻止元素的默认行为；再通过da,第4章 HTML5的绘图,4.1 canvas API简介4.2 浏览器支持检测4.3 什么是canvas4.4 canvas中的坐标4.5 在canvas上绘图,第4章 HTML5的绘图4.1 canvas API简介,4.1 canvas API简
47、介,canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。没有canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了canvas，我们就再也不需要Flash了，可以直接使用JavaScript完成图形绘制。,4.1 canvas API简介canvas是H,4.2 浏览器支持检测,Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持canvas元素及其属性和方法，Internet Explorer 8以及更早的版本不支持canvas元素。和
48、其他HTML5元素一样，在支持canvas元素的浏览器中，canvas元素里面的内容是不会显示的，但是在不支持的情况下，会显示出来。于是，我们可以把它作为提示用语，用来在不支持canvas元素的浏览器中进行提示。方法如下：,4.2 浏览器支持检测Internet Expl,一般来讲，创建canvas元素并检查getContext属性就可以检测浏览器是否支持canvas元素，但是在一些浏览器下不够准确，所以再检测一下elem.getContext(2d)的执行结果，就可以完全确定。,一般来讲，创建canvas元素并检查get,关于canvas元素，有一点要补充的，那就是fillText方法。尽管
49、浏览器支持canvas元素，但是我们并不能确定它是否支持fillText方法。检测支持fillText的方法如下：,关于canvas元素，有一点要补充的，那就是fillT,4.3 什么是canvas,canvas只是HTML5中的一个标签而已，可定义一个画布，它本身没有任何作用，就相当于是一个矩形区域的画板，在画板上没有任何东西，但是你可以使用JavaScript在它上面画任何你想画的东西，你可以控制其上的每一个像素。它默认的宽度为300px，高度为150px，背景为透明色。,4.3 什么是canvascanvas只是HTM,canvas是支持样式控制的，比如设置边框、边距、背景等，但是有一个
50、地方值得注意：在设置canvas宽度和高度时，如果用style样式来设置，会把图像进行拉伸，因此请注意时刻为canvas元素设置宽度和高度。例如：,canvas是支持样式控制的，比如设置边框、边距、背景,页面显示效果如图4-1所示。,图4-1 canvas元素是行内元素的表现,页面显示效果如图4-1所示。图4-1 canvas,4.4 canvas中的坐标,canvas中的坐标与HTML标准坐标一致，即左上角为(0，0)，右下角为设置的宽度及高度(x，y)；(0，0)点称为原点，也叫初始点，即绘图开始的位置。如以下代码：,4.4 canvas中的坐标canvas中的坐标,在页面中的表现如图4-
