1.1新标签
header :头部标签
nav：导航标签
article：内容标签
section：块级标签
aside：侧边栏标签
footer:尾部标签
注意：
1.这种语义化标准主要是针对搜索引擎的
2.这些新标签页面中是可以使用多次的
3.在IE9中 需要把这些元素转换为块级元素
4.其实我们移动端更喜欢使用这些标签
1.2新媒体标签
音频： audio (ogg,mp3)
<audio src = "文件地址" controls = "controls" autoplay = "autoplay" loop= "loop"></audio>
autoplay谷歌浏览器禁用
loop:无限循环
因为不同浏览器支持不同音频格式 所以我们准备多个格式
<audio controls = "controls">
<source src = "happy.mp3" type ="audio/mpeg">
<source src = "happy.ogg" type = "audio/ogg">
您的浏览器不支持audio标签。
</audio>
视频： video
<video src = " 文件地址" controls="controls" ></video>
controls: 播放控件
<video src = "文件地址" controls = "controls" muted = "muted" loop = "loop" poster = "封面图片地址（没有自动播放时才添加）">
<source src = "happy.ogg" type ="video/ogg">
<source src = "happy.mp4" type = "video/mp4">
您的浏览器不支持video标签。
自动播放 静音播放 muted
<video>
1.4 表单新属性
type = "email" 可以验证输入内容是否符合邮箱格式
type = "url" 可以验证输入内容是否符合网址格式
type = "data" 带有日期控件
type = "time" 时间
type = "month" 月份
type = "week" 周
type = "number" 数字
type = "tel" 手机号码
type = "week" 周
type = "search" 搜索框
type = "color" 颜色控件
required：表单拥有该属性表示其内容不能为空 必填
placeholder： 提示文字/占位符
autofocus：自动聚焦属性
autocomplete ：（值： on/off）当用户在字段开始输入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开，需要放在表单内同时加上name睡醒 同时成功提交
multiple：可以多选文件提交
2 css3
2.1 css3属性选择器
鼠标样式：小手 ---- cursor：pointer
属性能够选择器使用方法:
元素[属性名]{
}
属性选择器的权重要比标签选择器高
类选择器，属性选择器，伪类选择器，权重为10
input[type = submit]{
type = submit的
}
div[class^="icon"]{
class属性以icon开头的
}
div[class$="icon"]{
以icon结尾的
}
div[class*="icon"]{
包含"icon"的
}
2.2 css3 结构为类选择器
E:first-child ------------ 匹配父元素的第一个子元素
E:last-child ------------ 匹配父元素的最后一个子元素
E: nth-child(n) ------------- 匹配父元素的第n个子元素
E: nth-child(n) -------------- n可以是关键词 even 是偶数 odd 是奇数
E: nth-child(n) -------------- n可以是公式 从0开始计算
2n ： 偶数 2n + 1：奇数
E:first-of-type ------------- 指定类型的第一个
E:last-of-type ------------- 指定类型的第一个
E:nth-of-type(n) ------------- 指定类型的第一个
2.3 伪类选择器（常用）
E::before 在元素内部的前面插入内容
E::after 在元素内部的后面插入内容
注意：
-
两者内部必须有属性：content
-
两者会创建一个元素，行内元素
3 不是一个真正意义上的元素 dom里面看不到
4 伪元素选择器权重为1
字体图标
demo 里面的 @font-face复制一份到style里面 然后复制小方框
给元素指定字体图标
font-family:"icomoon"
3 css 3 2d转换
转换（transform） 可以实现元素的位移，旋转，缩放等效果
移动（translate）-----------transform:translate(x,y)
x y不能省略
transform : translateX/Y(100px)
优点：不会影响其他元素
可以做子元素在父元素水平垂直居中
子元素绝对定位 上 左值： 50%
然后translate的（X，Y）值偏移-50%
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
对行内标签没有效果
旋转
旋转（rotate）----------- transform:rotate(xdeg)
过渡写到本身上 谁做动画给谁加
xdeg度数
缩放（scale）
网友评论