html5的新特性

• 添加了用于媒介回放的 <video>，<audio> 元素
• 添加了语义标签譬如 header、footer、nav 等等元素
• 添加了用于绘画的 canvas 元素和svg绘图
• 扩充了input的输入类型，如下

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

• 添加了地理位置定位功能Geolocation（地理定位）

window.navigator.geolocation {    getCurrentPosition:  fn  用于获取当前的位置数据    watchPosition: fn  监视用户位置的改变    clearWatch: fn  清除定位监视}　

下面是获取用户定位信息示例

navigator.geolocation.getCurrentPosition(    function(pos){　　　　console.log('用户定位数据获取成功')      　　　　//console.log(arguments);      　　　　console.log('定位时间：',pos.timestamp)      　　　　console.log('经度：',pos.coords.longitude)      　　　　console.log('纬度：',pos.coords.latitude)      　　　　console.log('海拔：',pos.coords.altitude)      　　　　console.log('速度：',pos.coords.speed)},    //定位成功的回调function(err){  　　　　console.log('用户定位数据获取失败')      　　　　//console.log(arguments);}        //定位失败的回调)

• 添加了web存储功能，localStorage和sessionStorage

• 使用 HTML5，通过创建cache manifest文件，可以轻松地创建 web 应用的离线版本

  manifest 文件可分为三个部分：

  CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

  NETWORK - 在此标题下列出的文件需要与的连接，且不会被缓存

  FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面

• web worker

  web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行（相当于实现多线程并发）。

• 服务端事件推送，所有主流浏览器均支持服务器发送事件，除了 Internet Explorer

  EventSource 对象用于接收服务器发送事件通知：

var source=newEventSource("demo_sse.php");source.onmessage=function(event){document.getElementById("result").innerHTML+=event.data +"
";};

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

header('Content-Type: text/event-stream');header('Cache-Control: no-cache');$time = date('r');echo "data: The server time is: {$time}nn";flush();?>

CSS3的新特性

• 媒体查询

  从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

清单 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(not min-width:800px){...}

• 选择器
• transform，transition，translate,scale,skelw，rotate等相关动画效果

属性	描述	CSS
	简写属性，用于在一个属性中设置四个过渡属性。	3
	规定应用过渡的 CSS 属性的名称。	3
	定义过渡效果花费的时间。默认是 0。	3
	规定过渡效果的时间曲线。默认是 "ease"。	3
	规定过渡效果何时开始。默认是 0。	3

div{transition-property: width;transition-duration:1s;transition-timing-function: linear;transition-delay:2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;}

• box-shadow,text-shadow等特效
• 添加了border-radius，border-image等属性

属性	说明	CSS
	设置所有边框图像的速记属性。	3
	一个用于设置所有四个边框- *-半径属性的速记属性	3
	附加一个或多个下拉框的阴影	3

• CSS3 @font-face 规则,可以引入任意的字体了
• CSS3 @keyframes 规则，可以自己创建一些动画等

• 2D、3D转换

• CSS3 创建多列（column-count规定文本可以以几列的方式布局）

• CSS3 用户界面（resize，box-sizing，outline-offset）