HTML 5 新亮点

使用Chrome可以更好地体验HTML5：）

本地储存 – Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

本地数据库 – Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

文件缓存 – Application Cache API

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

CACHE MANIFEST

# version 1
CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

让程序在后台运行 – Web Workers

main.js:
var worker = new Worker(‘extra_work.js');
worker.onmessage = function (event) { alert(event.data); };
extra_work.js:
// do some work; when done post message.
postMessage(some_data);

双向信息传输 – Web Sockets

var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

桌面提醒 – Notifications

if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}

拖放操作 – Drag and drop

document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);

HTML 新的语义标签

<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<footer>
Copyright © 2009.
</footer>
</body>

新的链接关系

<link rel="alternate">
<link rel="icon">
<link rel="nofollow">
<link rel="prefetch">
<a rel="archives">
<a rel="external">
<a rel="license">
<a rel="noreferrer">
<a rel="pingback">
<a rel="sidebar">
<a rel="tag">

新的表单元素类型

<input type="range" min="0" max="50" value="0">
<input autofocus type="search">
<input type="text" placeholder="Search inside">
<menu>
<progress>
<input type="color">
<input type="number">
<input type="email">
<input type="tel">
<input type="time">
<input type="date">
<input type="month">
<input type="week">
<input type="datetime">

音频 + 视频 – Audio + Video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;
<video src="movie.mp4" autoplay controls ></video>
document.getElementById("video").play();

图形绘制 – Canvas

<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = "round";
canvasContext.strokeStyle = "rgba(255, 127, 0, 0.5)";
canvasContext.stroke();
</script>

CSS 显示本地没有的字体

@font-face {
font-family: "Junction";
src: url(Junction02.otf);
}
@font-face {
font-family: "LeagueGothic";
src: url(LeagueGothic.otf);
}
@font-face {
font-family: "GG250";
src: url(General250.otf);
}
header {
font-family: "LeagueGothic";
}
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}
h2:first-child { ... }
div.text > div { ... }
h2 + header { ... }
input[type="text"] {
background: #eee;
}

分栏显示

-webkit-column-count: 6;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

文本描边

-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0;

透明效果

color: rgba(255, 0, 0, 0.41);
background: rgba(0, 0, 255, 0.19);

HSL(色相/饱和度/亮度)色彩模式

color: hsla(184, 75%, 33%, 0.15);

圆角效果

border-radius: 7px;
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 590, from(red), to(#000));
text-shadow: rgba(0, 0, 0, 0.5) 0 -0px -0px;
background:
-webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0.5)), to(rgba(255, 255, 255, 0.5)));
border-radius: 50px;

制作一个LOGO，只需拖动滑动条

-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.78)));

变换 – Transitions

#box {
-webkit-transition: margin-left 1s ease-in-out;
}
@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}

动画效果

div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}

本文转载自：CKSKY.CN

相关