HTML5特性一览
来源:互联网 发布:淘宝入住 编辑:程序博客网 时间:2024/06/05 03:46
原文链接:http://www.cnblogs.com/hamy/archive/2012/02/21/2362110.html
新的选择器
通过 class 定位元素 (DOM API)
var el = document.getElementByIdx_x_x('section1');
el.focus();
var els = document.getElementsByTagName_r('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
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新的语义标签
<</span>body>
<</span>h1>Page title</</span>h1>
<</span>h2>Page subtitle</</span>h2>
</</span>hgroup>
</</span>header>
<</span>ul>
Navigation...
</</span>ul>
</</span>nav>
<</span>h1>Title</</span>h1>
</</span>header>
<</span>section>
Content...
</</span>section>
</</span>article>
<</span>article>
<</span>header>
<</span>h1>Title</</span>h1>
</</span>header>
<</span>section>
Content...
</</span>section>
</</span>article>
<</span>article>
<</span>header>
<</span>h1>Title</</span>h1>
</</span>header>
<</span>section>
Content...
</</span>section>
</</span>article>
</</span>section>
Top links...
</</span>aside>
Copyright © 2009.
</</span>footer>
</</span>body>
新的链接关系
<</span>link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<</span>link rel='icon' href="/favicon.ico" />
<</span>link rel='pingback' href="http://myblog.com/xmlrpc.php">
<</span>link rel='prefetch' href="http://myblog.com/main.php">
...
<</span>a rel='archives' href="http://myblog.com/archives">old posts</</span>a>
<</span>a rel='external' href="http://notmysite.com">tutorial</</span>a>
<</span>a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</</span>a>
<</span>a rel='nofollow' href="http://notmysite.com/sample">wannabe</</span>a>
<</span>a rel='tag' href="http://myblog.com/category/games">games posts</</span>a>
...
微数据 - Microdata
<</span>div itemscope itemtype="http://example.org/band">
<</span>p>My name is <</span>span itemprop='name'>Neil</</span>span>.</</span>p>
<</span>p>My band is called <</span>span itemprop='band'>Four Parts Water</</span>span>.</</span>p>
<</span>p>I am <</span>span itemprop='nationality'>British</</span>span>.</</span>p>
</</span>div>
无障碍富互联网应用程序属性 - ARIA attributes
<</span>ul id="tree1"
role="tree"
tabindex="0"
aria-labelledby="label_1"
>
<</span>li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</</span>li>
<</span>li role="group">
<</span>ul>
<</span>li role="treeitem" tabindex="-1">Oranges</</span>li>
<</span>li role="treeitem" tabindex="-1">Pineapples</</span>li>
...
</</span>ul>
</</span>li>
</</span>ul>
新的表单元素类型
增强已有元素
UI方面:
<</span>input type='range' min='0' max='50' value='0' />
<</span>input results='10' type='search' />
<</span>input type='text' placeholder='Search inside' />
输入检查:(不符合条件的将显示红色背景)
<</span>style> :invalid { background-color: red; } </</span>style>
<</span>input type='color' />
<</span>input type='number' />
<</span>input type='email' />
<</span>input type='tel' />
etc...
新增的元素
<</span>meter>
<</span>progress>
<</span>output>
etc...
音频 + 视频 - Audio + Video
<</span>audio src="sound.mp3" controls></</span>audio>
document.getElementByIdx_x_x("audio").muted=false;
<</span>video src='movie.mp4' autoplay controls ></</span>video>
document.getElementByIdx_x_x("video").play();
图形绘制 - Canvas
<</span>canvas id="canvas" width="838" height="220"></</span>canvas>
<</span>script>
var canvasContext = document.getElementByIdx_x_x("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();
</</span>script>
Canvas 3D (WebGL)
<</span>canvas id="canvas" width="838" height="220"></</span>canvas>
<</span>script>
var gl = document.getElementByIdx_x_x("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
</</span>script>
HTML5中的SVG
<</span>html>
<</span>svg>
<</span>circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</</span>svg>
</</span>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.getElementByIdx_x_x('box').className = 'left';
document.getElementByIdx_x_x('box').className = 'right';
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
document.getElementByIdx_x_x('box').className = 'left';
document.getElementByIdx_x_x('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;
}
0 0
- HTML5特性一览
- 一览HTML5新特性
- HTML5和CSS3新特性一览
- HTML5宏观概览、新增特性一览
- Html5标签一览
- HTML5新增标签一览
- mysql 5.5特性一览
- CSS3新特性一览
- JDK6新特性一览
- JAVA8新特性一览
- c++函数特性一览
- Java7新特性一览
- Redis特性一览
- JDK8新特性一览
- Swift4 新特性一览
- HTML5特性
- html5特性
- html5 特性
- 文件上传处理
- 简单的感染硬盘病毒修改版源码
- Genymotion配置及使用教程(最新最完整版附各部分下载地址)
- android应用内截图的代码实现
- C读取文件流
- HTML5特性一览
- Linux下网络编程
- java线程系列---Runnable和Thread的区别
- 加载一个类时,其内部类是否同时被加载?
- 前端必备:六款CSS工具让代码充满魅力
- Opencv2.3.1在VS2008和VS2010平台上安装配置图解
- 职业规划
- Dijkstra算法
- 浅谈如何删除JSP编译后的空行