1．html5的基本介绍

需要对html4进行一个了解，学习html4，包含了4部分

Html 标签:页面的基本结构

css :用来控制页面上面的元素的显示

Javascript:主要是用来控制页面上面逻辑.

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。

H5范称

HTML5标签 + CSS3 + JS（js 的api）

1.语义标签 新增标签以及语义标签

语义标签：

对于语义化标签我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

<nav>	导航
<header>	页眉
<footer>	页脚
<section>	区块
<article>	文章
<aside>	侧边栏
<progress>	进度条

把他理解成div 元素，或者span 行了，只不过这个语义标签更加具有语义性，就方便搜索引擎去检索.

2. 新增标签 (还有很多)

几个具有颠覆性的标签

这两个标签可以用来实现在网页里面播放视频.

1:实现网页播放

1：使用js 把windows 自带的播放器windows media play 调出来

界面非常丑陋

2：adobe flash 去做这样的一个东西。Flex 语言. 做网页的游戏用得比较多

3:使用js 去调用一些本地的做好一些插件，常见一些网站都是使用js 吧这个快播给调出来，完成网页的播放.

Video  (用来控制视频的播放)

Audio （用来控制音频的播放）

2．html5 的新特性(js 部分)

换肤.在用户的客户端去存储一些东西，早之前我们存储数据的话，我们都是使用cookie

Html5 里面帮我们新增了两个对象，让我们去保存数据.

sessionStroage  localStorage

我们以后数据可以直接保存在这个里面，

这两个对象有什么区别，我们如果localStorage，这个数据是永久保存.

Html5 新增了很多这个js 的api,我们调用这些api ，可以完成很多之前没有办法完成个功能.

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

介绍localStorage与sessesionStroage的作用

案例：页面换肤

3．html5的定位以及调用百度地图的步骤

Js 给我们提供了api ，让我们可以去获取到用户的经纬度.

在早期我么你定位我们都只能通过ip 去进行定位，

通过ip 去进行不是特别准确.

以后做这种地图开发，我们通过js去获取到用户的经纬度，调用第三方的

接口，比如百度地图，高得地图.

基于lbs 的服务. Location base service

我们使用这个pc 去获取经纬度的话有会有一些，问题，我们就只能模拟这样一个经纬度.

进入到百度的地图的api 的官网.

介绍以后再网页里面怎么去使用地图.

实际上以后开发，我们是通过js的api 去获取到一个经纬度.

然后调用百度地图，把经纬度传递给百度地图，我们就能调用到百度的提供给我们的一些服务，比如说我们常见的街景地图，比如根据经纬度定位.

1:我要获取到自己的经纬度，怎么去获取到经纬度

2:调用百度地图，把我的经纬度传过去.

4．css3 的介绍以及兼容性处理原则   

这里内容太多，我们主要介绍css3在市场上面目前的一个使用情况，

兼容性问题 处理，以及我们怎么去对待.

然后使用css3 做出一些案例,支付宝，咻咻咻的功能，

宇宙案例.

目前的市场情况：

1、浏览器支持程度差，需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

我们应该怎么样去对待的这样的一个原则

1、坚持渐进增强原则

2、考虑用户群体

3、遵照产品的方案

4、听Boss的

5．css3案例:

