H5、css3新特性
1、HTML5增加了新标签
<article>独立的内容区域
<aside>侧边栏内容
<footer>页脚
<header>头部
<nav>导航部分
2、HTML5 Canvas
canvas用于绘画的制作 是一个标签 绘画工作需要通过javascript完成
3、HTML5地理定位
API用于获得用户的地理位置
4、HTML5 Audio(音频)、Video(视频)
5、HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime选择一个日期（UTC 时间）
datetime-local选择一个日期和时间 (无时区)
email包含 e-mail 地址的输入域
month选择一个月份
number数值的输入域
range一定范围内数字值的输入域
search用于搜索域
tel定义输入电话号码字段
time选择一个时间
url URL 地址的输入域
week选择周和年
6、HTML5 表单元素
datalist 元素 datalist 元素规定输入域的选项列表 列表是通过 datalist 内的 option 元素创建的
keygen 元素的作用是提供一种验证用户的可靠方法，是密钥对生成器（key-pair generator），当提交表单时，会生成两个键，一个是私钥，一个公钥，私钥（private key）存储于客户端，公钥（public key）则被发送到服务器
output 元素用于不同类型的输出，比如计算或脚本输出
7、HTML5 新增的表单属性
placehoder 属性，占位符
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。
8、CSS3选择器
:first-child .listli:first-child{background-color:yellow;} 第一个元素
:last-child :last-child选择器用来匹配父元素中最后一个子元素
:nth-child() nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式。
Odd 和 even Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
:nth-last-child(n) :nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式
:nth-of-type(n) :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
:only-child :only-child选择器匹配属于父元素中唯一子元素的元素。
:not :not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
.name1 选择 class 属性中有 name1 的所有元素
* 所有元素
#idd 选择id为idd的元素
9、 边框（borders）
border-image设置所有边框图像的速记属性。
border-radius一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow附加一个或多个下拉框的阴影
10、CSS3 背景
background-clip规定背景的绘制区域。
background-origin规定背景图片的定位区域。
background-size规定背景图片的尺寸。
11、 CSS3 转换和变形
2D新转换属性
transform适用于2D或3D转换的元素
transform-origin允许您更改转化元素位置
2D 转换方法
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度
3D转换属性
transform 向元素应用 2D 或 3D 转换。
transform-origin允许你改变被转换元素的位置。
transform-style规定被嵌套元素如何在 3D 空间中显示。
perspective规定 3D 元素的透视效果。
perspective-origin规定 3D 元素的底部位置。
backface-visibility定义元素在不面对屏幕时是否可见。
3D 转换方法
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
12、CSS3 过渡
过渡属性
transition简写属性，用于在一个属性中设置四个过渡属性。
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
transition-delay规定过渡效果何时开始。默认是 0。
13、CSS3 动画
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes 规则和所有动画属性：
CSS3 盒模型
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
弹性盒
CSS3 文本效果
CSS3 字体图标
CSS3 多媒体查询
清单 1. 使用媒体类型
<linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>
清单 2. 媒体查询规则
@media all and(min-width:800px){...}
@media all是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
(min-width:800px)是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS
清单 3.and条件
@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}
清单 4. or 关键词
@media(min-width:800px)or(orientation:portrait){...}
清单 5. 使用 not
@media(notmin-width:800px){...}
