HTML5（最常用）
新增标签
语义化
header：头部
nav：导航
article:内容
section:定义文档某个区域
aside：侧边栏
footer:尾部
主要针对搜索引擎
可多次使用
在IE9中需要转化为块级标签
视频
audio：音频(.mp3)
video：视频（尽量使用.mp4）
新的表单
-
email
-
url
-
number
-
range
-
Date pickers (date, month, week, time, datetime, datetime-local)
-
search
-
tel
-
color
限制输入的元素
新的表单属性
新的 form 属性：
- autocomplete
- novalidate
新的 input 属性：
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple ：提交多个文件
- pattern (regexp)
- placeholder ：提示文本
- required ：必须书写，不能为空
CSS3
属性选择器
input[type=text] {
color:pink;
}
只选择type=text文本框的input选取出来
input[type^=text] {
color:pink;
}
以text开头的
input[type$=text] {
color:pink;
}
以text结尾的
input[type*=text] {
color:pink;
}
包含text的
属性权重与类选择器相同，10
结构伪类选择器
E：first-child父元素中第一个E元素
ul li:first-child
E：last-child父元素中最后一个E元素
E：nth-child（n）父元素中一个或多个E元素
ul li:nth-child(2)第二个
ul li:nth-child(even)偶数选出来
ul li:nth-child(odd)奇数选出来
ul li:nth-child(n)所有
ul li:nth-child(2n)偶数
……
n+5:从第5个开始
-n+5：前5个
E：first-of-type:指定类型E的第一个
E：last-of-type
E：nth-of-type(n)
伪元素选择器
权重为1
：：before元素内部的前面插入内容
：：after后面
语法：element：：before{}
必须具有content属性
属行内元素
清楚浮动
第一种
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
第二种
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
盒子模型
margin和padding会撑大盒子
box-sizing：content-box|border-box
content-box（默认），会撑大
border-box则不会撑大
照片模糊处理
filter：burl（5px）;数值越大越模糊
calc函数
进行计算
子盒子永远比父盒子小30px
width：clac（100%-30px）;
过渡
transition：属性 花费时间（0.5s） 运动曲线（ease） 何时开始（默认0）
div {
position: relative;
width: 400px;
height: 420px;
border: 5px solid orange;
background-color: pink;
box-sizing: border-box;
transition: width 1s;
}
div:hover {
width: 800px;
}
多个属性
div {
position: relative;
width: 400px;
height: 420px;
border: 5px solid orange;
background-color: pink;
box-sizing: border-box;
transition: all 1s;
}
div:hover {
width: 800px;
height: 800px;
background-color: blue;
}
谁做过渡给谁加transition
标签：box,06,color,text,nth,html5,child,type,css From： https://www.cnblogs.com/Z2201210269/p/17777590.html