新的选择器 通过 class 定位元素 (DOM API)
var el = document.getElementById('section1');var els = document.getElementsByTagName('div');var els = document.getElementsByClassName('section');
通过类似 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 function () {new Date()).getTime();false );
本地数据库 - Web SQL Database
var db = window.openDatabase("Database Name", "Database Version");function (tx) {
Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage 文件缓存 - Application Cache API
false );
CACHE MANIFEST
让程序在后台运行 - Web Workers
main.js:var worker = new Worker(‘extra_work.js');
双向信息传输 - Web Sockets
var socket = new WebSocket(location);function (event) {function (event) { alert(event.data); }function (event) { alert(“closed”); }
桌面提醒 - Notifications
if (window.webkitNotifications.checkPermission() == 0) {// you can pass any url as a parameter else {
拖放操作 - Drag and drop
document.addEventListener('dragstart', function (event) {false );
地理位置 - Geolocation
if (navigator.geolocation) {function (position) {var lat = position.coords.latitude;var lng = position.coords.longitude;new GLatLng(lat, lng), 13);new GMarker(new GLatLng(lat, lng)));
HTML新的语义标签
< body > < h1 > Page titleh1 > < h2 > Page subtitleh2 > hgroup > header > < ul > ul > nav > < h1 > Titleh1 > header > < section > section > article > < article > < header > < h1 > Titleh1 > header > < section > section > article > < article > < header > < h1 > Titleh1 > header > < section > section > article > section > aside > 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 postsa > < a rel ='external' href ="http://notmysite.com" > tutoriala > < a rel ='license' href ="http://www.apache.org/licenses/LICENSE-2.0" > licensea > < a rel ='nofollow' href ="http://notmysite.com/sample" > wannabea > < a rel ='tag' href ="http://myblog.com/category/games" > games postsa >
微数据 - Microdata
< div itemscope itemtype ="http://example.org/band" > < p > My name is < span itemprop ='name' > Neilspan > .p > < p > My band is called < span itemprop ='band' > Four Parts Waterspan > .p > < p > I am < span itemprop ='nationality' > Britishspan > .p > div >
无障碍富互联网应用程序属性 - ARIA attributes
< ul id ="tree1" ="tree" ="0" ="label_1" > < li role ="treeitem" tabindex ="-1" aria-expanded ="true" > Fruitsli > < li role ="group" > < ul > < li role ="treeitem" tabindex ="-1" > Orangesli > < li role ="treeitem" tabindex ="-1" > Pineapplesli > 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' />
新增的元素
< meter > < progress > < output >
音频 + 视频 - Audio + Video
< audio src ="sound.mp3" controls >audio > < video src ='movie.mp4' autoplay controls >video >
图形绘制 - Canvas
< canvas id ="canvas" width ="838" height ="220" >canvas > < script > var canvasContext = document.getElementById( " canvas " ).getContext( " 2d " ); 250 , 25 , 150 , 100 ); 450 , 110 , 100 , Math.PI * 1 / 2, Math.PI * 3 / 2 ); = 15 ; = ' round ' ; = ' rgba(255, 127, 0, 0.5) ' ; script >
Canvas 3D (WebGL)
< canvas id ="canvas" width ="838" height ="220" >canvas > < script > var gl = document.getElementById( " canvas " ).getContext( " experimental-webgl " ); 0 , 0 , canvas.width, canvas.height); script >
HTML5中的SVG
< html > < svg > < circle id ="myCircle" class ="important" cx ="50%" cy ="50%" r ="100" ="url(#myGradient)" ="alert('hello');" /> svg > html >
CSS 选择器 奇/偶选择
.row:nth-child(even) { #dde ; white ;
Image-like display
div { inline-block ;
通过属性选择
input[type="text"] { #eee ;
反选
:not(.box) { #00c ; } { block ; }
以及一些其它的选择方法
h2:first-child { ... } ... } { ... }
显示本地没有的字体
@font-face { : 'Junction' ; : url(Junction02.otf) ; } : 'LeagueGothic' ; : url(LeagueGothic.otf) ; } : 'GG250' ; : url(General250.otf) ; } 'LeagueGothic' ;
文本溢出处理
div { ellipsis ;
分栏显示
-webkit-column-count: 2;
文本描边
div { black ; red ; 0.00px ; }
透明效果
color: rgba(255, 0, 0, 0.75);
HSL(色相/饱和度/亮度)色彩模式
color: hsla(
圆角效果 渐变效果
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;
制作一个LOGO，只需拖动滑动条
text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;
更强大的背景 背景的尺寸
#logo { url(logo.gif) center center no-repeat ; ;
多个背景
div { url(src/zippy-plus.png) 10px center no-repeat, ;
变换 - Transitions
#box.left { 0 ; 1000px ;
#box { margin-left 1s ease-in-out ;
变换 - Transforms
-webkit-transform: rotateY(45deg);
#threed-example { rotateZ(5deg) ; -webkit-transform 2s ease-in-out ; rotateZ(-5deg) ;
动画效果
@-webkit-keyframes pulse { 0.0 ; 100% ; 1.0 ; 200% ; pulse ; 2s ; infinite ; ease-in-out ; alternate ;
