H5C3提高（1）

div对搜索引擎来说没有语义。

H5新增标签

语义化标签

  <header></header>头部标签

  <nav></nav>导航标签

 <article></article>内容标签

 <section></section>定义文档某个区域

 <aside></aside>侧边栏标签

 <footer></footer>尾部标签

可以多次使用，建议在移动端使用

视频标签

<vide>尽量用MP4格式

 格式：<video src="文件地址" controls="controls"></video>

属性	值	描述
autoplay	autoplay	自动播放（谷歌需要加muted解决）
controls	controls	向用户显示播放控件
width	px	播放器宽
height	px	播放器高
loop	loop	播放完是否继续，循环播放
poster	imgurl	加载时出现的图片
muted	muted	静音播放
src	url	视频地址
preload	auto（预先加载） none (不加载)	规定是否预先加载视频

音频标签

<audio src="文件地址"></audio>  尽量使用MP3

input表单

属性值	说明
type=“email”	限制用户必须输入email类型
type=“url”	限制用户必须输入URL类型
type=“date”	限制用户必须输入日类型
type=“time”	限制用户必须输入时间类型
type=“month”	限制用户必须输入月类型
type=“week”	限制用户必须输入周类型
type=“number”	限制用户必须输入数字类型
type=“tel”	手机号
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

注：验证时必须添加表单域

新增表单属性

属性	值	说明
required	required	表示必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 默认已经打开，关闭用off需要放在表单内，同时加上name属性，同时成功提交过
multiple	multiple	可以多选文件提交
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单

autofocus：自动聚焦

autocomplete：（必须有name属性）

multiple：不同于type：file；

可以多选文件

C3新增标签

新增选择器

属性选择器

可以根据元素特定属性来选择元素，这样就可以不用借助于类或id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att="x"]	选择具有att属性且属性值等于x的E元素
E[att^="x"]	匹配具有att属性且属性值以x开头的E元素
E[att$="x"]	匹配具有att属性且属性值以x结尾的E元素
E[att*="x"]	匹配具有att属性且属性值含有x的E元素

结构伪类选择器

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

（要有空格）因为E为父元素，有空格相当于继承 

选择符	简介
E :fist-child	匹配父元素中第一个子元素
E :last-child	匹配父元素中最后一个子元素
E :nth-child(n)	匹配父元素中第n个子元素
E :first-of-type	指定类型E的第一个
E :last-of-type	指定类型E的最后一个
E :nth-of-type(n)	指定类型E的第n个

                           

E :nth-child(n)，n可以是数字也可以是公式，这样就可以进行隔行换色应用

 加公式

只能是字母n,意味着选择了所有（n从0开始，n是个数，所以0被忽略）

还有其他公式：

公式	取值
2n	偶数
2n+1	奇数
5n	5、10、15....
n+5	从5（包括5）开始到最后
-n+5	前5个

nth-child(n)与nth-of-type(n)区别

nth-child对父类里面所有孩子排序选择，先找到第n个，再看是否符合（不符合就选不出来了）

nth-of-type对父类指定元素进行选择，先匹配E，再去找第几个。

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，简化HTML元素

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

before和after创建一个元素，但属于行内元素

新创建元素在文档树中找不到，成为伪元素

语法：element::before{}

before和after必须有content属性

和标签选择器一样，权重为1 所以div::before权重为 1+1=2

基本使用

会创建一个行内块元素盒子，放在父类内部，一个是放前面，一个放后面，但都是行内元素

不可直接设大小但可以通过加浮动加定位或display控制变大小；

         

解释伪元素如何清除浮动

 .clearfix::after {

content:"";   //必须写

display: block; //插入元素必须是块级

height:0;//不要看见该元素

clear:both;//清除浮动

visibility:hidden;//隐藏

}

C3盒子模型

以前用padding和border等会撑开盒子

1.box-sizing:content-box 盒子大小为width+padding+border（默认）

2.box-sizing:border-box 盒子大小为width

这样设置的大小不会随边框改变即不会撑大盒子了

可以初始化为

图片模糊处理

语法：filter：  函数（） 

如filter：blur(5px); blur模糊处理 数值越大越模糊

计算盒子宽度

calc函数

calc（）在声明CSS属性时执行计算

width：calc（100%-80px）100%就可以和父亲一起变化了

C3过渡

过渡动画：从一个状态渐渐过渡到另一个状态

现在经常和 :hover一起搭配使用

格式：transition：要过渡的属性 花费的时间 运动曲线 何时开始；

属性：要变化的CSS属性，宽高等，如果所有属性都变化，写all

花费时间：要有单位

运动曲线默认ease；即速度图像（逐渐慢下来）

何时开始：单位秒，可以延迟触发时间，默认0s；

渐渐变长 ：                  

如果写多个属性，用逗号隔开即可；

如果想过渡hover所有属性，直接用all即可