HTML5移动Web开发（第2版）全套教学课件

《HTML5移动Web开发（第2版）》第1章初识移动Web开发第2章HTML5新特性第3章移动端页面布局和常用事件第4章跨平台移动Web技术第5章Bootstrap响应式移动Web开发第6章Boostrap常用组件第7章Bootstrap常用样式第8章综合项目——黑马财富第1章初识移动Web开发《HTML5移动Web开发（第2版）》学习目标/Target了解移动互联网的发展状况，能够说出移动互联网发展的4个阶段熟悉移动Web开发的3种方式，能够说出移动Web、Native

App、Hybrid

App的特点了解移动Web开发，能够说出移动Web开发与PC端Web开发的区别熟悉移动端的Web浏览器，能够说出常用的移动Web浏览器掌握Visual

Studio

Code编辑器的使用，能够独立完成编辑器的安装和设置章节概述/Summary移动互联网是移动通信和互联网的结合体，它的发展给人们的生活带来了巨大的变化，用户可以通过手机、平板计算机等可移动数据终端与互联网连接，从而获得互联网中的海量资讯。本章将从移动互联网的发展入手，结合现实生活中常用的移动应用，让读者对移动Web开发有一个初步的了解，然后讲解移动端开发的常见方式以及移动端的Web浏览器，让读者对移动Web开发有进一步的了解，最后讲解Visual

Studio

Code编辑器的使用，为后面案例代码的编写打下基础。目录/Contents010203移动互联网的发展移动端开发的常见方式移动Web开发概述0405移动端的Web浏览器Visual

Studio

Code编辑器移动互联网的发展1.1先定一个小目标！了解移动互联网的发展状况，能够说出移动互联网发展的4个阶段1.1移动互联网的发展1.1移动互联网的发展移动互联网发展背景在互联网发展的同时，移动互联网也呈现出爆发式的增长，根据CNNIC（中国互联网络信息中心）发布的第47次《中国互联网络发展状况统计报告》可知，截至2020年12月，我国网民规模达9.89亿，较2020年3月增长8540万，互联网普及率达70.4%。随着移动通信网络环境的不断完善，以及智能手机的进一步普及，移动互联网应用向用户各类生活需求深入渗透，促进手机上网使用率增长，增长势头强劲。移动互联网结合日常生活移动互联网已经与人们的生活息息相关。用户可以通过手机、平板计算机等终端设备接入移动应用，与互联网连接，从而在互联网上获取海量信息。例如，通过手机上的浏览器访问购物、医疗、旅游等移动应用程序。1.1移动互联网的发展移动互联网发展的4个阶段1.1移动互联网的发展第一阶段是中国移动互联网的起步阶段。2000年11月10日，中国移动推出“移动梦网计划”，

打造开放、合作、共赢的产业价值链。2002年5月17日，中国电信在广州启动“互联星空”计划，标志着ISP和ICP开始联合打造宽带互联网产业。2002年5月17日，中国移动率先在全国范围内正

式推出GPRS业务。第二阶段是无线应用协议（WAP）广泛应用阶段。WAP于1998年初公布，1999-2000年，无线接入服务正式进入商用领域，WAP广为人知，成为各行业关注的重点。WAP是一项全球性的网络通信协议，它使移动互联网有了一个通行的标准，其目标是将互联网丰富的信息和先进的业务引入手机等无线终端。用户主要在移动互联网上看新闻、读小说、听音乐，开始进入以内容为主的移动互联网时代。第一阶段

2000-2002第二阶段

2003-2005移动互联网发展的4个阶段1.1移动互联网的发展第三阶段是互动娱乐的移动互联网阶段。中国移动互联网除了内容之外，开始有了一些功能性的应用，如手机QQ、手机搜索、手机流媒体、手机游戏等，作为传统互联网的补充，移动互联网占据了用户大量的碎片时间。第四阶段是移动互联网产品广泛应用阶段。随着3G、4G和5G网络的应用，移动应用在手机上得到了广泛的使用，一些新名词开始出现，如SoLoMoCo指Social（社交的）、Local（本地的）、Mobile（移动的）、Commerce（商务化）。这个阶段，移动互联网产品得到进一步发展和重视，大部分互联网公司都会设立专门的移动终端部门，负责公司产品在移动终端的战略布局和发展。第三阶段

2006-2008第四阶段

2009年至今移动端开发的常见方式1.2先定一个小目标！熟悉移动端开发的3种常见方式，能够说出移动Web、Native

App、Hybrid

App的特点1.2移动端开发的常见方式目前市场上主流的移动端开发方式有3种。移动Web开发：编写运行在移动Web浏览器中的Web应用，通常是通过单独制作移动Web页面或制作响应式页面同时兼容PC端和移动端的方式实现。Native

App开发：编写运行在本地操作系统上（如iOS、Android）的应用程序，交互性强。一般使用的开发语言是Java、C++、Objective-C等。Hybrid

