HTML5现阶段十分火热，而研究者推论其在今后10周内都不能落伍。愈来愈多的爸爸妈妈也都已经开始自学HTML5控制技术，但很多爸爸妈妈无人知晓自学HTML5该从何方著手，也无人知晓恰当的的HTML5自学走线是什么样的，这也就导致了自学HTML5的效用欠佳，工作效率着实相对较低。所以小贴士那时就与我们撷取两条恰当的自学走线，为众位爸爸妈妈答疑。
能找很多极好的HTML5有关书刊来自学，专业知识也须要掌控，而且书刊能做很多讲义，农村基层能记号，要学和重点项目多看记事，这种能更快的掌控。
所推荐五本极好的HTML5书刊，它的确是自学HTML5的RTUs。依次是《HTML5 + CSS3 从进阶到通晓》、《积极响应式web内部结构设计：HTML5和CSS3两栖作战》、《HTML5终端web合作开发两栖作战简述》、《狂热HTML 5/CSS 3/Java短文》、《HTML5与CSS3权威性手册》、《HTML5轻触操作界面与合作开发》。所以下面撷取很多recommend的习题：
1、css3追加示例
内部结构示例:
:nth-child(n) 父原素下的第n个头原素
:nth-child(odd)偶数子原素(同nth-child(2n-1))
:nth-child(even)偶数子原素(同nth-child(2n))
:nth-child(an+b)公式
:nth-last-child(n) 倒数第n个头原素
:nth-of-type(n) 父原素下的第n个指定类型的子原素
:nth-last-of-type 父原素下的数第n个指定类型的子原素
:first-child 选择父原素下的第一个头原素
:last-child 选择父原素下的最后一个头原素
:only-child 选择父原素下唯一的子原素
:only-of-type选择父原素下指定类型的唯一子原素
:root 选择文档的根目录，返回html
属性示例:
:E[attr] 属性名，不确定具体属性值
:E[attr=”value”] 指定属性名，并指定其对应属性值
:E[attr ~=”value”] 指定属性名，其具有多个属性值空格隔开，并包含value值
:E[attr ^= “value”] 指定属性名，属性值以value开头
:E[attr $=”value”] 指定属性名，属性值以value结束
:E[attr *=”value”] 指定了属性名，属性值中包含了value
:E[attr |= “value”] 指定属性名，属性值以value-开头
UI伪类示例：
:enabled 选择启用状态原素
:disabled 选择禁用状态原素
:checked 选择被选中的input原素（单选按钮或复选框）
:default 选择默认原素
:valid、invalid 根据输入验证选择有效或无效的input原素
:in-range、out-of-range 选择指定范围之内或者之外受限的原素
:required、optional 根据是否允许
:required属性选择input原素
动态伪类示例：
:link 选择链接原素
:visited 选择用户以访问的原素
:hover 鼠标悬停其上的原素
:active 鼠标点击时触发的事件
其他伪类示例：
:not(<示例>) 对括号内示例的选择取反
:lang(<目标语言>) 基于lang全局属性的原素
:target url片段标识符指向的原素
:empty选择内容为空的原素
:selection 鼠标光标选择原素内容
2、背景
background-size:背景尺寸
background:url() 0 0,url() 0 100%;多背景
background-origin 背景区域定位
background-clip 背景绘制区域颜色渐变
background-image：linear-gradient()线性渐变
background-image：radial-gradient()径向性渐变
3、文本属性
color:rgba();
text-overflow:是否使用一个省略记号（…）标示对象内文本的溢出(单行文本溢出、多行文本溢出)
text-align:文本的对齐方式
text-transform:文字的大小写
text-decoration:文本的装饰线，复合属性
text-shadow:文本阴影
text-fill-color:文字填充颜色
text-stroke:复合属性。设置文字的描边
tab-size:制表符的长度
word-wrap:当前行超过指定容器的边界时是否断开转行
word-break:规定自动换行的处理方法
4、弹性盒模型
box布局设置给父原素属性:
display:box/display:inline-box;
box-orient 定义盒模型的布局方向
box-direction 原素排列次序
box-pack 对盒子富裕的空间进行管理
box-align 在垂直方向上对原素的位置进行管理
设置给子原素
box-ordinal-group 设置原素的具体位置
box-flex 定义盒子的弹性空间
flex布局设置给父原素属性:
flex-direction属性决定显示的方向（即项目的排列方向）
flex-wrapflex-wrap属性定义，如果一行排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在水平方向的对齐方式。
align-items属性定义项目在竖直方向上如何对齐。
align-content属性定义了多行的对齐方式。如果项目只在一行，该属性不起作用。
设置给子原素：
order 属性定义项目的排列次序。数值越小，排列越靠前，默认为0。可为负值
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父原素的align-items属性，如果没有父原素，则等同于stretch。
5、怪异盒模型(box-sizing)
box-sizing 盒模型解析模式
content-box 标准盒模型(和css2一样的计算) width/height=border+padding+content
border-box 怪异盒模型 width/height与设置的值一样 ，content减小3、2D变换、3D变换
6、盒子阴影、倒影
box-shadow 阴影 box-reflect 倒影
7、2D+3D变换
2D变换
ransform:rotate() 旋转函数 (deg) deg 度数
skew(X,Y) 倾斜函数 (deg)
skewX()
skewY()
scale(X,Y) 缩放函数 (正数、负数和小数)
scaleX()
scaleY()
translate(X,Y) 位移函数(px)
translateX()
translateY()
matrix(a,b,c,d,e,f) 矩阵函数
3D变换
transform-style（preserve-3d） 建立3D空间
perspective 视镜
perspective- origin 视镜基点
x:left/center/right/length/%
y:top/center/bottom/length/%
transform 追加函数
rotateZ()
translateZ()
scaleZ()translate3d(x,y,z)
backface-visibility: hidden;
8、动画过渡
transition:property duration timing-function delay;
transition-property:过渡属性的名称
transition-duration:过渡属性花费的时间
transition-timing-function:过渡效用速度曲线（贝塞尔曲线简述）
transition-delay:过渡效用延迟时间
过渡完成事件:transitionend
9、自定义动画
animation-name: 动画名称
animation-duration: 动画执行时间
animation-timing-function: 动画速度曲线（贝塞尔曲线简述）
animation-delay:动画效用延迟时间
animation-iteration-count: 动画执行次数
animation-direction:动画执行方向
animation-play-state:动画执行状态
animation-fill-mode:动画执行过程效用是否可见
@keyframes:规定动画关键帧
from{} to{}
0%{} 100%{}
动画事件:animationstart/animationiteration/animationend
10、布局
分栏布局
column-width栏目宽度
column-count栏目列数
column-gap栏目距离
column-rule栏目间隔线
积极响应式布局:媒体类型
*all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
*print 手持设备
projection 打印预览
*screen 彩屏设备
speech 听觉类似的媒体类型
tty 不适用像素的设备
tv 电视
关键字：
and
not关键字是用来排除某种制定的媒体类型
only用来定某种特定的媒体类型
样式引入 @media screen—-些处内容重点项目太多，暂保密
11、智能表单及表单验证反馈
input表单type属性值：
type = “email” 限制用户输入必须为Email类型
type=”url”限制用户输入必须为URL类型
type=”date” 限制用户输入必须为日期类型
type=”datetime” 显示完整日期 含时区
type=”datetime-local” 显示完整日期 不含时区
type=”time” 限制用户输入必须为时间类型
type=”month” 限制用户输入必须为月类型
type=”week” 限制用户输入必须为周类型
type=”number” 限制用户输入必须为数字类型
type=”range” 生成一个滑动条
type=”search” 具有搜索意义的表单results=”n”属性
type=”color” 生成一个颜色选择表单
type=”tel” 显示电话号码
新增属性:
equired: required 内容不能为空
placeholder: 表单提示信息
autofocus:自动聚焦
pattern: 正则表达式 输入的内容必须匹配到指定正则范围
autocomplete:是否保存用户输入值默认为on，关闭提示选择 off
formaction: 在submit里定义提交地址
datalist: 输入框选择列表配合list使用 list值为datalist的id值
表单验证反馈:
Invalid事件 validity对象(valid查看验证是否通过)
input.addEventListener(invalid,fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
oText.addEventListener(“invalid”,fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
customError 不符合自定义验证
setCustomValidity();
自定义验证
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
output: 计算或脚本输出
