HTML5

1、HTML5:
HTML4.1
网页开发：
结构: html4.0
样式：css css2
行为：js
HTML5:　是HTML4的升级版本(狭义)
结构：html5
样式：css3
行为：js API 有所增强 地理定位 web存储 拖拽

HTML5广义的概念: 代表着浏览器技术发展的一阶段，HTML5+CSS3+js API 一套前端技术的组合；

2、新增语义化标签
header 头部
nav 导航
section 区域
aside 侧边栏
article 文章
footer 底部
progress 进度条

3、表单
表单类型： type="text"
email
tel
url
search
number step:步长
color
range value max min
time
date
month
week

有兼容性问题

表单元素：

数据列表

  输出信息
   生成密钥的 用于表单安全传输
 度量器  max   min  value  low  high
 进度条  max   min  value

表单属性：
placeholder:提示文字
autofocus:自动聚焦
autocomplete：自动完成（填充）  on 开启（默认）   off 取消提示
required:必填
multiple: 多选
novalidate: 关闭表单的默认验证功能 用于form
pattern:  自定义正则验证 pattern="\D+";

表单事件：
oninput:当用户输入时 触发
oninvalid:当验证不通过是触发-->设置验证不通过时的提示文字

4、多媒体
之前：
在网页上播放 多媒体 必须依赖于第三方 插件
mediaplay:
快播：
falsh插件：

    H5里面提供了 视频 和 音频的标签
    audio  video

5、DOM拓展
document 对象 文档对象

当在浏览器中 打开一个页面后， 浏览器首先会来解析我们的 网页，把解析出来的数据，存放到一个DOM对象中；
document.getElmentById();

在H5中 DOM新增的功能：

jquery---
$('.box');
$('#box');
$('div.box);
$('div p');

获取单个元素：
document.querySelector('.box‘);

获取所有符合条件的元素：  返回的数组
document.querySeletorAll('.box');

控制类名的API：
node.classList.add();添加类名
node.classList.remove()；删除类名
node.classlist.contains();判断是否包含指定的类名
node.classList.toggle()；切换指定的类名

1、视频
属性：
paused: 视频的播放暂停状态
duration:视频的总时长
currentTime:当前播放时间

放法：play() 播放
      pause()暂停

oncanplay： 当视频加载完成之后
ontimeupdate: 当视频当前时间 改变之后触发

全屏：
    video.webkitRequsetFullScreen();

2、拖拽：
1、需要设置拖拽：draggable="true"
2、拖拽元素：
ondragstart: 拖拽开始
ondragend:拖拽结束
ondragleave: 当鼠标拖拽离开 被拖拽元素时
ondrag:　当拖拽时，持续触发
3、目标元素：
ondragenter:当被拖拽元素进入目标元素时
ondragleave:当鼠标进入目标元素时
ondragover: 当被拖拽元素在目标元素上时，持续触发
--> e.preventDefault(); 阻止拖拽的默认行为；
ondrop:当在目标元素上松开鼠标时触发；

认识HTML5
前面我们学习的html是什么？
Html4.0
网页开发： html 结构 4.0
Css ->样式 2.0
Js  行为 用户交互
HTML5 是html4.0 升级版
结构 Html5 、样式 css3 、行为: API 都有所增强
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合

H5范称
HTML + CSS3 + JS
优点：http://www.intertid.com/school/2014/595568.shtml
语法规范
HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
见代码实例

特点：
1、更简洁
2、更宽松
单标签不用写关闭符号 双标签省略结束标签
html、head、body、colgroup、tbody可以完全省略
实际开发中应规范书写，不建议太随意 ！
W3C验证地址
https://validator.w3.org/
语义标签
语义标签对于我们并不陌生，如

表示一个段落、

表示一个无序列表

~

表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如

、

等，这样就可以使其具有通用性。
此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
传统网页布局：



H5 经典网页布局:


常用新语义标签


表示导航


表示页眉


表示页脚


表示区块


表示文章 如文章、评论、帖子、博客


表示侧边栏 如文章的侧栏


表示媒介内容分组 与 ul > li 做个比较
表示标记 (带用“UI”，不怎么用)
表示进度 (带用“UI”，不怎么用)
表示日期
本质上新语义标签与

、没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成

相当于

。不要好奇，它只是一个标签！
尽量避免全局使用header、footer、aside等语义标签。

兼容处理
(我们在测试ie 的兼容的时候，有一个叫做ietest 的软件，这个软件可以模拟ie6-ie11)
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

表单
伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。

输入类型 (表单类型，表单元素，表单属性,表单事件.)
email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
--datetime 时间日期
month 月份
week 星期
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
表单元素（标签）


Max-width
Min-width

表单属性
placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于

标签
required 必填项
pattern 正则表达式 验证表单
手机号:
表单重写没有提及，自行验证，共包含
应用于提交按钮上，如：

表单事件
oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发

案例练习

注册表单
多媒体
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。
Media palyer
此章节学习目的，了解如何通过HTML5播放音频/视频，以及针对不同浏览器所支持的格式，做多浏览器兼容处理。
音频
HTML5通过

并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效
由于版权等原因，不同的浏览器可支持播放的格式是不一样的

多浏览器支持的方案，如下图

视频
HTML5通过

同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载，同时设置了autoplay，此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因，不同的浏览器可支持播放的格式是不一样的

多浏览器支持的方案，如下图

DOM扩展
获取元素
1、document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。
类名操作
1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点，是一个通称。
自定义属性
在HTML5中我们可以自定义属性，其格式如下data-*=""，例如
data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当我们如下格式设置时，则需要以驼峰格式才能正确获取
data-my-name="itcast"，获取Node.dataset['myName']
案例练习 (tab 切换)

新增API
多媒体
方法：load() 加载、play() 播放、pause() 暂停
属性：currentTime 视频播放的当前进度、
duration:视频的总时间
paused:视频播放的状态.

事件：
oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发

全屏：video.webkitRequestFullScreen();

拖拽
在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
拖拽元素
页面中设置了draggable="true"属性的元素
目标元素
页面中任何一个元素都可以成为目标元素
事件监听
拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
历史
提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
旧版本浏览器..
history.back() 回退
history.forward() 前进
地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
获取地理信息方式
1、IP地址
2、三维坐标
GPS（Global Positioning System，全球定位系统）
目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：1.美国 Global Positioning System （全球定位系统） 简称GPS；.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS；以上6个系统中国都能使用。
Wi-Fi
手机信号
3、用户自定义数据
如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。

隐私
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
API详解
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
百度地图案例.
Web存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage
window.localStorage
(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)
特性
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享
方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容

案例：记住用户名
其它
WebSQL、IndexDB
已经被w3c 放弃了..
生命周期差异，存储空间差异
WebSQL、IndexDB
全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示
不同浏览器需要添加前缀如：
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }

网络状态
我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
window.online用户网络连接时被调用
window.offline用户网络断开时被调用
window.addEventListener("online",function(){ alert("已经建立了网络连接") }) window.addEventListener("offline",function(){ alert("已经失去了网络连接") })
应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。
manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料
其它
1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源，必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时，自动由另外一个资源替换.
CACHE MANIFEST CACHE: #此部分是需要缓存的资源 1.jpg js/jquery.min.js NETWORK: js/demo.js # 可以使用 * 好替代 FALLBACK: one.css two.css 会缓存two.css 当找不到one.css 会去找two.css 文件.

3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

Font Awesome 字体框架
http://fontawesome.dashgame.com/
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果