[转自] 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. 25.AVG 函数

    定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...

  2. PHP加密与解密

    password_hash ( string $password , integer $algo [, array $options ] ) 加密,生成60位得字符串 $algo:一个用来在散列密码时 ...

  3. pymysql模块使用---Python连接MySQL数据库

    pymysql模块使用---Python连接MySQL数据库 浏览目录 pymysql介绍 连接数据库 execute( ) 之 sql 注入 增删改查操作 进阶用法 一.pymysql介绍 1.介绍 ...

  4. Monkey压力测试Android常见的错误类型及黑白名单的使用方法

    Android常见的错误类型有两种 1.ANR类型 1)在5秒内没有响应输入的事件(例如,按键按下,屏幕触摸) 2)BroadcastReceiver在10秒内没有执行完毕 2.Crash类型 1)异 ...

  5. jquery数组拼接

    var a=[]; var c=[80,90,70,100] var b={'张三':19,'成绩':c}; a.push(b); console.log("测试案例",a); 同 ...

  6. 浅谈delphi创建Windows服务程序与窗体实现交互

    我想实现的功能是创建一个服务程序,然后在服务Start时动态创建一个窗体Form,然后把Form缩小时变成TrayIcon放在Windows托盘上. 我在服务程序的OnStart事件中写到 Start ...

  7. 组合（Composite）模式 *

    组合(Composite)模式:将对象组合树形结构以表示‘部分-整体’的层次结构. 组合模式使得用户对单个对象和组合对象具有一致性 /* * 抽象构件(Component)角色:这是一个抽象角色,它给 ...

  8. SOA IN Real World

    微软发布了一个名为“真实世界里的面向服务架构(SOA)”的电子书.这本书表达了微软对面向服务架构的观点,并包括了数个展示如何用微软产品和技术实现SOA的真实案例.书中解释到,SOA的功能型架构本身是松 ...

  9. （c++11）随机数------c++程序设计原理与实践（进阶篇）

    随机数既是一个实用工具,也是一个数学问题,它高度复杂,这与它在现实世界中的重要性是相匹配的.在此我们只讨论随机数哦最基本的内容,这些内容可用于简单的测试和仿真.在<random>中,标准库 ...

  10. 「BZOJ 2342」「SHOI 2011」双倍回文「Manacher」

    题意 记\(s_R\)为\(s\)翻转后的串,求一个串最长的形如\(ss_Rss_R\)的子串长度 题解 这有一个复杂度明显\(O(n)\)的做法,思路来自网上某篇博客 一个双倍回文串肯定当且仅当本身 ...