TWed2k - 程式開發討論區 - [轉貼] HTML 5新標籤大全及用法

主題: [其他] [轉貼] HTML 5新標籤大全及用法 [打印本頁]

發表人: jocosn 時間: 2011-4-17 02:14 AM 主題: [轉貼] HTML 5新標籤大全及用法

HTML 5 是一個新的網絡標準，目標在於取代現有的 HTML 4.01, XHTML 1.0 和 DOM Level 2 HTML 標準。它希望能夠減少瀏覽器對於需要插件的豐富性網絡應用服務（plug-in-based rich internet application，RIA)，如 Adobe Flash, Microsoft Silverlight, 與 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和屬性，反映典型的現代用法網站。其中有些是技術上類似<div> 和<span> 標籤，但有一定含義，例如<nav>（網站導航塊）和 <footer>。這種標籤將有利於搜索引擎的索引整理、小屏幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標準接口，如<audio> 和<video> 標記。

一些過時的HTML 4 標記將取消，其中包括純粹用作顯示效果的標記，如<font> 和<center>，因為它們已經被CSS 取代。還有一些透過 DOM 的網絡行為（via）。

‧doctype
HTML5: <!DOCTYPE HTML>
HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 等

‧charset
HTML5: <meta charset="utf-8">
HTML4: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 等

‧style sheets & scripts (<link> & <script> 不須 type 屬性)
HTML5:
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.custom.js"></script>

HTML4:
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/modernizr.custom.js" type="text/javascript"></script>

[總結] HTML5 範本大概就長這樣：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document Name</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<p>Your content</p>
</body>
</html>

-------------------------------------------------------------------------------------------------

下面我們來看一下HTML 5提供的一些新的標籤用法以及和HTML 4的區別。

‧<article>標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。
HTML5: <article></article>
HTML4: <div class="article"></div>

‧<aside>標籤定義 article 以外的內容。 aside 的內容應該與article 的內容相關。
HTML5: <aside>Aside 的內容是獨立的內容，但應與文檔內容相關。 </aside>
HTML4: <div>Aside 的內容是獨立的內容，但應與文檔內容相關。 </div>

‧<audio> 標籤定義聲音，比如音樂或其他音頻流。
HTML5: <audio src="someaudio.wav">您的瀏覽器不支持audio 標籤。</audio>
HTML4: <object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

‧<canvas> 標籤定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。
HTML5: <canvas id="myCanvas" width="200" height="200"></canvas>
HTML4: <object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

‧<command> 標籤定義命令按鈕，比如單選按鈕、複選框或按鈕。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

‧<datalist> 標籤定義可選數據的列表。與input 元素配合使用，就可以製作出輸入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

‧<details> 標籤定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。與<legend> 一起使用，來製作detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

‧<embed> 標籤定義嵌入的內容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>

‧<figcaption> 標籤定義figure 元素的標題。 ”figcaption” 元素應該被置於“figure” 元素的第一個或最後一個子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

‧<figure> 標籤用於對元素進行組合。使用 <figcaption> 元素為元素組添加標題。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

‧<footer> 標籤定義section 或document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯繫信息。
HTML5: <footer></footer>
HTML4: <div></div>

‧<header> 標籤定義section 或document 的頁眉。
HTML5: <header></header>
HTML4: <div></div>

‧<hgroup> 標籤用於對網頁或區段（section）的標題進行組合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

‧<keygen> 標籤定義生成密鑰。
HTML5: <keygen>
HTML4: none

‧<mark>主要用來在視覺上向用戶呈現那些需要突出的文字。 <mark>標籤的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
HTML5: <mark></mark>
HTML4: <span></span>

‧<meter> 標籤定義度量衡。僅用於已知最大和最小值的度量。必須定義度量的範圍，既可以在元素的文本中，也可以在min/max 屬性中定義。
HTML5: <meter></meter>
HTML4: none

‧<nav> 標籤定義導航鏈接的部分。
HTML5: <nav></nav>
HTML4: <ul></ul>

‧<output> 標籤定義不同類型的輸出，比如腳本的輸出。
HTML5: <output></output>
HTML4: <span></span>

‧<progress> 標籤運行中的進程。可以使用<progress> 標籤來顯示JavaScript 中耗費時間的函數的進程。
HTML5: <progress></progress>
HTML4: none

‧<rp> 標籤在ruby 註釋中使用，以定義不支持ruby 元素的瀏覽器所顯示的內容。
HTML5: <ruby>漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

‧<rt> 標籤定義字符（中文注音或字符）的解釋或發音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

‧<ruby> 標籤定義ruby 註釋（中文注音或字符）。
HTML5: <ruby>漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

‧<section> 標籤定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

‧<source> 標籤為媒介元素（比如<video> 和<audio>）定義媒介資源。
HTML5: <source>
HTML4: <param>

‧<summary> 標籤包含details 元素的標題，”details” 元素用於描述有關文檔或文檔片段的詳細信息。 ”summary” 元素應該是“details” 元素的第一個子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

‧<time> 標籤定義日期或時間，或者兩者。
HTML5: <time></time>
HTML4: <span></span>

‧<video> 標籤定義視頻，比如電影片段或其他視頻串流。
HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支援 video 標籤。 </video>
HTML4: <object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

[範例]

HTML4:
<div id="head">
<ul id="nav">......</ul>
</div>
<div id="content">
......
</div>
<ul id="footer">......</ul>

HTML5:
<header>
<nav>......</nav>
</header>
<article>
......
</article>
<footer>......</footer>

Using HTML5 semantic elements
<header>
<hgroup>
      <h1>Company Name</h1>
      <h2>An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>

<nav>
<ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
</ul>
</nav>

<article>
<header>
      <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
      </time>
      <h1>
            <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
      </h1>
