HTML5 CSS3提高导读

1、HTML5新特性

1. HTML5新增语义化标签

<header>: 头部标签
<nav>:导航标签
<article>: 内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>: 尾部标签

2. HTML5新增的多媒体标签
- 1、音频：

支持三种音频格式,j尽量使用MP3格式

语法：
考虑兼容性问题：

常见属性：

- 2、视频：
支持三种格式：MP4、WebM、Ogg,尽量使用mp4格式

语法：

考虑兼容性问题：

属性：

• 3 多媒体标签总结

1、音频标签和视频标签使用方式基本一致
2、浏览器支持情况不同
3、谷歌浏览器把音频和视频自动播放禁止了
4、我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）
5、视频标签是重点，我们经常设置自动播放，不适用controls控件，循环和设置大小属性

3. HTML5新增input表单

• 1、 HTML5新增的input类型
  
• 2、HTML5新增的表单属性

修改表单属性的placeholder里面的字体颜色

2、CSS3新特性

-1. CSS3的现状

**注意：**类选择器和属性选择器 伪类选择器 权重都是10

• 2、属性选择器
  

1、利用属性选择器就可以不用借助于类或者id选择器

E[att] 选择具有att属性的E元素

2、属性选择器还可以选择属性=值的某些元素

E[att=“val”] 选择具有att属性且属性值等于val的E元素

3、属性选择器可以选择属性值开头的某些元素

将这四个小图标同时变为红色可以在类里选取一个共有的名称
E[att^=“val”] 匹配具有att属性且值以val开头的E元素

4、属性选择器可以选择属性值结尾的某些元素

• 3、结构伪类选择器

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

其中nth-child(n)选择某个父元素的一个或多个特定的子元素

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面数字从1开始…
• n可以是关键字：even偶数，odd奇数
• n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
  

选择第一个孩子

选择第n个孩子

把所有的偶数孩子（相当于nth-child(2n)），选出来，奇数是odd

选择所有的孩子

• nth-child和nth-of-type的区别

1、 nth-child对父元素里面所有的孩子排序选择(序号是固定的) 先找到第n个孩子，然后看看是否和E匹配
2、nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

• 小结

1、结构伪类选择器一般用于选择父级里面的第几个孩子
2、nth-child 对父元素里面所以孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
3、nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
4、关于nth-child(n)我们要知道n是从0开始计算的，要记住常用的公式
5、如果是无序列表，肯定nth-child更多
6、类选择器、属性选择器、伪类选择器，权重为10.

• 4、伪元素选择器

通过CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

注意：
1、before和after创建一个元素，但是属于行内元素
2、新创建的这个元素在文档树中是找不到的，所以称为伪元素
3、语法：element::before{}
4、before和after必须有content属性
5、before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
6、伪元素选择器和标签选择器一样权重为1.

• 伪元素选择器使用场景
  1、
  

div ::after 伪元素的父亲是div 使用子绝父相给这个伪元素定位

2、



3、伪元素清除浮动

1、额外标签法也称为隔墙法，是W3C推荐的做法

1）after伪元素清除浮动

2）后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化

2、父级添加overflow属性

• 5 CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-box、border-box,这样计算盒子大小的方式发生了改变
可分为两种情况：
1、box-sizing: content-box盒子大小为width+padding+border(默认的)
2、box-sizing: border-box 盒子大小为width,这种情况下padding和border就不会撑大盒子了，前提padding和border不会超过width宽度

注意：以后CSS属性：

• 6 CSS3其他特性

1、filter: 函数(); 例如：after：blur(5px); blur模糊处理 数值越大越模糊

2、calc()函数，用于计算盒子宽度
width: calc(100%-80px);

• 7 过渡-谁做过渡给谁加

是从一个状态渐渐的过渡到另外一个状态
现在经常和 :hover一起搭配使用
语法： transition: 要过渡的属性 花费时间 运动曲线 何时开始;

如果要写多个属性可以用逗号的方法，如果想要所有的属性都变化过渡写一个all就可以