[转自] 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);
});
Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage

文件缓存 - 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;
}

HTML5必须知道的那些事的更多相关文章

  1. 关于html5之canvas的那些事

    何为canvas <canvas> 标签只是图形容器,您必须使用脚本来绘制图形.默认情况下该矩形区域宽为300像素,高为150像素,设置宽高必须在canvas标签内部,不能加单位px. 大 ...

  2. 基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...

  3. html5手机常见问题与工具分享

    mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...

  4. 基于HTML5的电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网 ...

  5. (任寒韬)WebApp群主 - MobileTech 资料

    web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/mas ...

  6. mobilehack -转

    # mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...

  7. 你所不知道的html5与html中的那些事第三篇

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...

  8. 你所不知道的Html5那些事(一)

    文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...

  9. HTML5哪点事

    HTML5哪点事 [引子] 微信圈里,很多朋友时常讲起HTML5,是未来很重要的一项技术,小老虎则更关注HTML5具体包含哪些技术内容. [技术内容] 1.说到底就是传统:html + css + j ...

随机推荐

  1. Sublime Text notes

    1. 设置在窗口右下方显示文件的编码,在user preferences里加上以下的配置 2.设置用新标签页打开新文件而不是用新窗口打开,将以下配置改为false(默认为true)

  2. adb命令安装及卸载应用

    一.手机连接电脑,检测手机是否已开启授权并连接成功 adb devices 二.安装应用 adb install UYUN-CARRIER-Android.apk 三.卸载应用 1.查看应用包名 ad ...

  3. C#向服务器上传文件问题

    最近在写服务器端web上传的接口.但一直报错,上传不上去,后来发现是在分隔符中出现的问题. 错误的写法: var boundary = "---------------" + Da ...

  4. C#上位机中ZedGraph控件的使用

    上位机程序控制PLC模拟量通道输出周期性正弦波信号,并采集所造成改变的模拟量输入信号,并绘制数据变化曲线. 界面如图: 最后测试效果如图: 代码: using System; using System ...

  5. RequireJS 主入口加载模块经常会加载失败的问题

    在接入requirejs时,在main入口遇到了这样的问题,使用jquery,刷新10次页面会有3-4次加载失败,找不到$符号等等 require.config({ 'baseUrl': './mod ...

  6. Linux虚拟机安装 nginx (nginx1.9.9)

    1.安装基础环境包(如果已安装,可更新) yum -y :自动选择y yum -y install openssl* yum -y install libjpeg libjpeg-devel libp ...

  7. iOS 查看代码总行数

    1.打开终端 2.cd 拖入工程 回车 3.输入命令 find . "(" -name "*.m" -or -name "*.mm" -or ...

  8. NSNotification 消息通知的3种方式

    1.Notification Center的概念: 它是一个单例对象,允许当事件发生时通知一些对象,让对象做出相应反应. 它允许我们在低程度耦合的情况下,满足控制器与一个任意的对象进行通信的目的. 这 ...

  9. 深入 Nginx:我们是如何为性能和规模做设计的

    NGINX 在网络应用中表现超群,在于其独特的设计.许多网络或应用服务器大都是基于线程或者进程的简单框架,NGINX突出的地方就在于其成熟的事件驱动框架,它能应对现代硬件上成千上万的并发连接. NGI ...

  10. RESTful API概念解析

    什么是restful? REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”或“表现层状态转化”. ...