</header>
<p>This is an article that demonstrates some of the new features
that HTML5 and CSS3 has to offer. This article contains several sections, each
with its own heading, as well as a video element which will play a video without
Flash on browsers that support it.</p>
<section>
      <header>
            <h1>This is a section heading</h1>
      </header>
      <p>This is an example of a basic section of a document.
A section can refer to different parts of a document, application, or page.
According to the draft W3C spec, HTML5 sections usually have headings.</p>
</section>
</article>

<footer>
<p>© 2009 Company Name. All rights reserved.</p>
</footer>

‧ 4 VS. 5
HTML4:

<body>
<div class=”header”>
         <h1>Site title</h1>
         <h2>Site description</h2>
</div>
<div class=”content”>
         <div class =”post”>
                  <h2>Post title</h2>
                  <p>Post content</p>
                  <h3>Subheading</h3>
                  <p>More content</p>
         </div><!—post -->
</div><!—content -->
<div class=”sidebar”>
         <h2>Sidebar title</h2>
         <div class=”widget”>
                  <h3>Widget title</h3>
                  <p>Widget content</p>
         </div>
</div>
<div class=”footer”>
         //footer content
</div>
</body>

HTML5:

<body>
<header>
         <hgroup>
                  <h1>Site title</h1>
                  <h2>Site description</h2>
         </hgroup>
</header>
<section>
         <article>
                  <h1>Post title</h2>
                  <p>Post content</p>
                  <h2>Subheading</h3>
                  <p>More content</p>
         </article><!—post -->
</section><!—content -->
<aside>
         <h1>Sidebar title</h2>
         <div class=”widget”>
                  <h2>Widget title</h3>
                  <p>Widget content</p>
         </div>
</aside>
<footer>
         //footer content
</footer>
</body>

-------------------------------------------------------------------------------------------------
針對舊版 IE 修正 HTML5
1. 兼容舊版 IE 使用 HTML5 可使用 HTML4 標籤解決

<div id="header">
<header>
<div id="nav"><nav>......</nav></div>
</header>
</div>
<div id="article">
<article> ...... </article>
</div>
<div id="footer">
<footer>......</footer>
</div>

2. CSS 樣式的套用
使用 javascript 的 document.createElement('header') 建立 HTML5 tag 後，可套用 CSS ( IE 6.0、7.0、8.0 皆適用)

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>My first HTML5 website</title>
   <script type="text/javascript">
   // 下列的 javascript 是為了讓舊版 IE 可套用 CSS 到 HTML5 的 tag
   document.createElement('header');
   document.createElement('nav');
   document.createElement('article');
   document.createElement('section');
   document.createElement('footer');
   /* 或使用
            1. for 迴圈
            for(var e, l='article aside footer header nav section time'.split(' '); e=l.pop(); document.createElement(e))
         2. 正規表示式
         'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})
      */
   </script>
   <style>
   header {
      background: yellow;
      display: block; /* inline is the default */
}
header a {
      color: red;
}
  </style>
</head>
<body>
<header>
   <a href="/">Welcome to my HTML5 test page</a>
   <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
   </nav>
</header>
<article>
   <section>
      <h2>HTML5 section 1</h2>
      <p>[...]</p>
   </section>
   <section>
      <h2>HTML5 section 2</h2>
      <p>[...]</p>
   </section>
</article>
<footer>
   HTML5 test page
</footer>
</body>
</html>

-------------------------------------------------------------------------------------------------
參考
http://html5age.com/2010/12/31/html5-new-tags.html
http://www.adobe.com/devnet/drea ... -semantics-pt3.html
http://www.hagenburger.net/BLOG/ ... ,-Opera-and-IE.html
http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
http://rachelmccollin.co.uk/blog/html5-hierarchical-headings/
http://www.w3.org/TR/html5-diff/
-------------------------------------------------------------------------------------------------
小抄 (Cheat Sheet --PDF)
CSS3
http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

HTML 5
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

視訊教學
http://www.html5trends.com/views/html5-and-future-of-web-from-brad-neuberg/

http://blog.moocss.com/tutorials/html5-css3-tutorials/1596.html

HTML5 網站全面升級 (by Will 保哥的技術交流中心)
http://docs.com/G6ZY

Migrate to HTML5 (2011 微軟開發者大會)
http://docs.com/CUQL

[jocosn 在 2013-3-12 03:08 AM 作了最後編輯]

發表人: Vic 時間: 2011-4-17 02:56 AM

坦白說熊小還沒寫過真正html5的網頁呢…而印象最深的應該是youtube用html5來播放影片吧。

發表人: csrover 時間: 2011-4-26 01:37 PM

最近寫了不少canvas的東西
這幾個網頁可以推薦給大家看
http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
https://developer.mozilla.org/en/Canvas_tutorial
http://www.whatwg.org/specs/web- ... index.html#contents
http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=shadows
不過效能真的是笑能
Flash還是比較強

發表人: edwardlin 時間: 2011-11-12 11:33 PM

感謝整理拉
正好最近在學HTML5
謝囉

發表人: fenix93 時間: 2012-2-22 11:08 PM

剛好最近需要

來參考看看

感謝~

發表人: mmcatdog 時間: 2012-2-23 11:52 PM

html5 真要支援應該還要5年以上的時間
大多數人的使用環境是問題
語法的相容性問題
跟語法的表現能力
稍微接觸一下發現真的是flash比較實用

發表人: disabledman 時間: 2012-2-24 06:25 AM

所以,要用HTML5寫GAME，還是得用 WEBGL 囉!?
是否因CANVAS是 pixel-base的.. 所以效能較低呢!? 謝謝!!

歡迎光臨 TWed2k (http://twed2k.org/)