開始使用 HTML5

開始使用 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瀏覽器上

開始使用 HTML5
開始使用 HTML5

使用方式非常簡單,你只需在</head>前貼上下面這段Code即可:

1
&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;

參考:
http://www.w3schools.com/

https://developer.mozilla.org/media/uploads/demos/p/a/paulrouget/html5-dashboard/demo_package/

關於作者 多力哥
開始使用 HTML5
影像創作攝影師/網頁動畫設計師/系統網路工程師/水草研究生
景文科大畢業後,我成為一名網站動畫設計師,並副修MIS電腦資訊管理。2004年,我開始接觸單眼相機,並在2008年正式成為一名接案攝影師,目前使用Canon系統進行拍攝。2016年,我愛上了美麗的水草缸,這讓我的生活多了另一層次的放鬆。每天在電腦前修圖時,能欣賞紅吱吱、綠油油的水草,彷彿多了一份平靜與愉悅。攝影與水草讓我的生活充滿了藝術與自然的交融。
連絡信箱:hello@hahasmile.com (歡迎合作提案)
DORIGO IMAGE 攝影工作室:https://dorigo-image.com
如果你喜歡我的內容,可以用行動贊助我一杯咖啡☕,支持我持續創作,也讓這個網站可以繼續營運下去喔!

若您喜歡這篇文章,歡迎按讚分享喔!
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *