10.3 HTML5新特性（课件）-《信息技术（拓展模块）》同步教学（大连理工大学出版社）

数字媒体 10.1　理解数字媒体和数字媒体技术的概念 10.2　数字媒体素材处理 10.3　HTML5新特性 第十章 10.3 HTML5新特性 10.3.1　认识 HTML5 第十章　数字媒体 10.3 HTML5新特性 HTML5是万维网的核心语言、超文本标记语言(HTML)的第五次重大修改版本。所谓“超文本”,就是指页面里可以包含图片、链接、声音等非文字元素。HTML5是 HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。它是新一代互联网的标准,是构建以及呈现互联网内容的一种语言方式。如果说苹果公司重新发明了手机,那么 HTML5则重新定义了网络。它是链接手机、平板电脑、PC以及其他移动终端的桥梁,可以更丰富地展现页面,让视频、音频、游戏以及其他元素构成一场华丽的代码盛宴。它特有的canvas标签和多种选择的游戏开发引擎,让游戏开发更便捷。 在 HTML5之前,由于各个浏览器之间的标准不统一,浏览器之间由于兼容性而引起的错误浪费了大量的时间。HTML5的目标就是将 Web带入一个成熟的应用平台。在这个平台上,视频、音频、图像、动画以及交互都被标准化。它具备兼容通用、简洁高效、合理无插件、可分离等优势,克服了传统 HTML平台的问题,正在以一种惊人的速度被迅速推广并应用。 10.3.2　HTML5的新特性 第十章　数字媒体 10.3 HTML5新特性 HTML1.0到5.0经历了巨大的变化,从单一的文本显示功能到图文并茂的多媒体显示功能,许多特性经过多年的完善,已经发展为一种非常重要的标记语言。HTML5最重要的3项技术就是 HTML5核心规范、CSS3(CascadingStyleSheet,层叠样式表的最新版本)和JavaScript(一种脚本语言,用于增强网页的动态功能)。HTML5的一个核心理念就是保持一切新特性并与原有功能保持平滑过渡,而不是否定之前的 HTML文档。以“尽可能简化”为原则,化繁为简,简化了文档类型和字符集的声明,强化了编程接口,如绘图、获取地理位置、文件读取等,使页面设计更加简单;HTML5以浏览器的原生能力代替复杂的JS代码,有精确定义的错误恢复机制,以“用户大于一切”为宗旨的良好的用户体验。 10.3.2　HTML5的新特性 第十章　数字媒体 10.3 HTML5新特性 1.语义化标签 HTML5提供了新的元素来创建更好的页面结构,见表10-2。 10.3.2　HTML5的新特性 第十章　数字媒体 10.3 HTML5新特性 2.智能表单 表单是实现用户与页面后台交互的主要组成部分,HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了 HTML可表达的表单形式,再加上新增加的一些表单标签,使得原本需要JavaScript来实现的控件,可以直接使用 HTML5的表单来实现;一些如内容提示、焦点处理、数据验证等功能,也可以通过 HTML5的智能表单属性标签来完成。见表10-3。 10.3.2　HTML5的新特性 第十章　数字媒体 10.3 HTML5新特性 3.绘图画布 HTML5的canvas元素可以实现画布功能,该元素通过自带的 API结合使用JavaScript脚本语言在网页上绘制图形和处理,拥有实现绘制线条、弧线以及矩形,用样式和颜色填充区域,书写样式化文本,以及添加图像的方法,且使用JavaScript可以控制其每一个像素。HTML5的canvas元素使得浏览器无须Flash或Silverlight等插件就能直接显示图形或动画图像。SVG、Canvas、WebGL及CSS3的3D功能使得图形渲染更高效,页面效果更精致。 4.多媒体 音频视频能力的增强是 HTML5的最大突破,在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持,只要在 Web网页中嵌入这两个标签,而无须第三方插件(如Flash)就可以实现音视频的播放功能。HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖,加快了页面的加载速度,扩展了互联网多媒体技术的发展空间。 10.3.2　HTML5的新特性 第十章　数字媒体 10.3 HTML5新特性 5.地理定位 现如今移动网络备受青睐,用户对实时定位的应用越来越多,要求也越来越高。HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能,定位更加准确、灵活。通过 HTML5进行定位,除了可以定位自己的位置,还可以在他人对你开放信息的情况下获得他人的定位信息。 6.数据存储 HTML5较之传统的数据存储有自己的存储方式,允许在客户端实现较大规模的数据存储。基于 HTML5开发的网页 App拥有更短的启动时间、更快的联网速度,这些全得益于HTML5AppCache,以及本地存储功能。本地离线存储LocalStorage长期存储数据,浏览器关闭后数据不丢失。 10.3.2　HTML5的新特性 第十章　数字媒体 10.3 HTML5新特性 7.多线程 HTML5利用 WebWorker将 Web应用程序从原来的单线程业界中解放出来,通过创建一个 WebWorker对象就可以实现多线程操作。JavaScript创建的 Web程序处理事务都是在单线程中执行的,响应时间较长,而当JavaScript过于复杂时,还有可能出现死锁的局面。HTML5新增加了一个 WebWorkerAPI,用户可以创建多个在后台的线程,将耗费较长时间的处理交给后台而不影响用户界面和响应速度,这些处理不会因用户交互而中断运行。使用后台线程不能访问页面和窗口对象,但后台线程可以和页面之间进行数据交互。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 1.项目描述 这是一个关于冬奥会的响应式网站,它不同于普通的静态网页,该项目适用于多种屏幕大小,页面效果会随屏幕大小的改变而实时调整,这是一种新型网页设计理念,我们把它叫作———响应式 WEB设计。响应式网站的优势在于可以针对不同的终端显示出合理的页面,实现一次开发、多处适用。网站以2022年北京冬季奥运会为主题,介绍冬奥项目,展示精彩赛程,宣传主题活动,旨在传播奥林匹克知识,弘扬奥林匹克精神,推广冰雪运动,宣传冬奥文化,展现冬奥魅力。网站PC版效果如图10-41所示。将浏览器窗口缩小到移动设备大小后,页面效果如图 10-42所示,汉堡式菜单栏的呈现方式也会因视口的变化而自动适应,效果如图10-43所示。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 2.知识储备 想要顺利完成此项目,我们需要有一定的 HTML5和CSS3的知识储备,并了解视口的概念,熟悉媒体查询的实现方法和百分比布局的使用方法。 (1)视口知识 视口在响应式设计中是一个非常重要的概念。视口的作用:不管网页原始分辨率尺寸有多大,都能将其缩小显示在手机浏览器上。移动端三种视口:布局视口、视觉视口和理想视口,如图10-44所示。 ①布局视口(layoutviewport):指浏览器绘制网页的视口,一般移动端浏览器都默认设置了布局视口的宽度。布局视口存在的问题:当移动端浏览器展示PC端网页内容时,由于移动端设备屏幕比较小,网页在手机的浏览器中会出现左右滚动条,用户需要左右滑动才能查看完整的一行内容。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 ②视觉视口(visualviewport):指用户正在看的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度。当手机中缩放网页的时候,操作的是视觉视口,而布局视口仍然保持原来的宽度。 ③理想视口(idealviewport):指布局视口的大小和屏幕宽度一致,用户不需要左右滚动页面。在开发中,为了实现理想视口,需要给移动端页面添加标签配置视口,通知浏览器来进行处理。 HTML5中,将<meta>标签中的name属性设为viewport,即可设置视口。示例语法: 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 (2)媒体查询知识 在CSS3规范中,媒体查询可根据视口宽度、设备方向等差异来改变页面的显示方式。媒体查询由媒体类型和条件表达式组成,示例代码如下所示: 上述代码表示媒体类型为screen并且屏幕宽度 ≤960px时的样式。 (3)百分比布局知识 掌握百分比布局的使用,能够实现灵活的响应式网站布局。它是一种等比例缩放布局方式,在CSS3代码中使用百分比来设置宽度。计算方式为:目标元素宽度÷父盒子的宽度=百分数宽度。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 3.项目流程分析 有了前面知识的储备,接下来我们进行项目结构及制作流程分析。 (1)页面结构组成 我们的这个响应式页面分为四个部分,如图10-45所示,分别是header(导航)、banner(宣传窗口)、mission(中间区域)和footer(版权信息)。具体的页面标注和结构如图10-46所示。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 图10-45 冬奥主页面框架结构 图10-46 冬奥主页面框架结构 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 响应式页面的细节设计包括以下几处: ①响应式页面各部分的宽度用百分比表示,如header的宽度设置为100%。 ②header里面包括导航菜单和Logo左右两部分,其中Logo部分使用绝对定位;在<nav>中嵌套<ul>列表制作导航菜单。 ③当屏幕缩小到575px时,出现汉堡菜单按钮,该按钮使用<lable>标签嵌套<img>标签引入按钮图片,该按钮的功能使用CSS通过checkbox进行控制。 ④banner部分由div.banner嵌套div.banner-info构成,为div.banner设置背景图,当浏览器窗口缩小时,需要对div.banner设置媒体查询。 ⑤在PC端div.mission-left和div.mission-right两部分横向排列,在移动端需要使用媒体查询,将其纵向排列。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 (2)具体步骤 对平面效果图进行分析后,得到页面结构。我们通常都按照从整体到部分,从上到下,从左到右的顺序进行网站页面的制作。 第1步:建立站点。其实站点就是我们硬盘上的一个文件夹,将 HTML文档、CSS样式、image等文件统一存放在这个文件夹中。我们用 HBuilderX编码器来制作。首先打 开HBuilderX,选择“新建”菜单下的“项目”来新建项目,如图10-47、图10-48所示。搭建项目基本框架,目录结构中包含css、images等文件,将设计好的图片和LOGO放置到images文件夹中,如图10-49所示。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 第2步:创建项目入口文件:dong'ao.html文档(入口文件通常命名为index.html,这里以冬奥拼音字母命名),设置视口,添加文档标题。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 第3步:在dong'ao.html文件中,编写 HTML结构代码。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 第4步:设置项目公共样式,在response.css文件中编写网站公共样式。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 第5步:实现导航菜单和 Logo页面效果。在dong'ao.html文件中编写header结构代码,如下所示。运行到浏览器chrome,效果如图10-50所示。 图10-50 header结构效果 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 第6步:实现header区域效果,在response.css文件中编写样式代码。按此方法,先建立结构,再添加样式,依次实现剩余的 banner、mission和footer部分,如图10-51至图10-52所示。 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 10.3.3　案例教学：冬奥会主题响应式网站 第十章　数字媒体 10.3 HTML5新特性 第7步:最后选择“运行”→“运行到浏览器”→“chrome”查看冬奥主题网站最终效果。至此,我们的第一个响应式冬奥会主题的网站就制作完成了,是不是很有成就感?! $$