你的位置:首页 > 网页设计

[网页设计]Hello,HTML 到 HTML5


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+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" 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的旅程从这里开始了!!