Web前端基础班最后一课 H5C3提高

前端基础班最后一节课学习了H5C3的一些提高的使用小技巧，为以后的就业班做铺垫！
框架：

重点内容：
一、HTML5（基本是 IE9+ 以上版本的浏览器才支持）
1、新增语义标签

2、新增视频标签
1）video 视频标签
（1）MP4、WebM、Ogg（推荐使用 mp4 格式的视频）
（2）video 是双标签，可以针对不同浏览器提供不同格式的视频
（3）些控制播放的属性：

（4）video 标签的宽高属性可以通过 CSS 控制
2）audio 音频标签
（1）MP3、Wav、Ogg（推荐使用 mp3 格式的音频）
（2）audio 是双标签，可以针对不同浏览器提供不同格式的音频
（3）控制播放的属性：

（4）音频标签添加 muted 属性不可以静音播放
3、HTML5 新增 input 表单

重点记忆： number 、 tel 、 search 三个 input 类型
4、HTML5 新增表单属性

placeholder 、 multiple 、 required最常用
二、CSS选择器
1、CSS3 新增属性选择器（IE9+ 以上版本的浏览器才支持）
属性选择器（权重为10）
1）作用：可以根据元素属性来选择元素。
2）属性选择器语法：

2、CSS3 新增结构伪类选择器（选择第 n 个元素）
1）结构伪类选择器的作用：根据文档结构来选择器元素，常用于选择父级选择器里面的子元素

n 可以是数字、关键字或公式
2）nth-child 的 n 是数字是从 1 开始
3、 CSS3 新增 nth-child 选择器
1）even 偶数 / odd 奇数
2）nth-child 可以使用 n ，但是不能使用其他字母
3）直接使用 n 会选择所有孩子
4）n 表示从 0 开始，每次加 1，依次向后面计算，超出范围的元素会被忽略。
5）常用公式：

6）nth-child 和 nth-of-type 的区别 ：
（1）E:nth-child(n) 会先把所有的盒子都排列序号，首先根据 :nth-child(n) 找到孩子，再去看前面的 E 是否匹配。
（2）E:nth-of-type(n) 会把指定元素 E 的盒子排列序号，首先看 E 指定的元素，之后再去看 :nth-of-type 的第几个孩子。
7）CSS3 新增伪元素选择器使用场景和由来
（1）作用：伪元素选择器可以利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML结构
（2）伪元素不是真正意义的元素，是通过 CSS 创建的。
（3）::before 和 ::after 属于行内元素
8）CSS3 新增伪元素选择器基本使用
（1）::before 在父元素内容的前面插入元素；
（2）::after 在父元素内容的后面插入元素。
（3）::before 和 ::after 必须要指定content 属性
（4）伪元素选择器的权重是 1
三、 CSS3 盒子模型
CSS3 盒子模型 border-box
（1）用box-sizing来指定
（2）border-box ：盒子大小为 width ，设置 padding 、 border 不会影响盒子的大小。
四、CSS3 其他特性
1、CSS3 图片模糊处理
1）filter 属性；blur 函数。
2）filter: blur(5px);数值越大越模糊，数值为 0 最清晰（不做模糊处理）
3）filter:grayscale（100%）页面边灰色的滤镜
2、计算盒子宽度 calc 函数
（1）calc 函数可以计算盒子的宽度
（2）width: calc(100% - 80px); 可以让子盒子永远比父盒子的宽度小 80px (注意: 运算符前后必须存在空格)；
3、CSS3 新增属性过渡
（1）transition属性实现过渡动画效果
（2）是从一个状态渐渐的过渡到另外一个状态，从一个属性值，过渡到另外一个属性值
（3）经常和 :hover 一起搭配使用，让页面更好看，且动感十足。
（4）transition: 要过渡的属性 动画时间 运动曲线 何时开始
（5）要过渡的属性：想要变化的 css 属性，可以是：宽度、高度、背景颜色、内外边距等
（6）all 可以让所有能动画的属性一起过渡变化
（7）动画时间：单位是秒（必须写单位）；运动曲线：默认是 ease （可以省略）；何时开始：单位是秒（必须写单位）
（8）transition: all 0.5s 所有属性在 0.5s 内完成过渡动画
（9）口诀：谁做过渡给谁加。
4、广义的 H5
（1）广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript。
（2）这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5。
重点单词：
header 头部标签
nav 导航标签
article 内容标签
section 定义文档的某个区域，没有更具体的语义
aside 侧边栏标签
footer 尾部标签，表示页脚
video 视频标签
audio 音频标签
autoplay马上播放
controls显示控件
loop循坏播放
muted静音
search 搜索框
required表单拥有该属性表示内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在内容将不显示
autofocus autofocus 自动聚焦属性
multiple 可以多选文件提交
nth-child结构伪类选择器-选择第 n 个元素
box-sizing指定盒子模型，不影响盒子大小
filter: blur图片模糊处理
filter:grayscale（100%）页面边灰色的滤镜
transition过渡
transition: all 0.5s 所有属性在 0.5s 内完成过渡动画。
有关CSS高级技巧，包括精灵图、字体图标及常见布局技巧请点击a=href"https://www.cnblogs.com/kk199578/p/13951247.html"