HTML5学习

HTML5简介

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。

语法规范

HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
特点：
1、更简洁
2、更宽松，单标签不用写关闭符号，双标签省略结束标签，html、head、body、colgroup、tbody可以完全省略

语义标签

HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。

新增语义标签

• <nav> 表示导航
• <header> 表示页眉
• <footer> 表示页脚
• <section>表示区块
• <article> 表示文章 如文章、评论、帖子、博客
• <aside> 表示侧边栏 如文章的侧栏
• <figure> 表示媒介内容分组 与 ul > li 做个比较
• <mark> 表示标记
• <progress> 表示进度
• <time> 表示日期

尽量避免全局使用header、footer、aside等语义标签。

浏览器兼容性

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

<!-- 注意：ie8以下的浏览器不支持h5标签--><!--解决办法： 引入html5shiv.js文件--><!--  条件注释 只有ie能够识别--><!--[if lte ie 8]>    <script src="html5shiv.min.js"></script><![endif]-->

表单

输入类型

• email 输入email格式
• tel 手机号码
• url 只能输入url格式
• number 只能输入数字
• search 搜索框
• range 范围 滑动条
• color 拾色器
• time 时间
• date 日期 不是绝对的
• –datetime 时间日期
• month 月份
• week 星期

表单元素

<datalist> 数据列表，与input 配合使用。

 <input type=”text” list=”sex”> <datalist id=”sex”>     <option>男</option>     <option>女</option>     <option>其它</option> </datalist>

<keygen> 生成加密字符串
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<output> 表示输出
<meter> 表示度量器，不建议用作进度条
<progress> 表示进度条

表单属性

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

表单事件

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

多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。

音频

标签：<audio>
属性：
- autoplay 自动播放
- controls 是否显不默认播放控件
- loop 循环播放
- preload 预加载 同时设置autoplay时些属性失效

播放格式：

推荐的兼容写法：

 <audio controls loop autoplay>    <source src="music/yinyue.mp3">    <source src="music/yinyue.ogg">    <source src="music/yinyue.wav">    抱歉,你的浏览器不支持改功能,请升级浏览器!</audio>

视频

标签：<video>
属性：
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放
- preload 预加载，同时设置了autoplay，此属性将失效
- width 设置播放窗口宽度
- height 设置播放窗口的高度

支持播放的格式：

推荐的兼容写法：

<video controls autoplay>    <source src="video/movie.mp4">    <source src="video/movie.ogg">    <source src="video/movie.webm">    抱歉,浏览器不支持该功能!</video>

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节点，是一个通称。

自定义属性

• 格式：data-*=”“，例如data-info=”我是自定义属性”。
• 取值：通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。Node.dataset是以类对象形式存在的。
• 注意事项：当我们如下格式设置时，则需要以驼峰格式才能正确获取。
• 案例：data-my-name=”zhangsan”，获取Node.dataset[‘myName’]

新增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，可以无刷新改变网页内容。

地理定位

获取用户地理信息的API，这样使得可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)。

获取地理信息方式

1、IP地址
2、三维坐标
- GPS
- 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存储

h5中提供两种web存储方式 ：
- window.sessionStorage，session（会话，会议） 5M 当窗口关闭是数据销毁 内存
- window.localStorage，20M 永久生效 ，除非手动删除 清理垃圾 硬盘上

特性

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) 以索引值来获取存储内容

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示

var docElm = document.documentElement;if (docElm.requestFullscreen) {   docElm.requestFullscreen();}else if (docElm.mozRequestFullScreen) {   docElm.mozRequestFullScreen();}else if (docElm.webkitRequestFullScreen) {   docElm.webkitRequestFullScreen();}

网络状态

window.online用户网络连接时被调用
window.offline用户网络断开时被调用

    window.addEventListener('online',function () {        alert('网络连接已建立!');  });    window.addEventListener('offline',function () {        alert('网络连接已断开!');    });

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担

缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型。
例如创建了一个名为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:当访问不到某个资源时，自动由另外一个资源替换.
3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存