App开发：通过原生应用搭建App的外部容器，并使用HTML5、CSS3、Javascript等移动Web技术编写移动Web页面，将移动Web页面封装在外部容器中，以App的形式与用户交互。1.2移动端开发的常见方式3种开发方式的区别1.2移动端开发的常见方式开发方式开发成本维护更新用户体验商店认可安装跨平台移动Web低简单差不认可不需要优Native

App高复杂优认可需要差Hybrid

App中简单中认可需要优移动Web开发概述1.3先定一个小目标！了解移动Web开发，能够说出移动Web开发的特点1.3移动Web开发概述移动Web开发现状随着智能手机、平板计算机等移动设备的普及以及硬件设备的完善，移动Web浏览器对新技术的支持日益加大，移动Web开发的用户体验和网站性能也得到了逐步的提高，这些都极大地促进了移动Web技术的发展。1.3移动Web开发概述1.3移动Web开发概述移动Web开发特点移动Web开发主要由HTML、CSS和Javascript等技术实现，项目的呈现依赖于移动端Web浏览器。注意事项：

由于屏幕大小的限制，在移动Web开发中，页面的结构不能过于复杂，开发人员要提炼出该网站核心的功能，并简洁清晰地呈现出来。

页面的一切交互活动由鼠标控制变成了手指触屏控制，操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。因此移动Web开发需要增加一些触屏事件。移动端的Web浏览器1.4先定一个小目标！熟悉移动端的Web浏览器，能够说出常用的移动Web浏览器1.4移动端的Web浏览器1.4移动端的Web浏览器手机中常用的移动Web浏览器。例如，Android系统内置的AndroidBrowser、iOS系统内置的Mobile

Safari，以及一些国产的浏览器如UC浏览器、QQ浏览器、百度浏览器等。它们可以识别和解析HTML、CSS、Javascript代码。QQ浏览器UC浏览器百度浏览器搜狗浏览器对比移动端网页和PC端网页。1.4移动端的Web浏览器1.4移动端的Web浏览器通过同一个网站针对不同终端的设计对比，可以反映出移动Web浏览器的以下3个特点。移动端Web浏览器受到屏幕尺寸的限制，不能显示太多的内容。移动端Web浏览器支持一些手势操作，如触屏、滑动、缩放等。移动端Web浏览器需要考虑硬件因素，设备性能问题。Visual

Studio

Code编辑器1.5先定一个小目标！了解Visual

Studio

Code，能够说出Visual

Studio

Code的特点1.5.1

Visual

Studio

Code概述1.5.1

Visual

Studio

Code概述Visual

Studio

Code是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于Web前端开发人员，一个强大的编辑器可以使开发变得简单、便捷、高效。1.5.1

Visual

Studio

Code概述Visual

Studio

Code编辑器特点：轻巧、极速，占用系统资源较少。具备智能代码补全、语法高亮显示、自定义快捷键和代码匹配等功能。跨平台，可用于macOS、Windows和Linux系统。

主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色（默认为黑色），也可以快速查看最近打开的项目文件和查看项目文件结构。

提供丰富的扩展（extension），用户可根据需要自行下载和安装扩展。常用的扩展有

Chinese和Live

Server等。先定一个小目标！掌握Visual

Studio

Code的下载和安装，能够独立安装编辑器1.5.2下载和安装Visual

Studio

Code1.5.2下载和安装Visual

Studio

Code下载Visual

Studio

Code编辑器：Visual

Studio

Code官方网站单击按钮下载安装包至本地1.5.2下载和安装Visual

Studio

Code安装Visual

Studio

Code编辑器：许可协议界面双击安装包启动安装程序选择附加任务界面1.5.2下载和安装Visual

Studio

Code安装Visual

Studio

Code编辑器：准备安装界面进入准备安装界面安装完成界面1.5.2下载和安装Visual

Studio

CodeVisual

Studio

Code编辑器的主界面：1.5.2下载和安装Visual

Studio

Code多学一招：设置主题颜色将主界面默认颜色（黑色）设置为“Light+(default

light)”。1.5.2下载和安装Visual

Studio

Code多学一招：设置主题颜色设置后的效果如下。先定一个小目标！掌握常用扩展的安装，能够成功安装Chinese和Live

Server扩展1.5.3安装常用扩展1.5.3安装常用扩展安装Chinese扩展将Visual

Studio

Code编辑器的语言（默认英文）设置为中文。实现步骤：单击左边栏中的第5个图标按钮”“（Extensions扩展按钮）然后在搜索框中输入关键词“Chinese”找到中文语言扩展，最后单击“Install”按钮进行安装。Chinese扩展安装过程Chinese扩展安装成功1.5.3安装常用扩展安装Live

Server扩展LiveServer扩展可以创建一个本地服务器来预览网页，服务器的默认端口是5500，用户也可以自行设置端口号、默认浏览器等。使用LiveServer扩展运行程序时，如果对代码进行了修改，不需要重新刷新浏览器即可更新页面内容。”具体安装步骤：单击左边栏中的第5个图标按钮“ （

