网络与新媒体应用模式课件第七章第二节HTML5原理概述

1《网络与新媒体应用模式》——创新设计及运营战略视角1《网络与新媒体应用模式》——创新设计及运营战略视角2第七章网络与新媒体的应用形态战略2第七章应用（APP）形态概述1“HTML5”原理概述2基于“HTML5”的应用形态战略3目

录3应用（APP）形态概述1“HTML5”原理概述2基于“HTM4Chapter2“HTML5”原理概述4Chapter2“HTML5”原理概述“HTML5”简介“HTML5”规范的全称是“HTML5——AvocabularyandassociatedAPIsforHTMLandXHTML”（HTML5——HTML和XHTML词汇及其相关的API），是新一代超文本标记语言标准。“HTML5”简介“HTML5”规范的全称是“HTML5——“HTML5”的新增元素在“HTML5”中删除了“HTML4.01”中的一些元素包括，新增加了一系列关键元素：语义元素、多媒体元素、交互性元素和表单元素。“HTML5”的新增元素在“HTML5”中删除了“HTML新增的结构化语义元素“HTML5”的突出特点是新增了结构化的语义素，下面主要介绍section元素、article元素、asid”元素和nav等语义元素新增的结构化语义元素“HTML5”的突出特点是新增了结构化的（1）section元素<section>标签定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，显示文档结构。<section>标签的代码结构如下：<section><h1>……</h1><p>......</p></section>新增的结构化语义元素（1）section元素<section>标签定义文档中的节

（2）article元素<article>标签定义外部的内容。外部内容可以是来自外部的新闻提供者的一篇新文章、来自Blog的文本、来自论坛的文本，或者是来自其他外部源的内容。article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，在一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式来表示；用来呈现评论的article元素被包含在表示整体内容的article元素里面。新增的结构化语义元素（2）article元素<article>标签定义外部的内（3）aside元素aside元素一般用来表示网站当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的广告、导航条、引用、侧边栏评论部分，以及其他区别于主要内容的部分。新增的结构化语义元素（3）aside元素aside元素一般用来表示网站当前页面或（3）aside元素aside元素主要有以下两种使用方法。第一种：被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释等。aside标签的代码结构如下所示：<article><h1>…</h1><p>…</p><aside>…</aside>第二种：在article元素之外使用作为页面或站点全局的附属信息部分。新增的结构化语义元素（3）aside元素aside元素主要有以下两种使用方法。新（4）nav元素<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。新增的结构化语义元素（4）nav元素<nav>用来将具有导航性质的链接划分在一起（4）nav元素——可以用于四种场合①传统导航条：现在主流网站上都有不同层级的导航条，作用是将当前画面跳转到的其他主页上。②侧边栏导航：现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页上。③页内导航：页内导航的作用是在本页的组成部分之间进行跳转。④翻页操作：翻页操作是指在网站的多个页面的前后页面或博客网站的前后篇文章之间滚动。新增的结构化语义元素（4）nav元素——可以用于四种场合①传统导航条：现在主流新增的多媒体元素主要包括音视频元素、画布和WebGL新增多媒体元素与交互性元素新增的多媒体元素主要包括音视频元素、画布和WebGL新增多媒新增多媒体元素与交互性元素（1）音视频在HTML5中，增加了<audio>、<video>标签，用来在Web网页中嵌入音视频播放功能，而无须Flash和其他嵌入式插件的支持。目前，音频支持OggVorbis、MP3、AAC和WebM这4种格式，视频支持OggTheora、MPEG4、H.264和WebM这4种格式。新增多媒体元素与交互性元素（1）音视频在HTML5中，增加了新增多媒体元素与交互性元素（2）Canvas画布Canvas元素是HTML5最令人激动的新增功能之一。正如其名称所示，Canvas元素在Web页面上创建了一个矩形的绘图表面，其高度和宽度分别通过height和width属性给定。Canvas元素是一个块级元素，其内容是针对不支持Canvas元素的浏览器和其他用户代理的备用内容。Canvas应用编程接口（Canvasapplicationprogramminginterface）提供了数十个方法或函数，以绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，操作图像和视频以及其他有趣的活动。新增多媒体元素与交互性元素（2）Canvas画布Canvas新增多媒体元素与交互性元素（3）WebGL在HTML5之前，3D物体形象在网页上不能直接展示，必须使用非标准的特殊网页语言语法或者通过运行额外的浏览器插件实现。HTML5和WebGL提供了一种技术方案，使程序员可以直接在网页上展示物体的3D形象，并且这种展现可以直接使用设备的图形处理器的处理能力，其绘图性能能够得到保证。WebGL也通过Canvas画布进行3D图形的展现。新增多媒体元素与交互性元素（3）WebGL在HTML5之前，新增智能表单元素表单是网页中常见的控件（集），担负了用户和网页后台数据更新交互的任务。新增智能表单元素表单是网页中常见的控件（集），担负了用户和网新增了多个表单标签：required、autofoucus、datalist、keygen、meter、output、progress等。新增智能表单元素HTML5对表单的功能进行了大幅度的提升，主要是：1新增了多个输入（input）数据类型：color、E-mail、date、month、week、time、datetime、datetime-local、number、range、search、tel、url等；2新增了多个输入（input）属性：required、autofoucus、pattern、list、form、autocomplete、placeholder等；3新增了多个表单标签：新增智能表单元素HTML5对表单的功能进“HTML5”的新功能和新特性总体

