HTML+CSS : H5+CSS3

HTML5语义化标签:

header nav(导航) article section(章节) aside(侧边栏) footer
---------------------------------------------------------------

H5新增表单控件:

email（自动验证email格式）

url（自动验证url格式）

number（只能输入数字）

range（类似音量滑动条）

Date pickers (date, month, week, time, datetime, datetime-local)（自带日期选择）

search（搜索域）

color（颜色选择）

datalist（自动验证内容是否在可选择选项中）

新增表单控件属性: placeholder(提示文字) autofocus(自动焦点) autocomplete(联想关键词)
---------------------------------------------------------------
新增音频标签 audio(支持ogg,wav,mp3)
属性:autoplay controls(显示) loop preload(预加载) muted(静音)

新增视频标签 video(支持ogg,webM,mp4)
属性:width,height,poster
---------------------------------------------------------------
样式的权重:

!important,权重10000

内联样式,权重1000

ID选择器,权重100

类,伪类和属性选择器,权重10

标签,伪元素选择器,权重1

通用(*),子(>),相邻(+),同胞(~)选择器 权重0

---------------------------------------------------------------
颜色表示:rgba:如rgba(255,255,255,255,0.5)最后一个数表示50%的透明度

圆角:border-radius ,如画个圆 border-radius 50% 50%

阴影 box-shadow: 水平偏移 垂直偏移 羽化度 阴影大小 颜色 inset(内阴影)

动画 transition: 属性(如width) 过渡时间 过渡方式(ease或曲线) 延迟,....

---------------------------------------------------------------

选择器:

li:nth-child(2){
color:green;
}
可以把所有li标签的第二个字体颜色变绿.

---------------------------------------------------------------

li:nth-child(2n){
color:green;
}
偶数行变绿

---------------------------------------------------------------

li:nth-child(2n+1){
color:green;
}
奇数行变绿

---------------------------------------------------------------
---------------------------------------------------------------

li:nth-of-type(2){
color:green;
}
和nth-child()的区别是:如果li:nth-child(2)找到的第二个子元素不是li标签,那么它不做任何处理,而li:nth-of-type(2)
是找第二个li子元素,而不是找第二个子元素.

---------------------------------------------------------------
---------------------------------------------------------------

div:empty{}:匹配一个元素类型为div的空元素

input:disabled{} : 选择失效的表单控件

input:enabled{} : 选择可用的表单控件

input:checked{} : 选择选中的checkbox

---------------------------------------------------------------
---------------------------------------------------------------
transform变换:

translate(x,y) 位移

scale(x,y) 缩放

rotate(deg) 旋转

---------------------------------------------------------------
---------------------------------------------------------------
animation动画:
简单例子:

div{animation: moving 0.1s 0.1s infinite alternate;}

@keyframes moving{
from{
width:350px;
}
to{
width: 600px;
}
}

大概就是这个样子..