Extensions扩展按钮），然后在搜索框中输入关键词“live

server”找到该扩展，单击“安装”按钮进行安装。Live

Server扩展安装过程1.5.3安装常用扩展安装Live

Server扩展先定一个小目标！掌握Visual

Studio

Code的使用，能够灵活编写网页程序1.5.4使用Visual

Studio

Code1.5.4使用Visual

Studio

Code使用Visual

Studio

Code编辑器编写一个简单的Hello页面，效果如图：1.5.4使用Visual

Studio

Code

在Visual

Studio

Code欢迎页面中单击“打开文件夹…”选项，选择某个文件夹（如C:\code），进入Visual

Studio

Code代码编辑页面。在C:\code目录下新建文件夹，命名为chapter01，用于存放第1章的代码。创建C:\code\chapter01\demo01.html，编写一个简单的Hello页面。演示在Visual

Studio

Code中如何编写代码在C:\code\chapter01\demo01.html文件中，编写代码。<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body>Hello</body></html>STEP

011.5.4使用Visual

Studio

Code完成代码编写后，Visual

Studio

Code编辑器中的代码展示界面。1.5.4使用Visual

Studio

Code测试网页程序通过Live

Server扩展运行demo01.html程序，在代码编辑区域任意位置右击鼠标，在弹出的菜单中选择“Open

with

Live

Server”。STEP

021.5.4使用Visual

Studio

Codedemo01.html文件运行结果：1.5.4使用Visual

Studio

Code网页显示“Hello”内容。浏览器自动打开的网址为:5500/chapter01/demo01.html。（浏览器自动隐藏了“http://”）表示主机地址，也就是Live

Server创建的本地网站服务器的IP地址；5500表示端口，即访问服务器中的5500端口；chapter01/demo01.html是文件资源在服务器上对应的路径。本章小结本

章

小

结本章首先介绍了移动互联网的发展状况，然后讲解了移动端开发的常见方式、移动Web开发概述以及移动端的Web浏览器相关内容，最后讲解了Visual

StudioCode编辑器的下载和安装以及相关配置，并体验了Visual

Studio

Code编辑器

的简单使用。THEEND第2章HTML5新特性《HTML5移动Web开发（第2版）》学习目标/Target掌握localStorage和sessionstorage的使用，能够实现数据的设置、获取和删除掌握Web

Storage事件监听，能够监听数据的变化掌握<video>、<audio>标签的使用，能够实现页面中视频、音频的处理熟悉地理定位的使用，能够实现Geolocation地理定位和百度地图地理定位学习目标/Target掌握拖曳操作，能够使用拖曳事件实现源对象在目标对象中的拖动效果掌握文件操作，能够使用FileReader对象读取文件内容掌握Canvas的使用，能够在画布中绘制图形章节概述/Summary随着移动互联网的快速发展，基于HTML5的应用越来越普遍，也变得越来越复杂。为了满足各种各样的需求，HTML5提供了很多新的特性。HTML5新特性主要包括Web

Storage、视频与音频、地理定位、拖曳操作、文件操作和Canvas，这些新特性增强了网页的功能。本章将针对这些HTML5新特性进行详细讲解。目录/Contents010203Web

Storage视频与音频地理定位目录/Contents040506拖曳操作文件操作CanvasWeb

Storage2.12.1

Web

Storage为什么学习Web

Storage：在HTML5之前，我们通常使用Cookie进行数据存储，例如在本地设备上存储历史活动的信息，但这种方式的缺点是存储的空间大小只有4KB左右，存储的数据解析起来比较复杂。为此，HTML5提出了网络存储的相关解决方案，即Web

Storage（Web存储）。先定一个小目标！了解Web

Storage的概念，能够说出Web

Storage的特点2.1.1

Web

Storage的概念2.1.1

Web

Storage的概念Web

Storage的作用：可以将数据存储在本地，如保存用户的偏好设置、复选框的选中状态、文本框默认填写的值等。用户在浏览器中刷新网页时，网页通过Web

Storage就可以知道用户之前所做的一些修改，而不需要将用户修改的内容存储在服务器端。2.1.1

Web

Storage的概念Web

Storage和Cookie的区别：类似于Cookie，但相比Cookie可以减少网络流量，因为Web

Storage存储的数据不会发送给服务器，而Cookie存储的数据会由浏览器通过HTTP请求自动发送给服务器。将数据存储在Web

Storage可以减少数据在浏览器和服务器间不必要地来回传递。2.1.1

Web

Storage的概念Web

Storage中包含两个关键的对象，都是Web

Storage的实例，都能使用Web

Storage接口提供的方法和属性。localStorage对象：用于本地存储。sessionstorage对象：用于区域存储。2.1.1

Web

Storage的概念Web

