H5C3提高（1）

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

H5新增标签

语义化标签

 

头部标签

 

导航标签

 

内容标签

 

定义文档某个区域

 

侧边栏标签

 

尾部标签

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

视频标签

尽量用MP4格式

 格式：

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

音频标签

  尽量使用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即可