【HTML5 2】《html5 开发精要与实例讲解》 step1 -- 导读

时间:2021-10-02 13:36:56

一、教程重点:以 综合性案例 为导向,辅之以 精要知识点

二、内容概况

  第1部分:通过 大小型案例 对 各重要知识点 进行详细讲解

第2部分:jWebSocket、RGraph、WebGL 三个重要框架的详细使用方法

三、12章内容概要

  章1:利用html5中的 结构元素 构建一个博客网站和一个企业门户网站(两个案例)       重点:结构元素

  章2:通过 两个案例 讲解 表单 在html5中的使用                   重点:表单

章3:通过 六个案例 讲解 Canvas元素 来绘制图形、图像和制作动画                        重点:Canvas元素

  章4:通过 两个案例 讲解 文件API和拖放API 的使用                重点:文件API、拖放API

  章5:通过 四个案例 讲解 多媒体功能 (视频、音频播放器)             重点:多媒体

  章6:通过 六个案例 讲解 本地存储技术                        重点:本地存储技术

  章7:通过 两个案例 讲解 跨文档的消息传输技术 (单点登录、获取批量数据)      重点:跨文档消息传输技术

   章8:通过 两个案例 讲解 利用 Web Workers实现多线程 处理           重点:Web Workers

  章9:通过 一个案例 讲解 利用 Geolocation Api 获取地理位置信息         重点:Geolocation Api

  章10--13:通过丰富案例 讲解 Socket通信框架jWebSocket、统计图制作插件RGraph、三维Web开发技术WebGL的使用方法

四、本书修订于2012年,彼时HTML5最终标准尚未尘埃落定,本书学习完必当进步学习最新的HTML5规范,方可优化HTML5初期的各种缺陷。

五、HTML5将在一下几个方面改变未来的互联网世界

  1.降低插件的重要性:(插件的弊端:安装失败、插件被禁用、成为被攻击对象、集成问题)

    HTML5解决方法:通过浏览器原生地支持相关的标签,比如<video>、<audio>可以像<img>一样使用,方便的在页面嵌入视频和音频。

   2.支持动态生成图像:

    之前:来自于 直接下载 的GIF或JPG图像

    HTML5:通过画布(canvas)临时生成

  3.允许Web程序利用 本地存储

    之前:web程序可利用浏览器在本地存储很多信息,不过开发真正实用的Web应用,需要更多存储空间

    HTML5:开发者可以按照需求随意使用,比如把云端的应用和数据保存在本地硬盘上,使云应用的交付、安装和部署都非常想传统的应用程序。无论是否联网,云应用都可以正常使用。因为之前已经从服务器上下载了HTML5应用中的JavaScript代码,这部分的代码就保存在本地。本地数据库实际上扮演的是智能缓存的作用。

  4.简化 数据提取

    之前:html除了告诉浏览器数据在哪里之外,不能提供任何有意义的信息

    HTML5:采用 微格式,在html中新增了专门的标签,这些标签代表其内容数据的含义。使得一些常用的,但是需要从多个数据源获取信息的应用变得简单,(相当于把这部分封装了)

  5.支持 位置服务

    之前:每台计算机都拥有属于自己的IP地址,但是,我们无法知道,这些IP地址所对应的计算机的世界时啥样的。

    HTML5:允许JavaScript询问浏览器用户的地理位置(经纬度),通常桌面系统不支持此功能,因为需要有GPS和WIFI,但是对于智能终端(手机等),这一功能将发挥作用。

  6.让Web视频播放更加流畅

    之前:视频需要下载插件

    HTML5:通过<video>元素,使视频内容和其他内容整合起来,从而使网页成为视频内容的主要场所。

六、案例精讲步骤

  1.案例概述

  2.页面显示效果

  3.案例知识点

  4.代码剖析