Storage具有以下5个特点：数据的设置和读取比较方便。容量较大，可以存储大约5MB数据。只能存储字符串，如果要存储JSON对象，则可以使用JSON.stringify()和JSON.parse()方法分别进行序列化和反序列化。本地数据可以即时获得。借助浏览器的缓存，整个页面和数据都可以保存在本地，从本地读数据比通过网络从服务器获得数据快得多，可以立即显示网页中的缓存的内容。数据可以临时存储。很多时候数据只需要在用户浏览单个页面期间使用，关闭页面后数据就可以丢弃，这种情况使用sessionstorage非常方便。先定一个小目标！掌握localStorage，能够使用localStorage提供的属性和方法实现数据的设置、获取和删除2.1.2

localStorage2.1.2

localStoragelocalStorage的主要作用：本地存储，它可以将数据按照键值对的方式保存在浏览器中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化保存。localStorage与sessionstorage的区别：存储数据的生命周期不同。locaStorage是永久性存储，而sessionstorage的生命周期与会话保持一致，会话结束时数据消失。从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取localStorage保存的数据。而sessionstorage的数据保存在内存中，当浏览器关闭后，内存将被自动清除。2.1.2

localStoragelocalStorage的优势：拓展了Cookie的4KB限制，并且可以将第一次请求的数据直接存储到本地，其容量相当于一个5MB大小的数据库。localStorage也有一些局限：IE浏览器在8以上版本才支持localStorage。不同浏览器保存的数据量大小不统一。目前所有的浏览器都会把localStorage的值类型限定为String类型，对于比较常用的Javascript对象类型需要转换成字符串保存。localStorage在浏览器的隐私模式下是不可读取的。

localStorage不能被网络爬虫抓取到。2.1.2

localStoragelocalStorage对象提供的方法和属性方法/属性描述key(n)该方法用于返回localStorage对象中第n个key的名称setItem(key,value)该方法接收键名和值作为参数，将会把键值对存储到localStorage中，如果键名存在，则更新其对应的值getItem(key)该方法接收一个键名作为参数，返回键名对应的值removeItem(key)该方法删除键名为key的存储内容clear()该方法清空所有存储内容length该属性返回localStorage对象中包含的item的数量2.1.2

localStorage使用localStorage对象的方法来设置、获取和删除数据：2.1.2

localStorage使用localStorage对象的方法来设置、获取和删除数据：2.1.2

localStorage<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><input

type="text"

id="username"><button

id="setData">设置数据</button><button

id="getData">获取数据</button><button

id="delData">删除数据</button></body></html>STEP

01定义按钮创建C:\code\chapter02\demo01.html，定义用于输入数据的文本框和用于设置数据、获取数据和删除数据的按钮。2.1.2

localStorage<script>var

username

=

document.querySelector("#username");//单击“设置数据”按钮，设置数据

document.querySelector("#setData").onclick=function(){var

val=username.value;

//获取username里面的值

localStorage.setItem("username",val);};</script>STEP

02绑定单击事件修改demo01.html，在</body>结束标签前添加Javascript代码，分别获取设置数据、获取数据和删除数据按钮的元素并绑定单击事件。2.1.2

localStorage//单击“获取数据”按钮，获得数据

document.querySelector("#getData").onclick=function(){alert(localStorage.getItem("username"));};//单击“删除数据”按钮，删除数据

document.querySelector("#delData").onclick=function(){localStorage.removeItem("username");};STEP

02绑定单击事件修改demo01.html，在</body>结束标签前添加Javascript代码，分别获取设置数据、获取数据和删除数据按钮的元素并绑定单击事件。2.1.2

localStorageSTEP

03在浏览器中访问demo01.html初始页面效果。2.1.2

localStorageSTEP

04设置数据在文本框中输入“admin”，然后单击“设置数据”按钮。2.1.2

localStorageSTEP

05获取数据查看数据是否设置成功。如果成功会显示在警告框中。2.1.2

localStorageSTEP

06删除数据删除后再次单击“获取数据”的按钮。先定一个小目标！掌握sessionstorage，能够使用sessionstorage提供的属性和方法实现数据的设置、获取和删除2.1.3

sessionstorage2.1.3

sessionstoragesessionstorage的特点：存储的数据只在当前网页所在的浏览器标签页内有效，只要这个浏览器标签页没有关闭，即使刷新页面或进入同源的另一页面，数据仍然存在。当浏览器标签页关闭后，sessionstorage中存储的数据将被自动清除。如果打开了不同的标签页，即使是同一页面，sessionstorage对象也是不同的。所以如果想要让不同标签页下的网页不能互相访问数据，可以将数据保存在sessionstorage中。sessionstorage对象也提供了一些方法和属性：与localStorage对象的方法和属性类似。2.1.3

sessionstorage使用sessionstorage对象的方法设置数据，效果如图：2.1.3

sessionstorage<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><input

type="text"

id="username"><button

id="setData">设置数据</button></body></html>STEP

01定义按钮创建C:\code\chapter02\demo02.html，定义一个文本框和一个“设置数据”按钮，具体代码如下。2.1.3

sessionstorage<script>var

username

=

document.querySelector("#username");//单击“设置数据”按钮，设置数据

