HTML5和CSS3新增

一.HTML5新特性

1.新增语义化标签
头部标签：<header>
导航标签：<nav>
内容标签：<article>
定义文档某个区域：<section>
侧边栏标签：<aside>
尾部标签：<footer>
注意：
①这种语义化标准主要是针对搜索引擎的
②这些新标签页面中可以使用多次
③在IE9中，需要把这些元素转换为块级元素

2.HTML新增多媒体标签
①音频：<audio>（MP3均支持）
语法格式：<audio src="文件地址" controls=“controls”></audio>
常见属性：
自动播放：autoplay：autoplay
向用户显示播放控件：controls：controls
循环播放：loop：loop
音频地址：src：url
②视频：<video>（尽量使用MP4文件）
语法格式：<video src="文件地址" controls=“controls”></video>
常见属性：
视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）：autoplay：autoplay
向用户显示播放控件：controls：controls
循环播放：loop：loop
加载等待的画面图片：poster：imgurl
放映高度，宽度：width，height

3.HTML5新增input类型
搜索框：search
邮箱：email
网址：url
日期：date
月：month
时间：time
数字：number
周：week
手机号码：tel
颜色选择表单：color

4.HTML新增表单属性
不能为空：required：required
提示文本：placeholder：提示文本
自动聚焦：autofocus：autofocus
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在子酸中已经填写的选项：autocomplete：off | on（默认）
多选文件提交：multiple：multiple

二.CSS3的新特性

新增的CSS3的特性有兼容性问题，IE9才支持

1.新增选择器
（1）属性选择器
根据元素特定属性选择元素
语法格式：
E[att]选择具有arr属性的E元素
E[att="val"]选择具有arr属性且属性值等于val的E元素
E[att^="val"]选择具有arr属性且值以val开头的E元素
E[att$="val"]选择具有arr属性且值以val结尾的E元素
E[att*="val"]选择具有arr属性且值中含有val的E元素
类选择器、属性选择器、伪类选择器权重都是10
（2）结构伪类选择器
根据文档结构选择器元素
E：first-child:匹配父元素中的第一个子元素E
E：last-child:匹配父元素中的最后一个E元素
E：nth-child（n）:匹配父元素中的n个子元素E
注意：
①n可以是数字、关键字和公式，
②n如果是数字，就是选择第n个子元素，里面的数字从1开始，
③n可以是关键字，奇数：odd，偶数：even
④n可以是公式：（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
常见公式：2n（所有偶数），2n+1（所有奇数），n+5（从第五个开始），-n+5（前5个，包含第五个）……
E：first-of-type:指定类型E的第一个
E：last-of-type:指定类型E的最后一个
E：nth-of-type（n）:指定类型E中的第n个
nth-child对父元素里面所有孩子排列选择（序号是固定的），先找到第n个孩子，然后看是否和E匹配
nth-of-type对父元素里面的指定元素进行排列选择。先去匹配E，再根据E找到第n个孩子

（3）伪元素选择器
利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
①::before在元素的前面插入内容
②::after在元素内部的后面插入内容
注意：
before和after创建一个元素，但是属于行内元素
before和after必须有content属性
语法格式：element::before{ }
新建的伪元素在文档树中找不到，所以称之为伪元素
before在父元素内容的前面创建元素，afte在父元素内容的后面插入元素
伪类选择器和标签选择器一样，权重都为1

2.CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型：即可以指定content-box、border-box
box-sizing：border-box盒子大小为width（不会撑大盒子）

3.CSS3其他特性
（1）图片变模糊
语法格式：filter：函数（);
（2）计算盒子宽度width：calc函数
语法格式：width：calc（100%-80px）；

4.CSS3过渡
现在经常和:hover搭配使用
语法规范：transition：要过渡的属性 花费时间 运动曲线 何时开始
要过渡的属性：所有就是all
花费时间：单位是s
运动曲线：默认ease
何时开始：默认为0s
使用口诀：谁做过渡给谁加，如果想要使用多个属性，可以使用逗号分开，或者使用all

三.广义的HTML5

1.广义的HTML5是HTML5本身+CSS3+JavaScript
2.这个集合有时称为HTML5和朋友，通常缩写为HTML5