• ：头部标签
• ：内容标签
• ：定义文档某个区域

头部标签
某个区域

• 这种语义化标准主要是针对搜索引擎的。
• 这些新标签在页面中可以多次使用。
• 在IE9中，需要把这些元素转换为块级元素。
• 移动端开发常用这些标签。

1.2 新增多媒体标签

新增的多媒体标签主要包含以下两个：

1. 音频：
2. 视频：

使用以上标签可以很方便地在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件。

1.2.1 视频标签

当前

考虑兼容性时的写法：

1.2.2 音频标签

HTML5在不使用插件的情况下，也可以原生支持音频格式文件的播放。
当前

考虑兼容性时的写法：

1.3 新增input表单

邮箱: 
网址: 
日期: 
时间: 
数量: 
手机号码: 
搜索: 
颜色: 

1.4 新增表单属性

修改提示文本的颜色：

input::placeholder {color: blue;
}

2 CSS3的新特性

2.1 CSS3的现状

• 新增的CSS3特性有兼容性问题，IE9+才支持
• 移动端支持优于PC端
• CSS3正在不断改进中，应用相对广泛

2.2 新增属性选择器

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

小图标1
小图标2
小图标3
小图标4
测试
测试文本1
测试文本2
测试文本3

类选择器、属性选择器、伪类选择器，权重都为10。

2.3 新增结构伪类选择器

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

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

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个元素。注意，n是从1开始的，而不是从0开始的。
• n可以是关键字：even偶数，odd奇数
• n可以是公式，常见的公示如下。注意，当n为公式，则从0开始计算，但是第0个元素和超出元素个数的元素都会被忽略。

第1个
第2个
第3个
第4个
第5个
第6个
第7个
第8个
第1个
第2个
第3个
第4个
第5个
第6个
第7个
第8个

E:nth-child(n)与E:nth-of-type(n)的区别：

1. E:nth-child(n)对父元素里面所有子元素排序选择（序号是固定的）：先找到第n个子元素，再看是否和E匹配
2. E:nth-of-type对父元素里面指定子元素排序选择：先匹配E，再根据E找第n个子元素
3. 无序列表，用E:nth-child更多
4. 类选择器、属性选择器、伪类选择器的权重都为10

我是第1个孩子
我是第2个孩子
我是第3个孩子
我是第4个孩子
我是第5个孩子
我是第6个孩子
我是第7个孩子
我是第8个孩子
p标签
div标签1
div标签2

2.4 新增伪元素选择器（*）

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

• before和after都创建了一个新元素，但是属于行内元素，不能直接设置大小。新创建的这个元素在文档树中不存在，所以称之为伪元素。
• before和after必须有content属性。before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。
• 伪元素选择器和标签选择的权重都为1（div::before{}的权重是2）。

使用场景：

1. 伪元素字体图标

   @font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
   }
   div {position: relative;width: 200px;height: 35px;border: 1px solid red;
   }
   div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';/* content: ''; */content: '\e91e';color: red;font-size: 18px;
   }
   

2. 伪元素显示隐藏视频封面遮罩

3. 伪元素清除浮动
   清除浮动的方法：

   • 额外标签法（隔墙法），是W3C推荐的做法（【前端学习】D3：CSS进阶）
   • 父级添加overflow属性
   • 父级添加after伪元素
   • 父级添加双伪元素

   后两种伪元素清除浮动算是额外标签法的升级和优化。

   .clearfix:after {content: "";	/* 伪元素必须写的属性 */display: block;	/* 插入的元素必须是块级 */height: 0;	/* 不要看见这个元素 */clear: both;	/* 清除浮动的核心代码 */visibility: hidden;	/* 不要看见这个元素 */
   }
   

2.5 盒子模型

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）

2.6 其它特性（了解）

2.6.1 滤镜filter：图片变模糊

filter属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如：

img {/* blur模糊处理，数值越大，图片越模糊 */filter: blur(15px);
}
img:hover {/* 鼠标悬停时获得清晰图片 */filter: blur(0);
}

2.6.2 calc函数：计算盒子宽度

calc()实现在声明CSS属性值时执行一些计算。括号里面可以使用+，-，*，/来进行计算。

width: calc(100% - 80px);

2.6.2 新增属性过渡（*）

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是一个从状态渐渐地过渡到领一个状态，可以让页面更好看。虽然低版本浏览器（IE9以下版本）不支持，但不影响页面布局。现在常和:hover一起搭配使用。

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性：想要变化的CSS属性，例如宽度、高度、背景颜色、内外边距等。如果想要所有属性都变化过度，写all。
2. 花费时间：单位是秒（必须写单位），如0.5s。
3. 运动曲线：默认是ease（可以省略）。
   
4. 何时开始：单位是秒（必须写单位），可以设置延迟出发时间。默认是0s（可以省略）。

div {width: 200px;height: 100px;background-color: pink;/* transition: 变化的属性 花费时间 运动曲线 何时开始; *//* 如果要写多个属性，利用逗号进行分割 *//* transition: width .5s ease 0s, height .5s ease 1s; */transition: all 0.5s;
}
div:hover {width: 400px;height: 200px;background-color: skyblue;
}

案例：进度条

鼠标悬停时：

练习：动态切换的小米官网的logo
HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现
小白初上手HTML+CSS 仿写小米官网logo动画

3 广义的H5（了解）

狭义的HTML5与CSS3：HTML5结构标签本身与CSS3的相关样式。
广义的HTML5：HTML5本身+CSS3+JavaScript。这个集合有时称为HTML5和朋友，通常缩写为HTML5。虽然HTML5的一些特性仍然不被某些浏览器支持，但它是一种发展趋势。
HTML5 MDN介绍