document.querySelector("#setData").onclick=function(){var

val=username.value;

//获取username里面的值

sessionstorage.setItem("username",val);};</script>STEP

02绑定单击事件修改demo02.html，在</body>结束标签前添加Javascript代码，获取“设置数据”按钮的元素并绑定单击事件。2.1.3

sessionstorageSTEP

03在浏览器中访问demo01.html初始页面效果。2.1.3

sessionstorageSTEP

04设置数据在文本框中输入“admin”，然后单击“设置数据”按钮。2.1.3

sessionstorageSTEP

05打开新标签页，观察数据是否存在在浏览器重新访问浏览器中访问demo01.html文件，查看sessionstorage中的admin数据是否存在。先定一个小目标！掌握Web

Storage事件监听，能够监听数据的变化2.1.4

Web

Storage事件监听2.1.4

Web

Storage事件监听storage事件触发的条件：当使用Web

Storage存储的数据发生变化时，会触发window对象的storage事件。我们可

以监听该事件并指定事件处理函数，当其他页面中的localStorage或sessionstorage中保存的数据发生改变时，就会执行事件处理函数。2.1.4

Web

Storage事件监听监听storage事件的示例代码如下：//window.addEventListener(事件名,事件处理函数);

window.addEventListener("storage",function

(event){console.log(event.key);});上述代码中，事件处理函数接收一个event对象作为参数，event对象的key属性保存发生变化的数据的键名。2.1.4

Web

Storage事件监听event对象的属性属性描述event.key获取在sessionstorage或localStorage中被修改的数据键值event.oldValue获取在sessionstorage或localStorage中被修改前的值event.newValue获取在sessionstorage或localStorage中被修改后的值event.url获取在sessionstorage或localStorage中值的页面URL地址event.storageArea获取变动的sessionstorage对象或localStorage对象2.1.4

Web

Storage事件监听storage事件并不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionstorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。通过这种机制，可以实现多个页面之间的通信。由于sessionstorage无法在不同标签页的网页中互相访问数据，当使用storage事件时，可以将页面放在<iframe>标签创建的框架中，此时在框架内通过storage事件可以监听外层页面的sessionstorage的数据变化。2.1.4

Web

Storage事件监听使用storage事件对页面中的数据进行监听，效果如图：demo03-1初始页面效果设置数据2.1.4

Web

Storage事件监听使用storage事件对页面中的数据进行监听，效果如图：demo03-2初始页面效果修改后与修改前的用户名<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><label>用户名：</label><input

type="text"id="username"><button

id="save">保存</button></body></html>STEP

01定义页面结构创建C:\code\chapter02\demo03-1.html，定义一个文本框用来输入用户名，定义一个“保存”按钮用来将文本框中的用户名保存在localStorage中。2.1.4

Web

Storage事件监听<script>var

username

=

document.querySelector("#username");//单击“保存”按钮，设置数据

document.querySelector("#save").onclick=function(){var

val=username.value;

//获取username里面的值

localStorage.setItem("username",val);};</script>STEP

01获取元素并绑定事件修改demo03-1.html文件，在</body>结束标签前添加Javascript代码，获取“保存”按钮的元素并绑定单击事件。2.1.4

Web

Storage事件监听STEP

02在浏览器中访问demo03-1.htmldemo03-1.html初始页面效果如下。2.1.4

Web

Storage事件监听STEP

03设置数据在文本框中输入“user1”，单击“保存”按钮。2.1.4

Web

Storage事件监听<body><span>新的用户名:</span><span

id="newval"></span><br><span>旧的用户名:</span><span

id="oldval"></span></body>STEP

04监听数据变化并显示创建C:\code\chapter02\demo03-2.html，通过storage事件监听数据的变化，并定义两个<span>标签用来显示数据修改前和修改后的值。2.1.4

Web

Storage事件监听<script>var

newdata

=

document.getElementById("newval");var

olddata

=

document.getElementById("oldval");window.addEventListener("storage",

function

(e)

{//设置元素的内容为修改后的值//设置元素的内容为修改前的值newdata.innerHTML

=

e.newValue;olddata.innerHTML

=

e.oldValue;});</script>STEP

04监听数据变化并显示修改demo03-2.html文件，在</body>结束标签前添加Javascript代码，实现数据的监听。2.1.4

Web

Storage事件监听STEP

05在浏览器中访问demo03-2.htmldemo03-2.html初始页面效果。2.1.4

Web

Storage事件监听STEP

06切换到demo03-1.html页面在文本框中输入“user2”，单击“保存”按钮。再切换到demo03-2.html网页。2.1.4

Web

Storage事件监听视频与音频2.2先定一个小目标！掌握<video>标签，能够使用<video>标签实现页面中视频效果2.2.1<video>标签2.2.1<video>标签HTML5为网页提供了处理视频的能力，那么视频在网页中的应用有哪些呢？2.2.1<video>标签<video>标签的作用：用于定义视频播放器，它不仅是一个播放视频的标签，还提供了控制栏，用来实现播放、暂停、进度和音量控制、全屏等功能。<video>标签的基本语法如下：<video

