HTML5必须知道的那些事
[转自] http://www.cnblogs.com/hamy/archive/2012/02/21/2362110.html
再普及一次HTML5基础，HTML5必须知道的那些事，HTML5扫盲。下一代Web开发的新特征
新的选择器
通过 class 定位元素 (DOM API)
var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div'); els[0].focus(); var els = document.getElementsByClassName('section'); els[0].focus();
通过类似 css 选择器的语法定位元素 (Selectors API)
var els = document.querySelectorAll("ul li:nth-child(odd)"); var els = document.querySelectorAll("table.test > tr > td");
本地储存 - 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);
地理位置 - Geolocation
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; map.setCenter(new GLatLng(lat, lng), 13); map.addOverlay(new GMarker(new GLatLng(lat, lng))); }); }
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' type="application/rss+xml" href="http://myblog.com/feed" /> <link rel='icon' href="/favicon.ico" /> <link rel='pingback' href="http://myblog.com/xmlrpc.php"> <link rel='prefetch' href="http://myblog.com/main.php"> ... <a rel='archives' href="http://myblog.com/archives">old posts</a> <a rel='external' href="http://notmysite.com">tutorial</a> <a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a rel='nofollow' href="http://notmysite.com/sample">wannabe</a> <a rel='tag' href="http://myblog.com/category/games">games posts</a> ...
微数据 - Microdata
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p> <p>I am <span itemprop='nationality'>British</span>.</p> </div>
无障碍富互联网应用程序属性 - ARIA attributes
<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1" > <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul>
新的表单元素类型
增强已有元素
UI方面:
<input type='range' min='0' max='50' value='0' />
<input results='10' type='search' />
<input type='text' placeholder='Search inside' />
输入检查:(不符合条件的将显示红色背景)
<style> :invalid { background-color: red; } </style>
<input type='color' />
<input type='number' />
<input type='email' />
<input type='tel' />
etc...
新增的元素
<meter> <progress> <output> etc...
音频 + 视频 - 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>
Canvas 3D (WebGL)
<canvas id="canvas" width="838" height="220"></canvas> <script> var gl = document.getElementById("canvas").getContext("experimental-webgl"); gl.viewport(0, 0, canvas.width, canvas.height); ... </script>
HTML5中的SVG
<html> <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>
CSS 选择器
奇/偶选择
.row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; }
Image-like display
div { display: inline-block; }
通过属性选择
input[type="text"] { background: #eee; }
反选
:not(.box) { color: #00c; } :not(span) { display: block; }
以及一些其它的选择方法
h2:first-child { ... } div.text > div { ... } h2 + header { ... }
显示本地没有的字体
@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'; }
文本溢出处理
div { text-overflow: ellipsis; }
分栏显示
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
文本描边
div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 0.00px; }
透明效果
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
HSL(色相/饱和度/亮度)色彩模式
color: hsla(
128,
75%,
33%,
1.00);
圆角效果
border-radius: 0px;
渐变效果
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, 200, from(red), to(#000))
阴影效果
text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px;
box-shadow: rgba(0, 0, 128, 0.25) 3px 0px 0px;
制作一个LOGO，只需拖动滑动条
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)), to(rgba(255, 255, 255, 0)));
border-radius: 0px;
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0)));
更强大的背景
背景的尺寸
#logo { background: url(logo.gif) center center no-repeat; background-size: ; }
多个背景
div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }
变换 - Transitions
#box.left { margin-left: 0; } #box.right { margin-left: 1000px; } document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';
#box { -webkit-transition: margin-left 1s ease-in-out; } document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';
变换 - Transforms
-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example { -webkit-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out; } #threed-example:hover { -webkit-transform: rotateZ(-5deg); }
动画效果
@-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; }
