HTML5和CSS3的新特性
html5的新特性
- 添加了用于媒介回放的
<video>
,<audio>
元素 - 添加了语义标签譬如
header
、footer
、nav
等等元素 - 添加了用于绘画的 canvas 元素和svg绘图
- 扩充了input的输入类型,如下
输入类型 | 描述 |
---|---|
color | 主要用于选取颜色 |
date | 从一个日期选择器选择一个日期 |
datetime | 选择一个日期(UTC 时间) |
datetime-local | 选择一个日期和时间 (无时区) |
包含 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等特效
- 添加了border-radius,border-image等属性
属性 | 说明 | CSS |
---|---|---|
border-image | 设置所有边框图像的速记属性。 | 3 |
border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
box-shadow | 附加一个或多个下拉框的阴影 | 3 |
-
CSS3 @font-face 规则,可以引入任意的字体了
-
CSS3 @keyframes 规则,可以自己创建一些动画等
-
2D、3D转换
-
CSS3 创建多列(column-count规定文本可以以几列的方式布局)
-
CSS3 用户界面(resize,box-sizing,outline-offset)