src="视频文件路径"controls>浏览器不支持video</video>2.2.1<video>标签<video>标签的基本属性：src属性：用于设置视频文件的路径。controls属性：用于为视频提供控制栏。也可以使用width和height属性设置视频宽度和高度。2.2.1<video>标签<video>标签支持以下3种视频格式：Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件。WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。2.2.1<video>标签<video>标签中可以使用<source>标签指定多个备用的不同格式的文件路径，语法如下：<video

controls><source

src="视频文件地址"type="video/格式"><source

src="视频文件地址"type="video/格式"></video>上述代码中，Ogg对应的type为video/ogg，MPEG4对应的type为video/mp4，WebM对应的type为video/webm。2.2.1<video>标签创建网页中的视频播放器，效果如图：<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><video

controls

width="400"><source

src="video/scenery.mp4"

type="video/mp4"></video></body></html>STEP

01定义视频播放器创建C:\code\chapter02\demo04.html，使用<video>标签定义视频播放器。2.2.1<video>标签STEP

02在浏览器中访问demo04.html页面中显示视频播放器。2.2.1<video>标签先定一个小目标！掌握<audio>标签，能够使用<audio>标签实现页面中音频效果2.2.2<audio>标签2.2.2<audio>标签HTML5为网页提供了处理音频的能力。音频在网页中种的应用有很多，例如使用网页中QQ音乐播放器听音乐。2.2.2<audio>标签<audio>标签的作用：HTML5提供的<audio>标签用来定义Web上的声音文件或音频流。<audio>标签的基本语法如下：<audio

src="音频文件路径"controls>浏览器不支持audio</audio>2.2.2<audio>标签<audio>标签支持以下3种视频格式：Ogg：Ogg音频格式类似于MP3音频格式。同等条件下，Ogg格式音频文件的音质、体积大小优于MP3音频格式，其音频文件格式表示方式为audio/ogg。MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（MovingPictureExpertsGroupAudioLayerIII），简称为MP3，它被用来大幅度地降低音频数据量，其音频文件格式表示方式为audio/mp3。WAV：是录音时用的标准的Windows文件格式，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种，其音频文件格式表示方式为audio/wav。2.2.2<audio>标签<audio>标签同样支持引入多个音频源，使用<source>标签使用<source>标签来定义，语法如下：<audio

controls><source

src="音频文件地址"type="audio/格式"><source

src="音频文件地址"type="audio/格式"></audio>2.2.2<audio>标签创建页面中的音频播放器，效果如图：STEP

01定义音频播放器创建C:\code\chapter02\demo05.html，使用<audio>标签定义音频播放器。2.2.2<audio>标签<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><audio

src="audio/music.mp3"controls>您的浏览器不支持audio</audio></body></html>STEP

02在浏览器中访问demo05.html页面中显示音频播放器。2.2.2<audio>标签先定一个小目标！掌握video和audio对象，能够使用这些对象的方法和属性实现手动控制视频和音频播放器2.2.3

video和audio对象2.2.3

video和audio对象video和audio对象的常用方法方法描述load()加载媒体文件，为播放做准备，通常用于播放前的预加载，也用于重新加载媒体文件play()播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放pause()暂停播放媒体文件canPlayType()测试浏览器是否支持指定的媒体类型2.2.3

video和audio对象video和audio对象的常用属性属性描述currentSrc返回当前视频/音频的URLcurrentTime设置或返回视频/音频中的当前播放位置（以秒计）duration返回视频/音频的长度（以秒计）ended返回视频/音频的播放是否已结束error返回表示视频/音频错误状态的MediaError对象paused返回视频/音频是否暂停muted设置或返回是否静音volume设置或返回视频/音频的音量2.2.3

video和audio对象手动控制视频播放器，效果如图：<body><video

width="300"

controls><source

src="video/scenery.mp4"

type="video/mp4"></video><br><button>播放</button><button>暂停</button><button>静音</button></body>STEP

01定义音频播放器页面结构创建C:\code\chapter02\demo06.html，使用<video>标签定义视频播放器，并定义3个按钮。2.2.3

video和audio对象<script>var

video

=

document.getElementsByTagName("video")[0];var

btn

=

document.getElementsByTagName("button");btn[0].onclick

=

function

()

{video.play();};btn[1].onclick

=

function

()

{video.pause();};btn[2].onclick

=

function

()

{video.muted

=

!video.muted;};</script>STEP

02设置按钮控制视频播放器修改demo06.html，添加Javascript代码，实现手动控制视频的播放、暂停和静音。2.2.3

video和audio对象STEP

03在浏览器中访问demo06.html页面中显示视频播放器和三个按钮。设置按钮控制视频的播放、暂停、静音2.2.3

video和audio对象地理定位2.32.3地理定位地理定位在日常生活中应用比较广泛，如互联网打车、在线地图等。HTML5增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息。另外，百度等互联网公司也提供了地理定位的接口。先定一个小目标！熟悉Geolocation地理定位的使用，能够在网页中显示地理定位信息2.3.1

