HTML5和CSS3的新特性

添加了用于媒介回放的

添加了语义标签譬如 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 +"<br>"; };
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 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. 使用媒体类型

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

选择器

transform,transition,translate,scale,skelw,rotate等相关动画效果

属性 描述 CSS
transition   简写属性,用于在一个属性中设置四个过渡属性。   3  
transition-property   规定应用过渡的 CSS 属性的名称。   3  
transition-duration   定义过渡效果花费的时间。默认是 0。   3  
transition-timing-function   规定过渡效果的时间曲线。默认是 "ease"。   3  
transition-delay   规定过渡效果何时开始。默认是 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等特效

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpszgp.html