来说，HTML5主要增强了两方面的功能：一，能更好地实现Web应用程序。HTML5引入新的功能，以帮助Web应用程序的创建者更好地在浏览器中创建富媒体应用程序，这是当前Web应用的热点。二，能更好地呈现Web内容。基于过去的实践和当前Web的需要，引入了新的元素，用于更好地呈现内容。主要有四项：（1）用于视频、音频播放的video元素和audio元素；（2）用于文档结构的article、footer、header、nav、section等元素；（3）新的表单控件；（4）一些元素进行了新的修订。“HTML5”的新功能和新特性总体来说，HTML5主要增强具体

来说，HTML5具有强大的用户交互支持、地理定位支持、多媒体支持、本地处理能力支持和通信能力支持等功能特性。“HTML5”的新功能和新特性具体来说，HTML5具有强大的用户交互支持、地理定位支持、用户交互传统页面强调的是信息的展示，用户交互较少；而网页应用强调的是业务逻辑的处理，用户交互较多。HTML5吸纳“WebForms2.0”的内容，能强化表单（form）元素的功能与验证，能丰富输入（input）元素的种类，更加适合网页应用的开发。此外，HTML5还能提供自动聚焦、自动输入验证等非常炫酷的特性，HTML5表单能极大地提高开发者的工作效率和增强用户体验。用户交互传统页面强调的是信息的展示，用户交互较少；而网页应用地理定位HTML5的地理定位是一个精确定位用户的替代方法，其通过加入地理位置信息获取（geolocation）的应用程序接口（API）来实现，使得网页应用第一次能真正在自己的领地里实现地理定位。该功能通过获取用户当前位置(GetCurrentPosition)和保持用户的位置（WatchPosi-tion）两种方法实现。地理定位HTML5的地理定位是一个精确定位用户的替代方法，其多媒体HTML5新增video和audio标签能让网页直接流畅播放多媒体文件。它允许开发者直接将动画、视频和音频嵌入网页，不需要任何第三方插件（比如Adobe公司的Flash）就能播放。这既能善了用户体验，又能节省带宽、电池等的资源消耗，更加适合平板电脑和智能手机等移动设备，使得HTML5更加适用于移动互联网。多媒体HTML5新增video和audio标签能让网页本地应用HTML5通过提供强大的离线功能支持，使得网页应用的本地处理能力不断接近原生应用，能让用户在享受页面应用带来的便利的同时，也能完成接近原生应用的复杂应用。①HTML5能提供访问本地文件系统的应用程序接口（API），同时提供了部分本地终端设备能力调用功能（如地理位置信息获取）。②

