大牛程序员分享html5入门学习路线顺序
HTML5目前非常火爆，而专家判断其在未来10年内都不会过时。越来越多的小伙伴也都开始学习HTML5技术，但许多小伙伴不知学习HTML5该从何处着手，也不知正确的的HTML5学习路线是怎样的，这也就导致了学习HTML5的效果不佳，效率更是不高。那么小编今天就与大家分享一条正确的学习路线，为诸位小伙伴解惑。
可以找一些不错的HTML5相关书籍来学习，理论知识也需要掌握，而且书籍可以做一些笔记，重点难点可以标记，不懂和重点多看多记，这样能更好的掌握。
推荐五本不错的HTML5书籍，它们确实是学习HTML5的好帮手。分别是《HTML5 + CSS3 从入门到精通》、《响应式web设计：HTML5和CSS3实战》、《HTML5移动web开发实战详解》、《疯狂HTML 5/CSS 3/Java讲义》、《HTML5与CSS3权威指南》、《HTML5触摸界面设计与开发》。那么下面分享一些必学的知识点：
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 鼠标点击时触发的事件
:focus 当前获取焦点的元素
其他伪类选择器：
: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: 计算或脚本输出