開始使用 HTML5
簡化：檔頭
簡化前：HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
簡化後：HTML5
<!DOCTYPE html>
簡化：JavaScript 引用
簡化前：HTML4
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
簡化後：HTML5
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
HTML5 與 HTML4 的比較
| 標籤 | 描述 | 4 | 5 |
| <!--...--> | 定義註釋。 | 4 | 5 |
| <!DOCTYPE> | 定義文件類型。 | 4 | 5 |
| <a> | 定義超連結。 | 4 | 5 |
| <abbr> | 定義縮寫。 | 4 | 5 |
| <acronym> | HTML 5 中不支援。定義首字母縮寫。 | 4 | |
| <address> | 定義位元址元素。 | 4 | 5 |
| <applet> | HTML 5 中不支援。定義 applet。 | 4 | |
| <area> | 定義圖像映射中的區域。 | 4 | 5 |
| <article> | 定義 article。 表示文件中的一塊獨立的內容，譬如BLOG中的一篇文章或報紙中的一篇文章。 |
5 | |
| 例： HTML5:<article></article> HTML4:<div class="article"></div> |
|||
| <aside> | 定義頁面內容之外的內容。 表示article元素的內容之外的與article元素的內容相關的有關內容。 |
5 | |
| 例： HTML5:<aside>與article元素的內容相關的有關內容。</aside> HTML4:<div>與article元素的內容相關的有關內容。</div> |
|||
| <audio> | 定義聲音內容。 | 5 | |
| 例： HTML5:<audio src="someaudio.wav">audio元素</audio> HTML4:<object type="application/ogg" data="someaudio.wav"> <param name="src" value="someaudio.wav"></object> |
|||
| <b> | 定義粗體文字。 | 4 | 5 |
| <base> | 定義頁面中所有連結的基準 URL。 | 4 | 5 |
| <basefont> | 定義base的字型 。HTML 5 中不支援。請使用 CSS 代替。 | 4 | |
| <bdo> | 定義文字顯示的方向。 | 4 | 5 |
| <big> | HTML 5 中不支援。定義大號文字。 | 4 | |
| <blockquote> | 用來設定一段較長的文字段落。 | 4 | 5 |
| <body> | 定義 body 元素。 | 4 | 5 |
| <br> | 插入換行符。 | 4 | 5 |
| <button> | 定義按鈕。 | 4 | 5 |
| <canvas> | 定義圖形。比如圖表和其他圖像。這個 HTML 元素是為了用戶端向量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給用戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。 | 5 | |
| 例： HTML5:<canvas id="myCanvas" width="200" height="200"></canvas> HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object> |
|||
| <caption> | 定義表格標題。 | 4 | 5 |
| <center> | HTML 5 中不支援。定義居中的文字。請使用 CSS 代替。 | 4 | |
| <cite> | 定義引用。 | 4 | 5 |
| <code> | 定義電腦代碼文字。 | 4 | 5 |
| <col> | 定義表格列的屬性。 | 4 | 5 |
| <colgroup> | 定義表格列的分組。 | 4 | 5 |
| <command> | 定義命令按鈕。比如單選按鈕、核取方塊或按鈕。 | 5 | |
| 例： HTML5: <command onclick=cut()" label="cut"> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <datalist> | 定義下拉清單。表示可選資料的列表。與 input 元素配合使用，就可以製作出輸入值的下拉清單。 | 5 | |
| 例： HTML5: <datalist></datalist> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <dd> | 設定文字的跳字。 | 4 | 5 |
| <del> | 定義刪除文字。 | 4 | 5 |
| <details> | 定義元素的細節。 示用戶要求得到並且可以得到的細節資訊。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，用戶點擊標題時，會顯示出details。summary元素應該是details元素的第一個子元素。 |
5 | |
| 例： HTML5: <details><summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5.</details> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <dfn> | 定義定義項目。 | 4 | 5 |
| <dir> | HTML 5 中不支援。定義目錄列表。請使用 CSS 代替。 | 4 | |
| <div> | 定義文件中的一個部分。 | 4 | 5 |
| <dl> | 設定文字的段落。 | 4 | 5 |
| <dt> | 設定文字的開始位置。 | 4 | 5 |
| <em> | 定義強調文字。 | 4 | 5 |
| <embed> | 定義外部交互內容或插件。 | 5 | |
| 例： HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf" ></object> |
|||
| <fieldset> | 區域設定：可設定一個表格來顯示文字、數字的輸入等。 | 4 | 5 |
| <figcaption> | 定義 figure 元素的標題。 | 5 | |
| <figure> | 定義媒介內容的分組，以及它們的標題。 | 5 | |
| 例： 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> |
|||
| <font> | 用來定義文件內字型的樣式、大小、顏色等。 HTML 5 中不支援。請使用 CSS 代替。 | 4 | |
| <footer> | 定義 section 或 page 的頁腳。 定義區段section或文件的註腳。一般來說，它會包含創作者的姓名、文件的創作日期以及/或者聯繫資訊。 |
5 | |
| 例： HTML5: <footer></footer> HTML4: <div></div> |
|||
| <form> | 定義表單。 | 4 | 5 |
| <frame> | HTML 5 中不支援。設定框架內容。 | 4 | |
| <frameset> | HTML 5 中不支援。設定框架樣式。 | 4 | |
| <h1> to <h6> | 定義標題 1 到標題 6。 | 4 | 5 |
| <head> | 定義關於文件的資訊。 | 4 | 5 |
| <header> | 定義 section 或 page 的頁眉。 表示區段section或文件的標題。 |
5 | |
| 例： HTML5: <header></header> HTML4: <div></div> |
|||
| <hgroup> | 定義有關文件中的 section 的資訊。 用於對網頁或區段section的標題進行組合。 |
5 | |
| 例： HTML5: <hgroup></hgroup> HTML4: <div></div> |
|||
| <hr> | 定義水準線。 | 4 | 5 |
| <html> | 定義 html 文件。 | 4 | 5 |
| <i> | 定義斜體文字。 | 4 | 5 |
| <iframe> | 在框架中加入視窗元件。 | 4 | 5 |
| <img> | 定義圖像。 | 4 | 5 |
| <input> | 設定輸入型式。 | 4 | 5 |
| <ins> | 設定插入文件樣式。 | 4 | 5 |
| <keygen> | 定義生成密鑰。 | 5 | |
| 例： HTML5: <keygen> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <isindex> | HTML 5 中不支援。定義單行的輸入域。 | 4 | |
| <kbd> | 設定鍵盤文字。 | 4 | 5 |
| <label> | 設定一個控制元件。 | 4 | 5 |
| <legend> | 設定一個區域設定的標題。 | 4 | 5 |
| <li> | 定義列表的項目。 | 4 | 5 |
| <link> | 連結到原始檔的路徑，用於<head>部份。 | 4 | 5 |
| <map> | 定義圖像映射。 | 4 | 5 |
| <mark> | 定義有記號的文字。 | 5 | |
| <menu> | 定義功能表列表。 | 4 | 5 |
| 例： HTML5:<menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />blue</li> </menu> HTML4: menu元素不被推薦使用 |
|||
| <meta> | 用於標題的重要資料及關鍵字敘述。 | 4 | 5 |
| <meter> | 定義預定義範圍內的度量。 | 5 | |
| 例： HTML5: <meter></meter> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <nav> | 定義導航連結。 | 5 | |
| 例： HTML5: <nav></nav> HTML4:<ul></ul> |
|||
| <noframes> | HTML 5 中不支援。定義 noframe 部分。 | 4 | |
| <noscript> | 定義 noscript 部分。 | 4 | 5 |
| <object> | 定義嵌入物件。 | 4 | 5 |
| <ol> | 定義有序列表。 | 4 | 5 |
| <optgroup> | 設定下拉式的群組選單。 | 4 | 5 |
| <option> | 設定下拉式個別選單。 | 4 | 5 |
| <output> | 定義輸出的一些類型。比如腳本的輸出。 | 5 | |
| 例： HTML5: <output></output> HTML4: <span></span> |
|||
| <p> | 定義段落。 | 4 | 5 |
| <param> | 為物件定義參數。 | 4 | 5 |
| <pre> | 定義預格式化文字。 | 4 | 5 |
| <progress> | 定義任何類型的任務的進度。 | 5 | |
| 例： HTML5: <progress></progress> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <q> | 定義短的引用。 | 4 | 5 |
| <rp> | 定義若流覽器不支援 ruby 元素顯示的內容。 | 5 | |
| 例： HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>) </rp></rt></ruby> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <rt> | 定義 ruby 註釋的解釋（中文注音或字元）。 | 5 | |
| 例： HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <ruby> | 定義 ruby 註釋（中文注音或字元）。 | 5 | |
| 例： HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>) </rp></rt></ruby> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <s> | HTML 5 中不支援。定義加刪除線的文字。請使用 CSS 代替。 | 4 | |
| <samp> | 設定電腦字碼樣式。 | 4 | 5 |
| <script> | 定義腳本。 | 4 | 5 |
| <section> | 定義 section。 定義文件或應用程式中的一個區段section,比如章節、頁眉、頁腳或文件中的其他部分。它可以與h1,h2,h3,h4,h5,h6元素結合起來使用，標示文件結構。 |
5 | |
| 例： HTML5: <section></section> HTML4: <div></div> |
|||
| <select> | 定義可選列表。 | 4 | 5 |
| <small> | 使用較小的字體。 | 4 | 5 |
| <source> | 定義為媒介元素（比如 <video> 和 <audio>）定義媒介資源。 | 5 | |
| 例： HTML5: <source> HTML4: <param> |
|||
| <span> | 設定一段文件的樣式。 | 4 | 5 |
| <strike> | HTML 5 中不支援。定義加刪除線的文字。請使用 CSS 代替。 | 4 | |
| <strong> | 特別強調。 | 4 | 5 |
| <style> | 文件樣式，使用在<head>。 | 4 | 5 |
| <sub> | 定義下標文字。 | 4 | 5 |
| <summary> | 定義 details 元素的標題。 | 5 | |
| <sup> | 定義上標文字。 | 4 | 5 |
| <table> | 定義表格。 | 4 | 5 |
| <tbody> | 定義表格的主體。 | 4 | 5 |
| <td> | 定義表格單元。 | 4 | 5 |
| <textarea> | 定義 textarea。 | 4 | 5 |
| <tfoot> | 定義表格的註腳。 | 4 | 5 |
| <th> | 設定表格標頭屬性。 | 4 | 5 |
| <thead> | 定義表頭。 | 4 | 5 |
| <time> | 定義日期/時間。 | 5 | |
| 例：HTML5: <time></time> HTML4: <span></span> |
|||
| <title> | 定義文件的標題。 | 4 | 5 |
| <tr> | 定義表格行。 | 4 | 5 |
| <tt> | HTML 5 中不支援。定義打字機文字。請使用 CSS 代替。 | 4 | |
| <u> | HTML 5 中不支援。定義下劃線文字。請使用 CSS 代替。 | 4 | |
| <ul> | 定義無序列表。 | 4 | 5 |
| <var> | 定義變數。 | 4 | 5 |
| <video> | 定義影片。 | 5 | |
| 例： HTML5: <video src="movie.ogg" controls="controls">video元素</video> HTML4:<object type="video/ogg" data="movie.ogv"> <param name="src" value="movie.ogv"></object> |
|||
| <wbr> | 表示軟換行。wbr元素與br元素的區別是,br元素是此處必須換行；而wbr元素意思就是瀏覽器視窗或者父級元素的寬度足夠寬時（沒必要換行時），不進行換行，而當寬度不夠時，主動在此處進行換行。 | 5 | |
| 例：HTML5: <p> To learn AJAX, you must be fami<wbr> liar with the XMLHttp<wbr>Request Object. </p> HTML4: (HTML5中新增功能，沒有相對應功能） |
|||
| <xmp> | HTML 5 中不支援。定義預格式文字。 | 4 | |
讓舊IE也支援HTML5
國外許多先進設計師已經共同研發一個簡單易用的方式，就是將所有舊IE瀏覽器所欠缺的標籤，用javascript的方式自行補上，雖然無法達到百分之百的 HTML5支援，但其實已經有非常多的功能可以透過此種方式運作在老舊的IE瀏覽器上
使用方式非常簡單，你只需在</head>前貼上下面這段Code即可：
1 | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
參考：
http://www.w3schools.com/
https://developer.mozilla.org/media/uploads/demos/p/a/paulrouget/html5-dashboard/demo_package/
發表評論
想要留言嗎？歡迎歡迎！