HTML5能提供本地存储机制和本地缓存机制。（新的数据存储方式：网页数据库（WebSQLdatabases）和客户端存储方式（WebStorage）本地应用HTML5通过提供强大的离线功能支持，使得网页应用的本地应用网页数据库（将网页应用数据存储为数据库形式）：开发者可以基于SQL语法来对这些数据进行查询、插入等操作。客户端存储方式：（1）局部存储（LocalStorage）：可永久保存数据，即对支持HTML5本地存储的浏览器会在用户的本地分配空间用于永久性存放指定的数据，在用户关闭浏览器后，下次打开浏览器还能取得存储的数据，除非用户主动删除这些数据。（2）对话期存储(SessionStorage)：只在当前的会话中可用，即在用户关闭窗口后，数据将清除，此外这种存储方式在同域中无法共享。本地应用网页数据库（将网页应用数据存储为数据库形式）：复杂应用支持HTML5利用WebWorkers机制将多线程引入网页应用程序，这使得一些复杂应用的实现成为可能。WebWorkers能提供一种标准的方式让浏览器能够在后台运行JavaScript：通过创建一个Worker对象来实现多线程；页面动态加载JavaScript文件之后，它就可以在后台处理诸如复杂的数学运算、发送请求或者操作本地数据库这样的代码，而不影响用户界面和响应速度，与此同时页面还可以响应用户的滚屏、单击或者输入操作。复杂应用支持HTML5利用WebWorkers机制将多线程28《网络与新媒体应用模式》——创新设计及运营战略视角1《网络与新媒体应用模式》——创新设计及运营战略视角29第七章网络与新媒体的应用形态战略2第七章应用（APP）形态概述1“HTML5”原理概述2基于“HTML5”的应用形态战略3目

录30应用（APP）形态概述1“HTML5”原理概述2基于“HTM31Chapter2“HTML5”原理概述4Chapter2“HTML5”原理概述“HTML5”简介“HTML5”规范的全称是“HTML5——AvocabularyandassociatedAPIsforHTMLandXHTML”（HTML5——HTML和XHTML词汇及其相关的API），是新一代超文本标记语言标准。“HTML5”简介“HTML5”规范的全称是“HTML5——“HTML5”的新增元素在“HTML5”中删除了“HTML4.01”中的一些元素包括，新增加了一系列关键元素：语义元素、多媒体元素、交互性元素和表单元素。“HTML5”的新增元素在“HTML5”中删除了“HTML新增的结构化语义元素“HTML5”的突出特点是新增了结构化的语义素，下面主要介绍section元素、article元素、asid”元素和nav等语义元素新增的结构化语义元素“HTML5”的突出特点是新增了结构化的（1）section元素<section>标签定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，显示文档结构。<section>标签的代码结构如下：<section><h1>……</h1><p>......</p></section>新增的结构化语义元素（1）section元素<section>标签定义文档中的节