1:支付宝咻咻咻(#1E577E)

   2:宇宙案例

    边框颜色 #394057

第一个盒子背景色 #C90

最后介绍一个css3当中的常用的css3动画库.

6．animate.css 介绍            

Css 库（我们之前是只听过js 库，css 库，我们不用写css 动画，别人写好了，我们直接拿过来使用就可以.）

Animate.css一款强大的预设css3动画库

animate.css是一个来自国外的 CSS3 动画库，它预设了引起弹跳（bounce）、摇摆（swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fade）、滑动（Sliding）、光速（lightspeed）、缩放变焦（Zoom）、翻滚（roll）等多达 70 多种动画效果，借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

1．html5的基本介绍

需要对html4进行一个了解，学习html4，包含了4部分

Html 标签:页面的基本结构

css :用来控制页面上面的元素的显示

Javascript:主要是用来控制页面上面逻辑.

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。

H5范称

HTML5标签 + CSS3 + JS（js 的api）

1.语义标签 新增标签以及语义标签

语义标签：

对于语义化标签我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

<nav>	导航
<header>	页眉
<footer>	页脚
<section>	区块
<article>	文章
<aside>	侧边栏
<progress>	进度条

把他理解成div 元素，或者span 行了，只不过这个语义标签更加具有语义性，就方便搜索引擎去检索.

2. 新增标签 (还有很多)

几个具有颠覆性的标签

这两个标签可以用来实现在网页里面播放视频.

1:实现网页播放

1：使用js 把windows 自带的播放器windows media play 调出来

界面非常丑陋

2：adobe flash 去做这样的一个东西。Flex 语言. 做网页的游戏用得比较多

3:使用js 去调用一些本地的做好一些插件，常见一些网站都是使用js 吧这个快播给调出来，完成网页的播放.

Video  (用来控制视频的播放)

Audio （用来控制音频的播放）

2．html5 的新特性(js 部分)

换肤.在用户的客户端去存储一些东西，早之前我们存储数据的话，我们都是使用cookie

Html5 里面帮我们新增了两个对象，让我们去保存数据.

sessionStroage  localStorage

我们以后数据可以直接保存在这个里面，

这两个对象有什么区别，我们如果localStorage，这个数据是永久保存.

Html5 新增了很多这个js 的api,我们调用这些api ，可以完成很多之前没有办法完成个功能.

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

介绍localStorage与sessesionStroage的作用

案例：页面换肤

3．html5的定位以及调用百度地图的步骤

Js 给我们提供了api ，让我们可以去获取到用户的经纬度.

在早期我么你定位我们都只能通过ip 去进行定位，

通过ip 去进行不是特别准确.

以后做这种地图开发，我们通过js去获取到用户的经纬度，调用第三方的

接口，比如百度地图，高得地图.

基于lbs 的服务. Location base service

我们使用这个pc 去获取经纬度的话有会有一些，问题，我们就只能模拟这样一个经纬度.

进入到百度的地图的api 的官网.

介绍以后再网页里面怎么去使用地图.

实际上以后开发，我们是通过js的api 去获取到一个经纬度.

然后调用百度地图，把经纬度传递给百度地图，我们就能调用到百度的提供给我们的一些服务，比如说我们常见的街景地图，比如根据经纬度定位.

1:我要获取到自己的经纬度，怎么去获取到经纬度

2:调用百度地图，把我的经纬度传过去.

4．css3 的介绍以及兼容性处理原则   

这里内容太多，我们主要介绍css3在市场上面目前的一个使用情况，

兼容性问题 处理，以及我们怎么去对待.

然后使用css3 做出一些案例,支付宝，咻咻咻的功能，

宇宙案例.

目前的市场情况：

1、浏览器支持程度差，需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

我们应该怎么样去对待的这样的一个原则

1、坚持渐进增强原则

2、考虑用户群体

3、遵照产品的方案

4、听Boss的

5．css3案例:

1:支付宝咻咻咻(#1E577E)

   2:宇宙案例

    边框颜色 #394057

第一个盒子背景色 #C90

最后介绍一个css3当中的常用的css3动画库.

6．animate.css 介绍            

Css 库（我们之前是只听过js 库，css 库，我们不用写css 动画，别人写好了，我们直接拿过来使用就可以.）

Animate.css一款强大的预设css3动画库

animate.css是一个来自国外的 CSS3 动画库，它预设了引起弹跳（bounce）、摇摆（swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fade）、滑动（Sliding）、光速（lightspeed）、缩放变焦（Zoom）、翻滚（roll）等多达 70 多种动画效果，借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。