html5新特性

  • 新的标签

header 头部标签
nav 导航栏标签
section 某个区域
footer 尾部标签
aside 侧边栏
article 内容标签
以上都相对于是div标签

  • 多媒体标签

audio 音频标签

video 视频标签

muted 静音controls 播放按钮autoplay 自动播放loop 循环poster 封面
  • 新的表单和表单属性

input表单：

type属性值新增选项：email,url,date,time,month.week,time,search,tel,color,number等

表单属性：

required，placeholder、autofocus、autocomplate、multiple;

CSS3新特性

  1. 新增选择器
  • 属性选择器：（权重是10 和class类选择器一样）

利用属性选择器可以不用借助于类和id选择器 E[attr]
根据属性=值选择元素 E[attr=val]
选择属性值结尾、包含或开头的某些元素 E[attr$=‘val’] E[attr*=‘val’] E[attr^=‘val’]

  • 结构伪类选择器

根据文档结构进行选择，常用于根据父级选择器选择子元素
E:first-child last-child 第一个和最后一个
nth-child(n) nth-child(2n) n可以是数字，关键字(even或odd)或公式
E:first-of-type last-of-type nth-of-type(n)
nth-clild会把所有的盒子都排列序号，所以只使用序号会不准确，而nth-of-type不会，只会把指定类型排列序号；

  • 伪元素选择器

伪元素选择器可以利用css创建标签元素,属于行内元素
伪元素选择符主要有 ::before和::after 必须包含有content属性
伪元素选择器的权重和标签一样都是1

  1. CSS3盒子模型：

通过box-sizing指定盒模型：两个值：content-box和border-box
content-box是默认值， border-box盒子的大小为width

  1. 滤镜filter，计算函数calc(),
img{ filter:blur(5px) }//图片模糊div { width: calc(100% - 50px); }
  1. CSS3过渡 transition

transtion: 要过渡的属性 花费时间 运动曲线 何时开始
最后两个属性可以不写；

CSS3过渡div{width: 200px;height: 200px;background-color: palegoldenrod;transition: width 2s,height 2s;}div:hover{width: 100%;height: 400px;}