HTML5和CSS3总结
HTML5
HTML5是最新的HTML标准，它的主要目标是提供所有内容而不需要任何像flash，silverlight等的额外插件，这些内容来自动画、视频、富GUI等。HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的。几乎所有的浏览器Safari、Chrome、Firefox、Opera、IE都支持HTML5。
HTML5没有使用SGML或者XHTML，它是一个全新的东西，因此不需要参考DTD。仅需放置<! DOCTYPE html>的文档类型代码告诉浏览器识别这是HTML5文档。如果不放入<! DOCTYPE html> ，浏览器将不能识别它是HTML5文档，同时HTML5的标签将不能正常工作。
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
如果不写，浏览器将无法识别HTML文件，并且HTML 5标签将无法正常工作。
文档声明
<!DOCTYPE html>
元素
新增文档结构标签（块级元素）
<section>、<article>、<nav>、<aside>、<header>、<footer>、<figure>
新增内联（行内）元素
<mark>、<time>、<meter>、<progress>
新增input类型
email、url、number、tel、range、search、color、date、month等。
创建画布语法
<canvas id="myCanvas" width="200" height="100"></canvas>
<datalist> 标签
如果我们想要用户自由输入的同时又有一些建议选项，可以使用<datalist>。
<datalist> 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
CSS3
1. 圆角边框
border-radius：1-4 length 1%/1-4 length 1%
/*水平半径/垂直半径*/
四个值的顺序：自左上角开始，顺时针方向。
2. 边框阴影
box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;
3. 2D转换
（1）translate()方法：平移
（2）rotate()方法：旋转
（3）scale()方法：缩放
4. 3D转换
（1）translateZ()方法：延Z轴移动
（2）rotateX()、rotateY()、rotateZ()方法：分别绕X、Y、Z轴旋转
（3）perspective()方法：定义3D转换的透视视图
5. CSS3的选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
6. @keyframes规则
用于创建动画。
CSS3实现动画主要有3种方式：
第一种是：transition 实现渐变动画
第二种是：transform 转变动画
第三种是：animation 实现自定义动画
7. @Font-face 特性
可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
8. 多列布局 （multi-column layout）
CSS3 的多列布局有很多属性，例如：
column-count
div元素的文本分成三列。
column-gap
在div元素的文本分成三列，并指定一个30像素的列之间的差距。
column-rule
指定列之间的规则：宽度，样式和颜色。
在规定的多列布局容器内的元素，要使用display：inline-block属性，否则会出现脱节和错乱。