能够说出3~5个HTML5新增布局和表单标签
能够说出CSS3的新增特性有哪些

1. HTML5的新特性

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

声明：

新特性增加了很多，但是我们专注于开发常用的新特性。
我们讲解部分新特性，到了之后还会继续降解其他新特性。

1.1 HTML5新增的语义化标签

以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。

:头部标签
:导航标签
:内容标签
:定义文档某个区域
:侧边栏标签
:尾部标签

注意：

这些语义化标准主要是针对搜索引擎的。
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签
HTML5还增加了很多其他标签，我们后面再慢慢学

1.2 HTML5新增的多媒体标签

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

音频：
视频：
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器的插件。

HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

视频

语法

常见属性

autoplay :(autoplay)视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls:(controls)向用户显示播放控件。
width:(pixels像素）设置播放器宽度
height:（px）设置播放器高度
loop:(loop)播放完是否继续播放该视频，循环播放。
preload:(auto/none)是否预加载视频，如果有了auto，就会忽略该属性
src:(url)视频url地址
poster:(imgurl)加载等待的画面图片
muted:(muted)静音播放

如果遇上不支持MP4格式的浏览器，可以用以下方法（仅做了解）：

一般情况下mp4足够使用。

3. 音频

当前

语法：

照顾兼容性也有以下写法：

autoplay:(autoplay)如果出现该属性，则音频在就绪后马上播放。
controls:(controls）如果出现该属性，则向用户显示控件，比如播放按钮。
loop:(loop)如果出现该属性，则循环播放音频。
src:(url)要播放的音频的
注意：谷歌浏览器把音频和视频自动播放禁止了

3. 多媒体标签总结

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

1.3 HTML5新增的input类型

type="emall" :限制用户输入必须为Emall类型
type="url" : 限制用户输入必须为url类型
type="date" : 限制用户输入必须为日期类型
type="time" : 限制用户必须为时间类型
type="mooth" :限制用户输入必须为月份类型
type="week" : 限制用户输入必须为周类型
type="number" ：限制用户输入必须为数字类型
type="tel" ：手机号码
type="search" : 搜索框
type="color" : 生成一个颜色选择表单
在移动端设备上非常常用。
重点记住：numer 、 tel 、search这三个。

1.4 HTML5新增的表单属性

required (required) 表单拥有该属性表示其内容不能为空，必填。
- placeholder (提示文本）表单的提示信息，存在默认值将不显示。
autofocus(autofocus) 自动聚焦属性，页面加载完成自动聚焦到指定表单。
autocomplete(off/on)：当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认打开。（需要放在表单内，同时加上name属性，同时成功提交过）
- multple（multiple）可以多选文件提交。
可以通过设置方式修改placeholder里面的字体颜色：
input::placeholder{
color:pink;
}

2. CSS3的现状

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于pc端
应用相对广泛
不断改进中
现阶段主要学习：新增选择器和盒子模型以及2d、3d特性

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器
结构伪类选择器
伪元素选择器

2.2 属性选择器

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

E[att]: 选择具有att属性的E元素
- E[att="val"]：选择具有att属性且属性值等于val的E元素
E[att^="val"]:匹配具有att属性且值以val开头的E元素
E[att$="val"]:匹配具有att属性且值以val结尾的E元素
E[att*="val"]：匹配具有att属性且值中含有val的E元素

注意：类选择器、属性选择器、伪类选择器，权重为10。

2.3 结构伪类选择器

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

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

例

 /*1.选择ul中的第一个孩子 小li*/
        /*ul li:first-child{*/
        /*    background-color: pink;*/
        /*}*/
        /*ul li:last-child{*/
        /*    background-color: pink;*/
        /*}*/
        /*ul li:nth-child(5){*/
        /*    background-color: skyblue;*/
        /*}*/
        /*1.把所有的偶数even的孩子选出来*/
        ul li:nth-child(even){
            background-color: #cccccc;
        }

        /*2.把所有的奇数odd的孩子选出来*/
        ul li:nth-child(odd){
            background-color: gray;
        }
        /*3.ntn-child(n)从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母*/
        ol li:nth-child(n){
            background-color: pink;
        }
        .tast dd:first-child{
            display: inline-block;
            background-color: pink;
        }

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

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

nth-child(n)和nth-of-type(n)的区别：

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

小结

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

2.4伪元素选择器（重点）

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

::before :在元素内部的前面插入内容
::after：在元素内部的后面插入内容

注意：

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

伪元素清除浮动

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

2.5 CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

box-sizing:content-box 盒子大小为width + padding + border(以前默认的）
box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

2.6CSS3其他特性（了解）

图片变模糊
计算盒子宽度width:calc函数

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如：filter:blur(5px); blur模糊处理数值越大越模糊

CSS3 calc函数：

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% - 80px);

括号里面可以使用+ - * / 来计算，且计算符号左右空格不能省略。

CSS3还增加了一些动画 2D 3D等新特性，之后会有学习。

2.6 CSS3过渡（重点）

过渡（transition) 是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下不支持）但是不会影响页面布局。
现在经常和:hover一起搭配使用。
语法：
transition:要过渡的属性花费时间运动曲线何时开始；

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

2.7 推荐模块制作

大盒子recom 推荐模块 recommend
里面包含2个盒子，浮动即可
1号盒子recom-hd
2号盒子recom-bd，注意里面的小竖线

HTML5和CSS3提高导读