HTML5是WEB应用将发展到一个水平必要的技术.

下面是WEB发展的时间轴:

　　1991 - HTML

　　1994 - HTML2

　　1996 - CSS1 + JAVASCRIPT

　　1997 - HTML4

　　1998 - CSS2

　　2000 - XHTML1

　　2002 - Tableless Web Design

　　2005 - Ajax

　　2009 - HTML5

下面我用一个公式来说明HTML5:

　　HTML5 ~= HTML + CSS +JAVASCRIPT(APIs)

JAVASCRIPT APIs ??

　　1.新的选择器

　　　　var el = document.getElementById('section1');

　　　　el.focus();

　　　　var els = document.getElementsByTagName('div');

　　　　els[0].focus();

　　　　var els = document.getElementsByClassName('section');

　　　　els[0].focus();

　　2.通过CSS的语法来查找元素

　　　　var els = document.querySelectorAll("ul li:nth-child(odd)");

　　　　var els = document.querySelectorAll("table.test > tr > td");

　　3.网络存储(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'];

　　　　用途示例：保存邮件时，草稿在客户端，可以避免有时候崩溃导致内容丢失重写.

　　4.Web SQL数据库

　　　　var db = window.openDatabase("Database Name", "Database Version");

　　　　db.transaction(function(tx) {

　　　　　　tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);

　　　　});

　　5.应用程序缓存API

　　　　<html manifest="cache-manifest">

　　　　window.applicationCache.addEventListener('checking', updateCacheStatus, false);

　　6.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);

　　7.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”); }

　　8. 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();

　　　　}

　　9.Drag and drop

　　　　document.addEventListener('dragstart', function(event) {

　　　　　　event.dataTransfer.setData('text', 'Customized text');

　　　　　　event.dataTransfer.effectAllowed = 'copy';

　　　　}, false);

　　10.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 ??

　1.新的语义标签

<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>

2.新的链接关系
<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>

...
3.微数据 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>
4.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>
5.New form field types
<input type='range' min='0' max='50' value='0'>
<input autofocus type='search'>
<input type='text' placeholder='Search inside'>

6.Audio + Video
<audio src="sound.mp3" controls></audio>

document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls ></video>

document.getElementById("video").play();

7.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>

8.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>

9.SVG in HTML5
<html>

  <svg>

    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 

        fill="url(#myGradient)"

        onmousedown="alert('hello');"/>

  </svg>

</html>

CSS??
1.CSS Selectors
2.New font support
3.Text wrapping
4.Columns
5.Text stroke
6.Opacity
7.Hue/saturation/luminance color model
8.Rounded corners
9.Gradients
10.Shadows
11.Instant Web 2.0 (just add sliders)
12.Background enhancements
13.Transitions
14.Transforms
15.Animations

HTML5 = 下一代WEB应用的技术

以上是HTML5概述大部分特性，所以我学习HTML5的旅程从这里开始了！！
 

Hello,HTML 到 HTML5的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. MyBatis 配置sql语句输出

    版权声明:本文为博主原创文章,未经博主允许不得转载. 此处使用log4j,加入jar包,然后在src路径下加入:log4j.properties文件 填入以下配置就可以打印了 log4j.rootLo ...

  2. hdu1272 并查集

    如果要输出yes 需要满足 1  这个图连通 2  没有回路 3  0 0 也是yes 看它有没有回路 在un的时候做一次判断就可以了 然后是判断连通 在这里采用的方法是扫一遍 如果这个点出现过就判断 ...

  3. NVlink

    Nvidia's Pascal to use stacked memory, proprietary NVLink interconnect by Scott Wasson — 6:50 PM on ...

  4. PHP里用户密码的回复和管理

    1). In /etc/my.ini, add skip-grant-tables 2). mysql -u root -p            (no password required) mys ...

  5. js 表单内容使用ajax以json格式混合提交

    脚本代码 function submitForm(){    var post_data = $("#form1").getdict();    var data_dict = { ...

  6. 不要让mysql犹豫不决

    DROP TABLE IF EXISTS `w1`; CREATE TABLE `w1` ( `waid` ) NOT NULL AUTO_INCREMENT, `wa1` ) COLLATE utf ...

  7. data abstractions 数据抽象

    Computer Science An Overview _J. Glenn Brookshear _11th Edition In this chapter we investigate how d ...

  8. kafka监控系统

    Metrics-Java版的指标度量工具之一 Metrics-Java版的指标度量工具之二 JAVA Metrics 度量工具使用介绍1 JAVA Metrics度量工具 - Metrics Core ...

  9. Mongo中的数组操作

    当前mongo中有这么一条数据 book是一个数组,在他后面添加一条数据 { "_id" : ObjectId("5721f504d1f70435632b5ce7&quo ...

  10. 详解 Qt 线程间共享数据（用信号槽方式）

    使用共享内存.即使用一个两个线程都能够共享的变量(如全局变量),这样两个线程都能够访问和修改该变量,从而达到共享数据的目的. Qt 线程间共享数据是本文介绍的内容,多的不说,先来啃内容.Qt线程间共享 ...