html5&css3（day4）
1.HTML5新特性
增加了一些新的标签、新的表单和新的表单属性等。
基本是 IE9+ 以上版本的浏览器才支持。
1.1 HTML5 新增的语义化标签
②视频:
html
//controls="controls"增加播放控件
css
注意：
谷歌浏览器把音频和视频自动播放禁止了
但是，可以通过给视频标签添加 muted 属性来静音播放视频，音频不可以(可以通过JavaScript解决)
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性
1.3 HTML5 新增的 input 类型
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- color
1.4 HTML5 新增的表单属性
- required 规定必须在提交之前填写输入域（不能为空）
- placeholder 提示文本
可以通过以下设置方式修改placeholder里面的字体颜色: input::placeholder { color: pink; } - autofocus 自动聚焦
- autocomplete 规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。值"on/off"。
- multiple 多选文件
2.CSS3新特性
2.1新增选择器
①属性选择器
选择具有某属性的元素
input[value] {
//必须是input 但是同时具有 value这个属性 选择这个元素
color:pink;
}
选择具有某属性且属性值等于text的元素
//重点
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
选择具有某属性且属性值以icon开头的元素
div[class^=icon] {
color: red;
}
小图标1
小图标2
小图标3
小图标4
我是打酱油的选择具有某属性且属性值以data结尾的元素
section[class$=data] {
color: blue;
}
我是安其拉
我是哥斯拉
哪我是谁 选择具有某属性且属性值中含有data的元素
section[class*=data] {
color: blue;
}注意:
类选择器、属性选择器、伪类选择器，权重为 10。
②结构伪类选择器
匹配父元素中的第一个子元素
ul li:first-child {
background-color: pink;
}
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
匹配父元素中的最后一个子元素
ul li:last-child {
background-color: pink;
}匹配父元素中的第2个子元素（重要）
ul li:nth-child(2) {
background-color: skyblue;
}nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)
・n可以是数字，关键字和公式
・n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始...
・n 可以是关键字:even 偶数，odd 奇数
・n 可以是公式:常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
2n:偶数
2n+1:奇数
5n: 5 10 15...
n+5: 第5个开始到最后
-n+5: 前5个（包括5）
匹配指定类型的第1个元素
ul li:first-of-type {
background-color: pink;
}匹配指定类型的最后1个元素
ul li:last-of-type {
background-color: pink;
}匹配指定类型的第n个元素
ul li:nth-of-type(n) {
background-color: skyblue;
}注意:
nth-child 会把所有的孩子都排列序号，执行的时候首先看 :nth-child(n) 之后回去看前面的指定类型。
nth-of-type 会把指定元素的盒子排列序号，执行的时候首先看 指定类型的元素 之后回去看 :nth-of-type(n) 第几个孩子
③伪元素选择器
好处：利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
element::before {}注意：
・before 和 after 创建一个元素，但是属于行内元素
・新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
・before 和 after 必须有 content 属性
・before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
・伪元素选择器和标签选择器一样，权重为 1
2.2盒子模型
box-sizing 来指定盒模型，有2个值:即可指定为 content-box、border-box
1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
2. box-sizing: border-box 盒子大小为 width
用box-sizing: border-box的话，padding和border不会撑大盒子(前提padding 和border不会超过width宽度)
2.3其他特性（了解）
①图片变模糊
CSS3滤镜filter：filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数();例如: filter: blur(5px); blur模糊处理，数值越大越模糊。
②计算盒子宽度 width: calc 函数
CSS3 calc 函数：calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
//子盒子比父盒子宽度小80px括号里面可以使用 + - * / 来进行计算。
2.4 CSS3 过渡(重点)
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态。
经常和:hover 一起 搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
//前两个属性必须写，后两个可以省略
//属性： 想要变化的 css 属性。写多个属性用逗号隔开。如果想要所有的属性都变化过渡， 用all
//花费时间： 单位是秒(必须写单位) eg：0.5s
//运动曲线： 默认是 ease (可以省略)
//何时开始： 单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)*谁过渡给谁加
3.结语
狭义的HTML5:HTML5 结构标签本身。
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。