H5C3新特新总结

一. Html5新特性

1. 语义化标签 < header > 头部标签、 < nav > 导航标签、< article > 内容标签、< section >定义文档某个区域、< aside >侧边栏标签、< footer > 尾部标签

2. 多媒体标签

• video 视频标签
• audio 音频标签

3. 新增表单元素 input 表单里面type 属性中新增 email url date time number search tel

• number 限制用户输入必须为数字类型
• tel 手机号
• search 搜索框

4. canvas 画布
5. 拖放API ：drag、drop 二. Css3新特性
6. 新增选择器

• 属性选择器

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
    color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
    color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {
    color: blue;
}

• 结构伪类选择器 E:nth-child(n) 匹配到父元素的第n个元素

2. 盒子模型

• box-sizing ：content-box (默认) 盒子大小=width+padding+border
  

• box-sizing : border-box 盒子不会被padding和border撑大
  

3. 滤镜 filter

• filter:函数();  例如 filter: blur(5px); --> blur模糊处理  数值越大越模糊
  

4. calc 函数

• width: calc(100% - 80px); 括号里面可以使用 + - * / 来进行计算
  

5. CSS3 过渡

transition: 要过渡的属性  花费时间  运动曲线  何时开始;