（2）article元素<article>标签定义外部的内容。外部内容可以是来自外部的新闻提供者的一篇新文章、来自Blog的文本、来自论坛的文本，或者是来自其他外部源的内容。article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，在一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式来表示；用来呈现评论的article元素被包含在表示整体内容的article元素里面。新增的结构化语义元素（2）article元素<article>标签定义外部的内（3）aside元素aside元素一般用来表示网站当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的广告、导航条、引用、侧边栏评论部分，以及其他区别于主要内容的部分。新增的结构化语义元素（3）aside元素aside元素一般用来表示网站当前页面或（3）aside元素aside元素主要有以下两种使用方法。第一种：被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释等。aside标签的代码结构如下所示：<article><h1>…</h1><p>…</p><aside>…</aside>第二种：在article元素之外使用作为页面或站点全局的附属信息部分。新增的结构化语义元素（3）aside元素aside元素主要有以下两种使用方法。新（4）nav元素<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。新增的结构化语义元素（4）nav元素<nav>用来将具有导航性质的链接划分在一起（4）nav元素——可以用于四种场合①传统导航条：现在主流网站上都有不同层级的导航条，作用是将当前画面跳转到的其他主页上。②侧边栏导航：现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页上。③页内导航：页内导航的作用是在本页的组成部分之间进行跳转。④翻页操作：翻页操作是指在网站的多个页面的前后页面或博客网站的前后篇文章之间滚动。新增的结构化语义元素（4）nav元素——可以用于四种场合①传统导航条：现在主流新增的多媒体元素主要包括音视频元素、画布和WebGL新增多媒体元素与交互性元素新增的多媒体元素主要包括音视频元素、画布和WebGL新增多媒新增多媒体元素与交互性元素（1）音视频在HTML5中，增加了<audio>、<video>标签，用来在Web网页中嵌入音视频播放功能，而无须Flash和其他嵌入式插件的支持。目前，音频支持OggVorbis、MP3、AAC和WebM这4种格式，视频支持OggTheora、MPEG4、H.264和WebM这4种格式。新增多媒体元素与交互性元素（1）音视频在HTML5中，增加了新增多媒体元素与交互性元素（2）Canvas画布Canvas元素是HTML5最令人激动的新增功能之一。正如其名称所示，Canvas元素在Web页面上创建了一个矩形的绘图表面，其高度和宽度分别通过height和width属性给定。Canvas元素是一个块级元素，其内容是针对不支持Canvas元素的浏览器和其他用户代理的备用内容。Canvas应用编程接口（Canvasapplicationprogramminginterface）提供了数十个方法或函数，以绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，操作图像和视频以及其他有趣的活动。新增多媒体元素与交互性元素（2）Canvas画布Canvas新增多媒体元素与交互性元素（3）WebGL在HTML5之前，3D物体形象在网页上不能直接展示，必须使用非标准的特殊网页语言语法或者通过运行额外的浏览器插件实现。HTML5和WebGL提供了一种技术方案，使程序员可以直接在网页上展示物体的3D形象，并且这种展现可以直接使用设备的图形处理器的处理能力，其绘图性能能够得到保证。WebGL也通过Canvas画布进行3D图形的展现。新增多媒体元素与交互性元素（3）WebGL在HTML5之前，新增智能表单元素表单是网页中常见的控件（集），担负了用户和网页后台数据更新交互的任务。新增智能表单元素表单是网页中常见的控件（集），担负了用户和网新增了多个表单标签：required、autofoucus、datalist、keygen、meter、output、progress等。新增智能表单元素HTML5对表单的功能进行了大幅度的提升，主要是：1新增了多个输入（input）数据类型：color、E-mail、date、month、week、time、datetime、datetime-local、number、range、search、tel、url等；2新增了多个输入（input）属性：required、autofoucus、pattern、list、form、autocomplete、placeholder等；3新增了多个表单标签：新增智能表单元素HTML5对表单的功能进“HTML5”的新功能和新特性总体

来说，HTML5主要增强了两方面的功能：一，能更好地实现Web应用程序。HTML5引入新的功能，以帮助Web应用程序的创建者更好地在浏览器中创建富媒体应用程序，这是当前Web应用的热点。二，能更好地呈现Web内容。基于过去的实践和当前Web的需要，引入了新的元素，用于更好地呈现内容。主要有四项：（1）用于视频、音频播放的video元素和audio元素；（2）用于文档结构的article、footer、header、nav、section等元素；（3）新的表单控件；（4）一些元素进行了新的修订。“HTML5”的新功能和新特性总体来说，HTML5主要增强具体

来说，HTML5具有强大的用户交互支持、地理定位支持、多媒体支持、本地处理能力支持和通信能力支持等功能特性。“HTML5”的新功能和新特性具体来说，HTML5具有强大的用户交互支持、地理定位支持、用户交互传统页面强调的是信息的展示，用户交互较少；而网页应用强调的是业务逻辑的处理，用户交互较多。HTML5吸纳“WebForms2.0”的内容，能强化表单（form）元素的功能与验证，能丰富输入（input）元素的种类，更加适合网页应用的开发。此外，HTML5还能提供自动聚焦、自动输入验证等非常炫酷的特性，HTML5表单能极大地提高开发者的工作效率和增强用户体验。用户交互传统页面强调的是信息的展示，用户交互较少；而网页应用地理定位HTML5的地理定位是一个精确定位用户的替代方法，其通过加入地理位置信息获取（geolocation）的应用程序接口（API）来实现，使得网页应用第一次能真正在自己的领地里实现地理定位。该功能通过获取用户当前位置(GetCurrentPosition)和保持用户的位置（WatchPosi-tion）两种方法实现。地理定位HTML5的地理定位是一个精确定位用户的替代方法，其多媒体