大牛程序员分享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

20000

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: 计算或脚本输出