HTML 5 技術體系中的新標記

HTML5技術

前言

目錄

過去

現在

未來

JavaScript

修改進化

儲存記憶

資料庫

網路連接

衛星定位

通知

拖拉

HTML

修改進化

新標記

影音物件

2D 繪圖

3D 動畫

CSS

修改進化

字體

特效

選擇器

開發工具

Node.js

Titanium

PhoneGap

Aptana Studio

應用工具

應用

工具

雲端網站

mugeda 動畫製作

訊息

相關網站

參考文獻

最新修改

簡體版

English

簡介

HTML5 承襲了 HTML4 的大部分標記，並且進行大幅的擴增，這些擴增主要可以分為下列五類，包含 Semantics (New tags, Link Relations, Microdata)、Accessibility (ARIA roles)、Web Forms 2.0 (Input Fields)、Multimedia (Audio Tag, Video Tag)、2D and 3D drawing (Canvas, WebGL, SVG) 等。

New Semantics Tags

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

New Link relations

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

New form field types

Implemented
Dedicated UI:

<input type='range' min='0' max='50' value='0' />
<input results='10' type='search' />
<input type='text' placeholder='Search inside' />

Input Validation:

<style> :invalid { background-color: red; } </style>
<input type='color' />
<input type='number' />
<input type='email' />
<input type='tel' />

etc…
Not yet

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

SVG in HTML5

<html>
  <svg>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
        fill="url(#myGradient)"
        onmousedown="alert('hello');"/>
  </svg>
</html>

Facebook
page revision: 1, last edited: 06 Sep 2010 00:53
Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License