Html5与CSS3新特性

H5新特性

新增的语义化标签

• <header> : 头部标签
• <nav> : 导航标签
• <article> : 内容标签
• <main> : 主体标签
• <aside> : 侧边标签
• <footer> : 底部标签
• <section> : 定义文档某个区域标签

新增的多媒体标签

• <video> : 视频标签
• <audio> : 音频标签

<video src="文件地址"></video>
<audio src="文件地址"></audio>

属性 ：

属性	属性值	描述
autoplay	autoplay	视频自动播放
control	control	向用户显示播放控件
loop	loop	播放完自动播放
muted	muted	静音播放

新增的input表单type类型

• email 限制用户输入的必须为Email类型
• url 限制用户输入的必须为url类型
• date 限制用户输入的必须为日期类型
• time 限制用户输入的必须为时间 类型
• search 限制用户输入的必须为搜索框
• month 限制用户输入的必须为月 类型
• week 限制用户输入的必须为周 类型
• number 限制用户输入的必须为数字类型
• tel 限制用户输入的必须为电话号码类型
• color 限制用户输入的必须为颜色类型
  注意：我们验证的时候必须在form表单域中

新增的表单属性

• required required 表单拥有该属性表示内容不能为空
• placeholder=“提示文本”
• autofocus=“autofocus” 页面加载完成后自动聚焦在指定表单
• autocomplete off/on 必须有name属性 显示搜索过的历史信息（默认打开on）
• multiple multiple 可以多选文件(type=“file”)

CSS3新特性

新增属性选择器

权重为10，注意权重问题
[属性值=" "]
选择以…开头：^ div[class^=icon]
选择以…结尾：$ div[class$=icon]
选择包括… ：* div[class*=icon]

新增结构伪类选择器

权重为10

根据文档结构来选择元素，常用于根据父级选择器的子元素

E:nth-child(n)

• n可以是数字、关键字和公式
  • n如果是数组，就是选择第n个子元素，里面的数字从1开始
  • n可以是关键字 even偶数 odd奇数
• first-child 选择第一个子元素
• last-child 选择最后一个子元素

E:nth-of-type(n)

• n可以是数字、关键字和公式
  • n如果是数组，就是选择第n个子元素，里面的数字从1开始
  • n可以是关键字 even偶数 odd奇数
• first-of-type 指定类型E的第一个
• last-of-type 指定类型E的最后一个

两者区别

E:nth-child(n)对父元素里面的孩子排序选择(序号固定)先找到n在和E匹配
E:nth-of-type(n)对父元素里面指定的子元素进行排序,先去匹配E再去找第n个孩子

伪元素选择器

权重为1、双冒号
::before 在元素内部的前面插入内容
::after 在元素的后面插入内容

• before和after 属于行内元素
• 新创建的这个元素在文档中找不到称为伪元素

CSS3盒子模型

box-sizing :border-box
css3中通过box-sizing来指定盒子模型（不会撑大盒子）

CSS3滤镜filter

将模糊或颜色偏移等图形效果应用于元素
filter() 函数

filter:blur(5px)

calc() 函数
声明css属性值时执行一些计算

width:calc(100% - 30px)

注意：进行加减乘除计算左右两边要有空格

CSS3过渡 transition

从一个状态变化到另一个状态
transition：要过渡的属性 花费时间 运动曲线 何时开始

• 要过渡的属性 : all 给所有属性加 （必选）
• 花费时间 ：例：0.5s （必选）
• 运动曲线 ：ease 默认 （可选）
• 何时开始 ：单位s 默认0s （可选）

注意：谁做过渡给谁加，多个属性之间用逗号分隔