前段时间因为工作中看到同事使用了一个type为date的<input>元素，直接就形成了一个日期选择的表单控件，当时觉得很神奇，以为是什么插件，就问了同事是怎么做出来的，同事告诉我这是HTML5的新控件类型。于是这件事让我决定先好好学习下HTML5新标准相对于HTML4时代有什么不同，其实刚开始学习前端的时候，在知乎社区就了解到了，这是前端界未来很有发展潜力的新标准，正是HTML5让WEBAPP变得更有实现的机会以及让flash慢慢走衰……由于自身水平的不足，我选择的是看一本关于H5的书，因为书会介绍更多的来龙去脉和发展历史，对于我这种新人来说更具有启发性。我看的是Matthew MacDonald的《HTML5秘籍》。
这张图是我目前学习和了解到的H5的一部分基础知识点，里面没有学习到太多H5的两个很重要的部分，一个是离线应用，一个是canvas绘图，canvas绘图上是浅尝辄止，稍做了一些了解。这两个部分没有花时间，第一因为自己耐心不足，第二是因为工作中一段时间内可能都还用不到，没有实际的需求，怕这两个对我目前来说算复杂的部分学了以后搁置久了也会忘了，所以打算以后有需求的时候或者有一定积累以后再深入学习。
接下来我就按照这张思维导图说说看完这本书以后记录和总结。
书写规范
- 包含html,head,body标签；
- 标签名全部为小写；
- 为属性值加上引号；
- 空元素的标签不要闭合。
支持特性检测和腻子脚本
H5新增了许多新特性，但是浏览器并不是全部支持这些新特性，并且不同的浏览器以及不同的版本支持特性的程度都不相同，所以使用H5新特性前，需要做支持特性检测，推荐使用[Modernizr](https://github.com/Modernizr/Modernizr#building)插件，这样可以在考虑到兼容性的情况下使用H5的新特性。此外，还有各种各样的腻子脚本(polyfill)，这些腻子脚本可以提供考虑了兼容性的某个（某些）新特性的解决方案。
容器语义元素
`
<header>表示网页的头部，比如logo，导航，用户信息之类的都可以放在里面。
<footer>表示网页的尾部，一般放一些版权申明和联系方式。
<figure>和<figcaption>元素是用于插图的新语义标签，<figcaption>和<img>放在<figure>内部，<figcaption>表示图标题。
<detail>和<summary>：效果有点像折叠面板，<detail>作为折叠内容的容器，<summary>作为折叠后的标题，放在<detail>元素的内部，<detail>内部还要放折叠后展开可见的内容，具体效果如图：
类似于上面的那些容器级语义元素，就不在此一一赘述了。
文本级语义元素
在这本书中，了解到的H5中的文本级语义元素只有<time>, <output>, <mark>这三个，其中<time>用来作为时间的存放元素，<output>作为输出结果的存放元素，<mark>作为标记（即高亮）文本的存放元素--有些浏览器可能会对<mark>元素内的文字应用特殊的样式，但是有些浏览器是没有的，所以需要的话，最好自己设定<mark>元素的样式。
表单级语义元素
---<input>
<input>元素算是我在学习过程中最频繁遇到的表单控件元素之一了，在H5中，input元素有了一些新特性：
属性上：
title：属性加在表单控件上，用于给提示信息。
autofocus：属性只能加在一个表单控件上，用于表单控件的自动获得焦点。
pattern：属性加在表单控件上，用于正则验证。
novalidate：还有一个关闭表单验证功能的办法，这个属性直接加在<form>上，用于控制关闭表单验证功能。
type：属性是我看来的重点，这本书里面介绍了许多个我之前没有用过属性，并且就像文章开头说的，正是<input>的"date"这个type，才引起了我对H5的关注和学习的想法。在书中提到的type的值有：email, url, search, tel, number, range, date, time。相信根据字面意思大部分属性值就很好理解了，其中range属性会让<input>变成一个滑动条，可以手动滑动，当设置这种type属性时，还需要给<input>设置min, max, step, value这些值才能正常工作。
---新表单控件
<datalist>, <option>：这两个新元素用来显示输入建议，需要将目标<input>元素的list属性值设置为对应的<datalist>的id。兼容方面的解决办法：H5秘籍 P110
<datalist id="choices">
<span class="label">Pick up an option:</span>
<select id="favoriteChoice">
<option label="alpha" value="alpha">
<option label="beta" value="beta">
<option label="gama" value="gama">
</select>
<br>
<span class="label">Or type it in:</span>
</datalist>
<input list="choices name="list"> //可以识别datalist的就只会读取里面的option内容
<fieldset>,<legend>：这两个元素用来展示表单的范围和给表单标题。后者放在前者中。
<progress>：这个元素用于表现进度，拥有一个max属性和一个value属性。默认max为1。
<meter>：这个元素和<progress>类似，不过偏向于表示数值，有min, max, low, high, value这五个属性。
---表单事件
- onblur
- onchange
- oncontextMenu
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onselect
- onsubmit
其中值得一提的是oncontextMenu事件，它在上下文菜单被触发时产生。其它事件都很好从字面上理解。
---表单CSS伪类
- :required
- :valid
- :inrange
其中:inrange伪类需要控件有min和max属性才可以进行判断。
音频和视频元素
---audio
control属性：告诉浏览器要包含播放控件。
preload属性：控制音频的预加载。
autoplay属性：控制音频的自动播放。
loop属性：控制音频的循环播放。
---video
audio的全部属性：control, preload, autoplay, loop.
width：控制视频播放控件的宽度。
height：控制视频播放控件的高度。
poster：用于替换视频的图片，在以下三种情况会使用到：1.视频第一帧未加载完毕；2.把preload属性设为none；3.没有找到指定的视频文件。
---source
source主要用于配合audio、video使用可以解决浏览器只支持有限的媒体格式的问题，使用的时候用source一个个地添加媒体文件。
src：媒体源文件。
type：提供源文件的MIME信息。
---JS控制音视频方法
[audio]
属性：currentTime提供当前音频播放到的时间。
方法：play()控制开始/继续播放。pause()控制播放暂停。
[video]
属性：currentTime提供当前视频播放到的时间。playbackRate控制播放速率，默认为1正常播放，负值时为倒着播放。duration提供当前播放视频的总时长。
方法：play()控制开始/继续播放。pause()控制播放暂停。
---好用的音视频插件
VideoJS和jPlayer.
Canvas绘图
---context
canvas元素对应着一个对象，这个元素有.getContext()方法，这个方法可以生成一个可以画图的Context对象，具体流程：
var canvasElement=document.getElementById("id");
var context=canvasElment.getContext("2d"); //目前还只有二维上下文，没有三维上下文
具体的使用方法暂时还没有学习，需要的时候再进行深入学习。
---canvas高级绘图
context.drawImage()：在画布上的特定位置画指定的图片。
复杂图绘制的要点：记录绘制的所有内容和过程，才能在将来灵活地修改它们。
CSS3
---WEB字体格式
-
@font-face方式注册字体
@font-face{
font-family: 'selfDefineName';
src: url('url-address');
src: local('local-font'),
url: ('xxxx') format('yyy');
} 使用
<link>添加谷歌在线字体
---多栏文本
多栏文本可以在一个块内把文本分成多个竖栏显示。通过把属性加在需要分栏的块级元素上来实现。主要有这些属性：
- column-count
- column-width -- 用于规定每栏的宽度
- column-gap
- column-rule -- 规定列之间的宽度、样式和颜色规则
---媒体查询
媒体查询是H5中的一个我认为的重点，主要用于响应式布局和浏览器兼容性的调整。可以针对不同的设备和浏览器采用不同的样式。
@media(){}：这是一种直接写在样式表中的方法，通过括号内的控制量来确定对应的样式，括号内的控制量有max-width、max-device-width、orientation，还有设备类型(print等)；
媒体查询控制样式表的引入：在link中添加media属性，属性值为控制内容；
CSS hack和其它针对特定浏览器的方法：
- IE9以下的版本，可以这样引入针对IE9以下版本的样式表：
- IE10 IE11IE10/11不支持条件性注释的3个解决方法
- 火狐和chromeIE Chrome Firefox CSS Hack
---透明度
- rgba(r,g,b,a)方法赋值颜色
- 使用opacity属性（推荐）
---背景盒子
背景图片：background-image，background-position，background-repeat。这些值可以同时传递多个参数，每个值都传递多个参数就可以同时控制传入的多个背景图。
阴影盒子：box-shadow
---过渡效果
利用transition这个CSS属性，使用方法：[-prefix-]transition: propertyName1 usetime1[,propertyName2 usetime2];
---变换效果
transform有这些方法：scale()，scaleX()，skew()，rotate()，使用方法：[-prefix-]transform: method1(para) method2(para);
数据存储
---存储方式
localStorage：本地存储，不清除的话可以一直保留。
sessionStorage：会话存储，关闭页面的话会清除。
---本地存储的操作
- .removeItem("key")
- .clear()
- .key(i)
---JSON数据的存储方式
由于本地存储只能存放字符串类型的数据，所以对于JSON数据，要先进行字符串化：
-
JSON.stringify()
2.JSON.parse()
这样就可以完成JSON数据的存取。
---响应存储变化事件
onStorage，这个事件添加事件响应函数的时候，可以用如下的事件对象的属性来取得一些数据。event.key, event.oldValue, event.newValue, event.URL。
---File API
取得文件共有两种方式：1.type为file的input；2.隐藏input，需要时用JS调用input的click事件，触发input的onchange事件。
- 文件属性：文件属性有三个信息，文件名、字节大小、MIME类型。
- 文件对象FileReader：
事件：
FileReader.onload, FileReader.onProgress, FileReader.onError, FileReader.onLoadEnd.
方法：
FileReader.readAsText(), FileReader.readAsBaniryString(), FileReader.readAsDataURL(), readAsArrayBuffer(), FileReader.abort()。使用这些方法时，文件存在e.target.result中。
WEB服务器与通信
- 服务器发送事件：让WEB服务器与浏览器页面保持连接。
-
WEB Socket：让浏览器和服务器快速即时地发送数据，有以下几个事件
onopen,onmessage,onerror,onclose。
任务放在后台处理
使用new Worker("JS文件") 创造一个worker对象。
-
事件：
worker.onmessage这个事件在客户端和服务端都存在。 -
方法:
worker.postMessage()这个方法在客户端和服务端都存在。