Geolocation地理定位2.3.1

Geolocation地理定位Geolocation接口：封装了获取位置信息的技术细节，开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度。目前，Geolocation接口已经得到了大部分浏览器的支持：FirefoxIE

9OperaSafariChrome2.3.1

Geolocation地理定位Geolocation的用法：navigator.geolocation对象提供了getCurrentPosition()方法获取当前地理位置。navigator是浏览器的内置对象。当getCurrentPosition()方法被调用时，会发起一个异步请求，浏览器会调用底层的硬件来更新当前的位置信息。2.3.1

Geolocation地理定位getCurrentPosition()方法的参数说明如下：getCurrentPosition(successCallback,

errorCallback)successCallback：定位成功时执行的回调函数。errorCallback：定位失败时执行的回调函数。2.3.1

Geolocation地理定位当getCurrentPosition()方法成功获取地理信息后，会在successCallback回调函数中传入position对象。该position对象包含coords和timestamp两个属性。Coords：是一个coordinates对象，包含当前位置的一些信息。Timestamp：获取到位置的时间戳。2.3.1

Geolocation地理定位coords包含的信息属性名描述latitude十进制表示的纬度坐标longitude十进制表示的经度坐标accuracy当前经纬度信息的精度（单位：m）altitude海拔高度（单位：m）altitudeAccuracy当前海拔高度的精度heading当前设备的朝向（单位：弧度），从正北开始计算2.3.1

Geolocation地理定位获取用户当前位置信息，效果如图：页面初始效果是否允许获取您的位置获取地理位置2.3.1

Geolocation地理定位获取用户当前位置信息，效果如图：设置虚拟地理定位获取地理位置<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><p

id="demo">获得您的坐标：</p><button

onclick="getLocation()">试一下</button></body>STEP

01获取用户当前的经纬度坐标创建C:\code\chapter02\demo07.html，利用Geolocation进行地理位置定位，获取用户当前的经纬度坐标。2.3.1

Geolocation地理定位<script>var

x

=

document.getElementById("demo");function

getLocation()

{if

(navigator.geolocation)

{navigator.geolocation.getCurrentPosition(showPosition,

showError);}

else

{x.innerHTML="当前浏览器不支持地理定位";}}</script>STEP

02获取用户当前的经纬度坐标修改demo07.html，添加Javascript代码，判断当前浏览器是否支持地理定位。2.3.1

Geolocation地理定位//纬度//经度//获取定位成功，显示位置信息

function

showPosition(position){x.innerHTML

="Latitude:"

+

position.coords.latitude

+"<br>Longitude:"

+

position.coords.longitude;}STEP

03获取用户当前的经纬度坐标修改demo07.html，继续添加Javascript代码，定义showPosition()函数，用于显示位置信息。2.3.1

Geolocation地理定位获取用户当前的经纬度坐标定义showError()函数，用于显示出错信息。function

showError(error)

{switch

(error.code)

{case

error.PERMISSION_DENIED:x.innerHTML="用户拒绝地理定位请求";

break;case

error.POSITION_UNAVAILABLE:x.innerHTML="位置信息不可用";

break;case

error.TIMEOUT:x.innerHTML="获取用户位置的请求超时";

break;case

error.UNKNOWN_ERROR:x.innerHTML="发生了一个不明错误";

break;}}STEP

042.3.1

Geolocation地理定位STEP

05在浏览器中访问demo07.html初始页面效果。2.3.1

Geolocation地理定位STEP

06获取位置单击“试一下”按钮后，会提示是否允许当前页面获取您的位置。2.3.1

Geolocation地理定位STEP

07显示位置信息单击“允许”按钮后，页面就会显示获取定位后的结果。2.3.1

Geolocation地理定位STEP

08设置虚拟地理定位单击开发者工具右上角的“”按钮，在弹出的菜单中选择“More

tools”-

“Sensors”，然后在Location下拉菜单中选择“Shanghai”，表示虚拟上海的地理位置。2.3.1

Geolocation地理定位STEP

09显示位置信息再次“试一下”按钮，页面显示虚拟位置的信息。2.3.1

Geolocation地理定位先定一个小目标！熟悉百度地图地理定位的使用，能够实现百度地图地理定位2.3.2百度地图地理定位百度地图的作用：在实际开发中，利用第三方的API（例如百度地图）可以很方便地实现地理定位和信息的获取。百度地图提供了丰富的地图数据库以及地理定位、地图、导航、搜索和路线规划等功能。百度地图的定位API：基于用户当前位置的，将用户位置（经/纬度）作为参数进行传递，从而实现相应的功能，并支持各类应用的开发者对地理位置的获取需求。2.3.2百度地图地理定位2.3.2百度地图地理定位实现全景图页面，效果如图：全景图页面效果STEP

01进入百度地图开放平台官网进入百度地图开放平台官网，选择导航栏中的“开发文档”下的“Web开发”，找到“Javascript

