HTML5总结
1.HTML5由W3C和WHAT组织机构共同研发出来的，于2014年正式发布。
2.HTML5成为了新一代网页开发标准。
3.HTML5新特性（面试）
1）增加了audio和video音频播放，抛弃了Flash
2）新增了canvas画布（绘画，制作动画（如小游戏开发等））
3）地理定位
4）增加了离线缓存
5）硬件加速
6）Web Socket（全双工通信）
7）增加了本地存储
8）新增了一些语义化标签
网页布局标签
header:页首
nav:导航栏
aside:侧边栏
main:主体
section:区块
article:文章
footer:页尾
5.语义化标签
1)mark:高亮显示(行级)
2)details(描述)与summary(摘要):一般用于名词解释或用于封装一个区块等
3)meter:定义度量衡
属性:value/min/max
4)progress:进度条
属性:value/min/max
5)dialog:对话框或窗口
6)figure:用于对元素进行组合（一般用来组合一张图的标题、图片和图片描述等）
6.HTML5多媒体
1)audio
播放音乐或音频。IE9以下的版本不支持。
a)支持的格式
.mp3/.ogg/.wav
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
2)video
加载视频。IE9以下的版本不支持。
a)支持的格式
.mp4/.ogg/.webm
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
width:宽度
height:高度
poster:海报
3)embed
嵌入内容或加载插件。
属性:
src:文件路径
width:宽度
height:高度
type:类型
4)canvas
画布。是一个容器元素。
注意：
a.单独使用canvas没有什么意义，它必须结合Javascript使用。它的具体功能体现是通过
Javascript体现现来的。
b.canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。
7.HTML5常用属性
1）contentEditable
将标签转换为可编辑状态。可用于所有标签。它的值有true/false。
2）hidden
对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为hidden。
3）data-*
用于存储页面或应用程序的私有自定义数据。一般用于传值。
4）multiple
规定输入域中可选择多个内容。用于表单组件中，如file/select。
5）required
约束表单元素在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。
6）pattern
用于验证输入字段的模式。用于表单组件中，需要结合提交按钮使用。
8.表单组件
1）color：颜色
2）email：邮箱
3）tel：电话号码
4）url：网址
5）number：数字
6）range：范围
7）search：搜索
8）date：日期
9）datetime：日期时间
10）datetime-local：本地日期时间
11）year：年份
12）month：月份
13）time：时间
9.表单属性
1）formaction:修改action数据提交的地方
2）formenctype:修改表单请求的类型
3）formmethod:修改数据提交的方法
4）form:设置表单元素属于哪个表单
5）novalidate:不验证
10.input属性
1）autocomplete:自动完成
用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有：
on/off，默认为on。
为了保护敏感数据（如用户帐号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭。
2）autofocus:自动获焦
3）step:步长
4）multiple:多选
5）pattern:正则匹配
6）placeholder:输入提示
7）required:必须输入
CSS3总结
1.CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。
2.CSS3的主要新特性：
1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询
3.CSS3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。
1）主流浏览器内核（面试点）
a)Trident: IE内核
b)Webkit：Chrome和Safari内核
c)Gecko：FireFox内核
d)Blink（是Webkit的一个分支）： Chrome和Opera内核
Tips（技巧）:
目前国内的浏览器大多都是双核的（IE内核 Chrome内核）
厂商前缀
IE： -ms-
Chrome&Safari： -webkit-
FireFox： -moz-
Opera： -o-
CSS3选择器
丰富选择的目的：在标签中减少class和id属性的使用。
1）属性选择器
[属性名]：p[class] 查找p标签下的所有class属性
[属性名=属性值]： p[class=content] 查找p标签下的所有class属性名=content的属性值
[属性名 ^ =属性值]：p[class^=content] 查找class属性值以content开头
[属性名 $=属性值]：p[class $=content] 查找class属性值以content结尾
[属性名 * =属性值]：p[class * =p] 查找class属性值中包含有p的
**结构性伪类**
:root 匹配html标签,与body选择器效果一样。
子元素选择：匹配父元素中连续的子元素
:first-child 第1个子元素 p:first-child
:last-child 最后1个子元素 p:last-child
:nth-child(n) 第几个子元素 p:nth-child(2) p:nth-child(2n){ 2n表示2的倍数，2、4、6、8……
p:nth-child(3n 1){ 3n表示3的倍数加1，4、7、11……
:nth-last-child(n) 倒数第n个子元素 p:nth-last-child(4)
nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况
:nth-of-type(n) p:nth-of-type(3){ 找的是p标签中的第三个兄弟p标签，如果第3个不是p标签，将跳过，继续向下查找，直到找到为止。
p:nth-child(3){ 找第3个子元素，如果是p标签，就找到了，如果不是，就没找到，且不再继续查找
:nth-last-of-type(n) p:nth-last-of-type(4){ 找的是p标签中倒数第4个兄弟p标签，如果第4个不是p标签，将跳过，继续向前查找，直到找到为止。
:only-child 父元素中仅有一个子元素 p:only-child{查找父元素中只有的一个标签为p标签，不允许其它标签存在，但在p标签中可以有子标签。
:only-of-type 父元素中仅有一个兄弟元素 p:only-of-type{ 选择父元素中p标签是唯一
