前言
认识HTML5
之前学的是HTML4或者HTML4.1；
网页开发：
html：结构 4.0
Css：样式 2.0
Js：行为 用户交互
HTML5 是html4.0 升级版
结构：Html5 、样式：css3 、行为: API，有所增强，如地理定位、web存储、拖拽等。
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将
Web做为应用开发平台的HTML语言。HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可以开发网页版游戏。
H5范称：HTML + CSS3 + JS API
优点：http://www.intertid.com/school/2014/595568.shtml
语法规范
HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
特点：
更简洁;
-
更宽松
- 单标签不用写关闭符号；
- 双标签可省略结束标签；
- html、head、body、colgroup、tbody可以完全省略；
- 实际开发中应规范书写，不建议太随意。
W3C验证地址：https://validator.w3.org/
语义标签
此章节学习目的为了理解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
传统网页布局：
- H5 经典网页布局:
常用新语义标签
| 语义 | 说明 |
|---|---|
header |
表示页眉 |
nav |
表示导航 |
section |
表示区块 |
aside |
表示侧边栏 如文章的侧栏 |
article |
表示文章 如文章、评论、帖子、博客 |
footer |
表示页脚 |
| figure | 表示媒介内容分组 与 ul > li 做个比较 |
| mark | 表示标记 (带用“UI”，不怎么用) |
| progress | 表示进度 (带用“UI”，不怎么用) |
| time | 表示日期 |
- 本质上新语义标签与、
没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成相当于。不要好奇，它只是一个标签！- 尽量避免全局使用header、footer、aside等语义标签。
兼容处理
在测试IE的兼容的时候，有一个叫做ietest 的软件，这个软件可以模拟IE6~IE11。
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素
inline对待，所以我们只需要将其转换成块元素(block)即可使用。但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。
IE678不支持H5，需要引入
html5shiv.js文件：
表单
- HTML5在Web表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
- 此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。
输入类型 (表单类型，表单元素，表单属性,表单事件。)
输入类型 说明 email 输入email格式 tel 手机号码 url 只能输入url格式 number 只能输入数字 search 搜索框 range 范围、滑动条 color 拾色器 time 时间 date 日期（不是绝对的） datetime 时间日期 month 月份 week 星期 - 注：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
表单元素（标签）
-
数据列表与input配合使用
keygen元素的作用是提供一种验证用户的可靠方法；
keygen元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
：不可当做数据提交，样式、作用和label差不多；
- 样式和
差不多，但是拥有警告等颜色； - Max-width；
- Min-width。
表单属性
- placeholder：占位符；
- autofocus：自动获取焦点；
- name：给表单添加name属性之后，可以显示历史输入的内容；
- multiple：文件上传多选或多个邮箱地址；
- autocomplete：自动完成填充，用于表单元素，也可用于表单自身(on/off)；
- form：指定表单项属于哪个form，处理复杂表单时会需要；
- novalidate：关闭验证，可用于
标签； - required：必填项，表示此表单不能为空；
- pattern：正则表达式，验证表单、手机号，如
- 表单重写没有提及，自行验证，共包含应用于提交按钮上，如：
。
表单事件
- oninput：用户输入内容时触发，可用于移动端输入字数统计；
- oninvalid 验证不通过时触发。
input.oninvalid = function(){ this.setCustomValidity("你邮箱输错掉了，现在重新输入"); };案例练习
- 注册表单
Title 多媒体
- 并非所有用户的浏览器都安装了Flash插件，并且移动设备的浏览器并不支持Flash插件。通过HTML5播放音频/视频，以及针对不同浏览器所支持的格式，做多浏览器兼容处理。
音频
- HTML5通过
标签来解决音频播放的问题。使用非常简单：
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay：自动播放；
controls：是否显不默认播放控件；
loop：循环播放；
preload：预加载，同时设置autoplay时有些属性会失效。
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：（目前，audio元素支持的三种音频格式如下）
格式 IE9 Firefox3.5 Opera3.5 Chrome3.0 Safari3.0 Ogg Vorbis √ √ √ MP3 √ √ √ Wav √ √ √ - 兼容性写法
- 浏览器兼容哪一种格式，会自动获取对应的格式进行播放，不会显示最下面的文字；如果浏览器都不兼容这三种音频格式(IE678)，就会显示最下面的文字。
视频
- HTML5通过
标签来解决视频播放的问题。同音频标签用法完全一样，使用也相当简单，如下所示：
同样，通过附加属性可以更友好的控制视频的播放:
autoplay：自动播放；
controls：是否显示默认播放控件；
loop：循环播放；
preload：预加载，同时设置了autoplay，此属性将失效；
width：设置播放窗口宽度；
height：设置播放窗口的高度。
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，当前video元素支持的三种视频格式如下：
格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No DOM扩展
获取元素
老版本：
document.getElementsByClassName ('class');：通过类名获取元素，以类数组形式存在；H5：
document.querySelector('div');：通过CSS选择器获取符合匹配条件的第一个元素；document.querySelector(".box");：第一个元素；document.querySelector("#box");：第一个元素；document.querySelectorAll('selector');通过CSS选择器获取元素，以类数组形式存在。在H5中，DOM新增的获取元素功能类似jQuery中的方法：（jQuery方法获取到的是数组）
$(".box");；$("#box");；$("div.box");。
类名操作
- 老版：只能直接指定，如
box1.className="content hide";； - jQuery中：
addClass()/removeClass()/hasClass()/toggleClass()； - H5中，新增功能和jQuery中方法一样好用：
-
Node.classList.add('class');：添加class； -
Node.classList.remove('class');：移除class； -
Node.classList.toggle('class');： 切换class，有则移除，无则添加； -
Node.classList.contains('class');： 检测是否存在class； - Node指一个有效的DOM节点，是一个通称。
自定义属性
data-*=""- 在HTML5中我们可以自定义属性必须要以
data-开头，例如data-info="我是自定义属性";，通过Node.dataset['info'];我们便可以获取到自定义的属性值。 - Node.dataset是以类对象形式存在的；
- 当我们如下格式设置时，则需要以驼峰格式才能正确获取：
data-my-name="yijiang"; //获取 Node.dataset['myName']案例练习 (tab 切换)
- 方法一：
tab栏练习 - 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 方法二：
tab栏练习 - 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 111南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 222南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 333南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
- 444南方大旱，农作物减产绝收面积上亩
H5新增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 应用于目标元素，当鼠标离开目标元素时调用 说明：
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式；这要通过调用
ondragover事件的event.preventDefault()方法。将一个盒子中的元素拖拽到另外一个盒子中。
拖拽 12345678全屏
HTML5规范允许用户自定义网页上
任一元素全屏显示；requestFullscreen() 开启全屏显示；
cancleFullscreen() 关闭全屏显示；
不同浏览器需要添加前缀如：
webkitRequestFullScreen、
mozRequestFullScreen
webkitCancleFullScreen、
mozCancleFullScreen
兼容性写法：
var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }通过
document.fullScreen检测当前是否处于全屏。不同浏览器需要添加前缀
document.webkitIsFullScreen、
document.mozFullScreen
全屏伪类：(了解)
:full-screen .box {}、
:-webkit-full-screen {}、
:moz-full-screen {}
Web存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage：会话存储；
window.localStorage(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面)。
一、特性
- 设置、读取方便；
- 容量较大，sessionStorage约5M、localStorage约20M；
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储。
二、window.sessionStorage
-
生命周期为关闭浏览器窗口; - 在同一个窗口下数据可以共享。
三、window.localStorage
- 永久生效，除非手动删除；
- 可以多窗口共享。
四、方法详解
- setItem(key, value)：设置存储内容；
- getItem(key)：读取存储内容；
- removeItem(key)：删除键值为key的存储内容；
- clear()：清空所有存储内容；
- key(n)：以索引值来获取存储内容（了解）。
- 案例：记住用户名
五、其它（了解）
- WebSQL、IndexDB，浏览器中的本地数据库；
- 已经被w3c 放弃了..
- 生命周期差异，存储空间差异。
网络状态
- 我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值;
- window.online用户网络
连接时被调用； - window.offline用户网络
断开时被调用。
应用缓存
- HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个
cache manifest文件。
一、优势
- 可配置需要缓存的资源；
- 网络无连接应用仍可用；
- 本地读取缓存资源，提升访问速度，增强用户体验；
- 减少请求，缓解服务器负担。
二、缓存清单
- 一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用
.appcache为后缀名，添加MIME类型： - AddType text/cache-manifest .appcache
- 在.appcache文件中的内容格式如下：
CACHE MANIFEST #下面是要缓存的文件 CACHE: http://xxx.jpg- 例如我们创建了一个名为demo.appcache的文件，然后在
需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。
三、manifest文件格式
- 顶行写CACHE MANIFEST；
- 注释使用
#开头； -
CACHE:换行，指定我们需要缓存的静态资源，如.css、image、js等；
-
NETWORK:换行，指定需要在线访问（联网才能访问）的资源，可使用通配符； -
FALLBACK:当前页面无法访问时退回的页面(回退;后退)，写法如下： - 换行，当被缓存的文件找不到时的备用资源：
FALLBACK: 4O4.html四、其它
- CACHE：可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST；
- 可以指定多个
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 文件.-
#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。 - chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存。
地理定位
- 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)。
一、获取地理信息方式
- IP地址；
三维坐标：
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 ；6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS；以上6个系统中国都能使用。Wi-Fi；
手机信号。
用户自定义数据：
如下对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
位置信息获取方式对比：
数据源 优点 缺点 IP地址 任何地方都可用；在服务器端处理 不精确（经常出错，一般精确到市级）；运算代价大 GPS 很精确 定位时间长，耗电量大；室内效果差；需要额外硬件设备支持 WiFi 精确；可在室内使用；简单、快捷 在乡村这些WiFi接入点少的地区无法使用 手机信号 相当精确；可在室内使用；简单、快捷 需要能够访问手机或其modem设备 用户自定义 可获得比程序定位服务更准确的位置数据；用户自行输入可能比自动检测更快 可能很不准确，特别是当用户位置变更后 二、隐私
- HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
三、API详解
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息；
navigator.geolocation.watchPosition(successCallback, errorCallback, options)
重复获取当前地理信息；当成功获取地理信息后，会调用succssCallback(position)，并返回一个包含位置信息的对象position。
获取坐标Coords(坐标)：position.coords.latitude纬度、
position.coords.longitude经度；当获取地理信息失败后，会调用errorCallback(error)，并返回错误信息error；
可选参数options对象可以调整位置信息数据收集方式。
根据兴趣可以玩玩全景地图和VR（vr用Pano2VR工具可以制作，可百度查看全景地图制作）。
兼容：
- 案例：
- 百度地图案：
- 使用百度地图API，然后选择jsAPI，然后根据需要选择对应的地图样式，赋值对应的代码到项目中；
- 在API控制台生成秘钥，并将秘钥放到代码对应的位置；
- 传入对应的经纬度。
历史
- 提供
window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。 - 旧版本浏览器..
- history.back() 回退；
- history.forward() 前进。