API”选项。2.3.2百度地图地理定位STEP

02Javascript

API单击“Javascript

API”，进入以下页面。2.3.2百度地图地理定位STEP

03DEMO演示单击“Javascript

API

v2.0”选项，进入新页面。2.3.2百度地图地理定位STEP

04展示全景图单击“DEMO演示”按钮，进入新页面。2.3.2百度地图地理定位STEP

05复制代码并粘贴创建C:\code\chapter02\demo08.html，复制代码并将代码粘贴到本文件中。<!DOCTYPE

html><html><head><title>普通地图&全景图</title><meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/></head><body><div

id="panorama"></div><div

id="normal_map"></div></body>2.3.2百度地图地理定位STEP

06复制代码并粘贴将代码复制到</head>标签结束前。<script

type="text/javascript"src="/api?v=3.0&ak=您的密钥"></script>2.3.2百度地图地理定位STEP

07复制代码并粘贴将代码复制到</head>标签结束前。<style

type="text/css">body,html

{width:

100%;height:

100%;overflow:

hidden;margin:

0;font-family:"微软雅黑";}#panorama

{height:

50%;overflow:

hidden;}#normal_map

{height:

50%;overflow:

hidden;}</style>2.3.2百度地图地理定位STEP

08复制代码并粘贴将代码复制到</body>标签结束前。<script

type="text/javascript">//全景图展示var

panorama

=

new

BMap.Panorama("panorama");panorama.setPosition(new

BMap.Point(120.320032,31.589666));//根据经纬度坐标展示全景图

panorama.setPov({heading:-40,pitch:6});

panorama.addEventListener("position_changed",function

(e){//全景图位置改变后，普通地图中心点也随之改变var

pos=panorama.getPosition();map.setCenter(new

BMap.Point(pos.lng,pos.lat));marker.setPosition(pos);});</script>2.3.2百度地图地理定位STEP

09复制代码并粘贴将代码复制到</script>标签结束前。//普通地图展示var

mapOption={mapType:

BMAP_NORMAL_MAP,maxZoom:

18,drawMargin:

0,enableFulltimeSpotClick:

true,enableHighResolution:

true}var

map

=

new

BMap.Map("normal_map",

mapOption);var

testpoint

=

new

BMap.Point(120.320032,

31.589666);map.centerAndZoom(testpoint,

18);2.3.2百度地图地理定位STEP

10复制代码并粘贴将代码复制到</script>标签结束前。var

marker

=

new

BMap.Marker(testpoint);marker.enableDragging();map.addOverlay(marker);marker.addEventListener("dragend",

function

(e)

{panorama.setPosition(e.point);//拖动marker后，全景图位置也随着改变

panorama.setPov({heading:-40,pitch:6});});map.enableScrollWheelZoom();map.enableContinuousZoom();//启用滚轮放大缩小，默认禁用//启用地图惯性拖拽，默认禁用2.3.2百度地图地理定位STEP

11在浏览器中访问demo08.html页面显示“百度未授权使用地图API”。2.3.2百度地图地理定位STEP

12申请个人密钥在百度地图开放平台中申请密钥。2.3.2百度地图地理定位STEP

13复制密钥申请成功后复制密钥。2.3.2百度地图地理定位STEP

14粘贴密钥粘贴到demo08.html文件中“您的密钥”位置，保存代码并刷新页面。2.3.2百度地图地理定位STEP

15坐标拾取器打开百度地图开放平台官网，选择导航栏中的“开发文档”下的“开发者工具”，找到“坐标拾取器”选项。2.3.2百度地图地理定位STEP

16选取坐标单击“坐标拾取器”后，可以在搜索栏搜索关键字，也可以直接在地图上选择坐标，然后复制右上角的坐标点，粘贴到文件中坐标处。2.3.2百度地图地理定位STEP

17展示坐标对应的全景图将选取坐标的经纬度复制到代码中，页面显示坐标对应的全景图。2.3.2百度地图地理定位拖曳操作2.42.4拖曳操作拖曳操作的实现：需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的Javascript来实现拖曳效果，实现起来比较复杂。如何让实现拖曳效果变得简单呢？HTML5为我们提供了更好用的接口或者事件，在很大程度上降低了页面中拖曳交互的实现难度。先定一个小目标！熟悉拖曳的概念，能够说出拖曳的的基本过程2.4.1拖曳的概念拖曳的概念：是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖曳页面中的指定元素到另一个元素中。拖曳过程：首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果源对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。2.4.1拖曳的概念2.4.1拖曳的概念源对象：表示被拖动的元素。为元素添加draggable属性可以设置此元素为源对象，示例代码如下。<p

draggable="true"></p><p>标签的draggable属性的值为true，表示<p>标签是一个可以被鼠标拖曳的源对象。需要注意的是，图片和链接默认是可以拖动的，它们不用添加

draggable属性，就可以进行拖曳。2.4.1拖曳的概念目标对象：源对象进入的元素称作目标对象