兼容性:支持ie9以上
1.H5 新增标签
nav(定义导航链接部分) header(定义文档的头部) footer(定义文档的页脚底部) article(定义文章) section(定义文档的节,相当于div)aside(定义其所处之外的内容,边)
手机移动端不需要考虑兼容性的问题,经常用到
2.新增属性 datalist 与input 搭配,下拉搜索框。
3.新增表单
- color,选择颜色
- date 选择日期
- email 用于检测输入的是否为email格式的地址
- month 选择月份
- number 用于应该包含数值的输入域,可以设定对输入值的限定
- range 用于定义一个滑动条,表示范围
- search 用于搜索,比如站点搜索或 Google 搜索
- tel 输入电话号码
-time 选择时间 - url 输入网址
- week 选择周和年
4. css3 伪类选择器 :t
tag:first-child 选择其父元素的第一个子元素是tag的元素
tag:last-child 选择其父元素的最后一个子元素是tag的元素
tag:nth-child(n) 选择其父元素的第n个子元素是tag的元素 n=1,2,3...
tag:nth-child(even) 选择其父元素的第偶数子元素是tag的元素
tag:nth-child(odd) 选择其父元素的第奇数子元素是tag的元素
eg : a:hover{
} 鼠标经过链接时。。
结构:选择器
li:first-child{
}
属性选择器
div[class="demo"] 选出div 下属性class 为 demo 的元素。
div[class^=test] 选出div 下属性class 以test开头 的元素。
div[class$=test] 选出div 下属性class 以test结尾 的元素。
伪元素选择器。
p::first-letter 段落第一个字母
p::first-line 段落第一行
p::selection 选中文字状态
before after 伪元素
div::before 在div 内容前 插入 before 行内盒子,伪元素。
div::after 在div 内容后 插入 before 行内盒子,伪元素。
5. css3盒子模型
box-sizing:
content-box (盒模型宽度=width+padding+border) border-size(盒模型宽度=width padding+border包含在width)
tranform:scale(1.1) 变换图像等扩大1.1倍。tranform :rotate(ndeg) 旋转n度;transform-origin: right bottom (以右下角为旋转中心)
过渡:
transition: 属性 耗时s (1s) 变化方式(ease linear等)何时开始(0s)