新手不知道的，前端关于html5入门学习顺序

现在html5移动端非常的火，很多小伙伴想学习又不知道从哪开端学起，今天就分享一下前html5该怎么入门。

首先还是给大家推荐一个学习氛围很好的裙，我自己的，想要一起学习web前端的可以加裙六一四三一五六五七，有各种资料和开发工具包满足大家，每天更新最新行情

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 影子