HTML5簡介

TML5是HTML最新的修訂版本，由萬維網聯盟（W3C）于2014年10月完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對于需要外掛程式的豐富性網路應用服務（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強網路應用的標準集。

HTML5添加了許多新的語法特征，其中包括<video>、<audio>和<canvas>元素，同時整合了SVG內容。這些元素是為了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數據內容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標準化了。同時APIs和DOM已經成為HTML5中的基礎部分了。HTML5還定義了處理非法文檔的具體細節，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯誤。

發展歷史

網頁超文本技術工作小組（WHATWG）于2004年開始制定新標準。在當時，HTML 4.01自2000年來沒有更新，以及全球資訊網協會（W3C）正在將未來的發展重點放在XHTML 2.0。2009年，W3C允許XHTML 2.0工作組章程結束過期并且決定不再續訂。W3C與WHATWG合作共同為發展HTML5而努力。

2004年6月，Mozilla基金會和Opera軟體公司在全球資訊網協會（W3C）所主辦的研討會上提出了一份立場文件，其重點是開發與現有瀏覽器向后相容的技術，包括Web Forms 2.0最初草案規范。研討會最后以——8票贊成，14票反對——否決繼續對HTML的開發工作。這引起一些人的不滿，在研討會之后，網頁超文本技術工作小組（WHATWG）立即根據該立場文件成立，第二個草案，Web Applications 1.0也公布了。后來這兩種規范合并形成HTML5。2007年，獲得W3C接納，并成立了新的HTML工作團隊。2008年1月22日，第一份公開工作草案發布。

盡管HTML5已經在網絡開發人員中非常出名了，但是它成為主流媒體的一個話題是在2010年的4月，當時蘋果公司的CEO喬布斯發表一篇題為“對Flash的思考”的文章，指出隨著HTML5的發展，觀看影片或其它內容時，Adobe Flash將不再是必須的。這引發了開發人員間的爭論，包括HTML5雖然提供了加強的功能，但開發人員必須考慮到不同瀏覽器對標準不同部分的支持程度的不同，以及HTML5和Flash間的功能差異。

特點

標記

HTML5提供了一些新的元素和屬性，反映典型的現代用法網站。其中有些是技術上類似<div>和<span>標簽，但有一定含義，例如<nav>（網站導航塊）和<footer>。這種標簽將有利于搜索引擎的索引整理、小螢幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標準接口，如<audio>和<video>標記。一些過時的HTML 4.01標記將取消，其中包括純粹用作顯示效果的標記，如<font>和<center>，因為它們已經被CSS取代。還有一些透過DOM的網絡行為。

盡管和SGML在標記上的相似性，HTML5的句法并不再基于它了，而是被設計成向后兼容對老版本的HTML的解析。它有一個新的開始列看起來就像SGML的文檔類型聲明，<!DOCTYPE HTML>，這會觸發和標準兼容的渲染模式。在2009年1月5日，HTML5添加了Web Form 2.0的內容，HTML5開始發展起來。

新的API

HTML5相關APIs

除了原先的DOM接口，HTML5增加了更多樣化的應用程序接口（API）：

Canvas

定時媒體播放

離線

可編輯內容

拖放

歷史

MIME和協議處理程序時表頭登記

微數據

網路訊息

網路存儲

以上技術盡管是WHATWG HTML說明文檔的內容，但并沒有全部包括在W3C HTML5的說明文檔里。一些相關的技術，像下面所列的，并沒有包括在這2份文檔中的任何一份中。W3C給這些技術單獨出版了說明文檔。

地理位置

網頁SQL數據庫 ─ 本地SQL數據庫（不再維護）

IndexedDB

文件─ 處理文件上傳和操縱文件

目錄和文件系統 ─ 這個API是為了滿足客戶端在沒有好的數據庫支持情況下存儲要求

文件寫入 ─ 從網絡應用程序向文件里寫內容

網路音頻

ClassList

網路加密

WebRTC

一個普遍的誤解是HTML5能夠在網頁中提供動畫效果，這是不對的，動畫效果是需要配合JavaScript和CSS。然而靜態HTML5配合CSS可以表示出覆雜的排版結構而且原生支援與影片的混合與控制（控制一般由JavaScript執行），因此簡單可以把HTML5單位時間的狀態理解為動畫的關鍵影格。

XHTML5（XML-serialized HTML5）

XHTML5是對HTML5的XML序列化。XML文檔必須被設置為XML互聯網文件類型，像application/xhtml+xml或者application/xml。XHTML5要求像XML一樣嚴格的格式化的語法。在XHTML5中，HTML5的<!DOCTYPE HTML>可有可無的。

XHTML5并非XHTML的第5版，沒有自己獨立的標準規范，而是HTML5的一種序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language，不同于XHTML5。

異常處理

HTML5在設計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的完整規則，讓不同的瀏覽器即使在發生語法錯誤時也能返回完全相同的結果。

普及率

根據2011年9月30日發布的一份報告，全球排名前100的網站中有34個網站使用HTML5──主要是搜尋引擎與社群網站。2013年8月發布的另一份報告顯示，財富美國500強企業中已有多達153家采用HTML5。

HTML 4.01和XHTML 1.x的差異

以下為大略的不同之處，與例子：

文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。

新的解析順序：不再基于SGML。

新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新類型：date, email, url等等。

新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。

全域屬性：id, tabindex, repeat。

新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

TML5 元素有多種維度展示方式，常見以下：

1.按照類別分類
2.按照是否Block元素

按照類別分：

根元素

- html 代表 HTML 或 XHTML 文檔的根。其他所有元素必須是這個元素的子節點。
文檔元數據
head 代表關于文檔元數據的一個集合，包括腳本或樣式表的鏈接或內容。
title 定義文檔的標題，將顯示在瀏覽器的標題欄或標簽頁上。該元素只能包含文本，包含的標簽不會被解釋。
base 定義頁面上相對 URL 的基準 URL。
link 用于鏈接外部的 CSS 到該文檔。
meta 定義其他 HTML 元素無法描述的元數據。
style 用于內聯 CSS。
-
腳本
script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript。
noscript 定義當瀏覽器不支持腳本時顯示的替代文字。
template 這個元素在 HTML5 中加入通過 JavaScript 在運行時實例化內容的容器。
-
章節
body 代表 HTML 文檔的內容。在文檔中只能有一個元素。
section 這個元素在 HTML5 中加入定義文檔中的一個章節。
nav 這個元素在 HTML5 中加入定義只包含導航鏈接的章節。
article 這個元素在 HTML5 中加入定義可以獨立于內容其余部分的完整獨立內容塊。
aside 這個元素在 HTML5 中加入定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
h1~ h6 標題元素實現了六層文檔標題，h1 是最大的標題，h6 是最小的標題。標題元素簡要地描述章節的主題。
header 這個元素在 HTML5 中加入定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄
footer 這個元素在 HTML5 中加入定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
address 定義包含聯系信息的一個章節。
main 這個元素在 HTML5 中加入定義文檔中主要或重要的內容。
-
內容組織
p 定義一個段落。
hr 代表章節、文章或其他長內容中段落之間的分隔符。
pre 代表其內容已經預先排版過，格式應當保留。
blockquote 代表引用自其他來源的內容。
ol 定義一個有序列表。
ul 定義一個無序列表。
li 定義列表中的一個列表項。
dl 定義一個定義列表（一系列術語和其定義）。
dt 代表一個由下一個
定義的術語。
dd 代表出現在它之前術語的定義。
figure 這個元素在 HTML5 中加入代表一個和文檔有關的圖例。
figcaption 這個元素在 HTML5 中加入代表一個圖例的說明。
div 代表一個通用的容器，沒有特殊含義。
-
文字展示
a 代表一個鏈接到其他資源的超鏈接。
em 代表強調文字。
strong 代表特別重要文字。
small 代表注釋，如免責聲明、版權聲明等，對理解文檔不重要。
s 代表不準確或不相關的內容。
cite 代表作品標題。
q 代表內聯的引用。
dfn 代表一個術語包含在其最近祖先內容中的定義。
abbr 代表省略或縮寫，其完整內容在 title 屬性中。
data 這個元素在 HTML5 中加入關聯一個內容的機器可讀的等價形式（該元素只在 WHATWG 版本的 HTML 標準中，不在 W3C 版本的 HTML5 標準中）。
time 這個元素在 HTML5 中加入代表日期和時間值；機器可讀的等價形式通過 datetime 屬性指定。
code 代表計算機代碼。
var 代表代碼中的變量。
samp 代表程序或電腦的輸出。
kbd 代表用戶輸入，一般從鍵盤輸出，但也可以代表其他輸入，如語音輸入。
sub,- sup 分別代表下標和上標。
i 代表一段不同性質的文字，如技術術語、外文短語等。
b 代表一段需要被關注的文字。
u 代表一段需要下劃線呈現的文本注釋，如標記出拼寫錯誤的文字等。
mark 這個元素在 HTML5 中加入代表一段需要被高亮的引用文字。
ruby 這個元素在 HTML5 中加入代表被ruby 注釋標記的文本，如中文漢字和它的拼音。
rt 這個元素在 HTML5 中加入代表ruby 注釋，如中文拼音。
rp 這個元素在 HTML5 中加入代表 ruby 注釋兩邊的額外插入文本，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
bdi 這個元素在 HTML5 中加入代表需要脫離父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本。
bdo 指定子元素的文本方向，顯式地覆蓋默認的文本方向。
span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素。
br 代表換行。
wbr 這個元素在 HTML5 中加入代表建議換行 (Word Break Opportunity) ，當文本太長需要換行時將會在此處添加換行符。
-
文字編輯
ins 定義增加到文檔的內容。
del 定義從文檔移除的內容。
-
圖片等資源展示
img 代表一張圖片。
iframe 代表一個內聯的框架。
embed 這個元素在 HTML5 中加入代表一個嵌入的外部資源，如應用程序或交互內容。
object 代表一個外部資源，如圖片、HTML 子文檔、插件等。
param 代表 - object 元素所指定的插件的參數。
video 這個元素在 HTML5 中加入代表一段視頻及其視頻文件和字幕，并提供了播放視頻的用戶界面。
audio 這個元素在 HTML5 中加入代表一段聲音，或音頻流。
source 這個元素在 HTML5 中加入為 - video 或 - audio 這類媒體元素指定媒體源。
track 這個元素在 HTML5 中加入為 - video 或 - audio 這類媒體元素指定文本軌道（字幕）。
canvas 這個元素在 HTML5 中加入代表位圖區域，可以通過腳本在它上面實時呈現圖形，如圖表、游戲繪圖等。
map 與 - area 元素共同定義圖像映射區域。
area 與 - map 元素共同定義圖像映射區域。
svg 這個元素在 HTML5 中加入定義一個嵌入式矢量圖。
math 這個元素在 HTML5 中加入定義一段數學公式。
-
表格
table 定義多維數據。
caption 代表表格的標題。
colgroup 代表表格中一組單列或多列。
col 代表表格中的列。
tbody 代表表格中一塊具體數據（表格主體）。
thead 代表表格中一塊列標簽（表頭）。
tfoot 代表表格中一塊列摘要（表尾）。
tr 代表表格中的行。
td 代表表格中的單元格。
th 代表表格中的頭部單元格。
-
表單
form 代表一個表單，由控件組成。
fieldset 代表控件組。
legend 代表 - fieldset 控件組的標題。
label 代表表單控件的標題。
input 代表允許用戶編輯數據的數據區（文本框、單選框、復選框等）。
button 代表按鈕。
select 代表下拉框。
datalist 這個元素在 HTML5 中加入代表提供給其他控件的一組預定義選項。
optgroup 代表一個選項分組。
option 代表一個 - select 元素或 - datalist 元素中的一個選項
textarea 代表多行文本框。
keygen 這個元素在 HTML5 中加入代表一個密鑰對生成器控件。
output 這個元素在 HTML5 中加入代表計算值。
progress 這個元素在 HTML5 中加入代表進度條。
meter 這個元素在 HTML5 中加入代表滑動條。
-
導航等交互元素
details 這個元素在 HTML5 中加入代表一個用戶可以(點擊)獲取額外信息或控件的小部件。
summary 這個元素在 HTML5 中加入代表 - details 元素的綜述或標題。
menuitem 這個元素在 HTML5 中加入代表一個用戶可以點擊的菜單項。
menu 這個元素在 HTML5 中加入代表菜單。

按照是否Block元素分：

1.Empty Elements
area 與 map 元素共同定義圖像映射區域。
base 定義頁面上相對 URL 的基準 URL。
basefont 4.0種標簽，目前已廢棄
br 代表換行。
col 代表表格中的列。
frame 4.0種標簽，目前已廢棄
hr 代表章節、文章或其他長內容中段落之間的分隔符。
img 代表一張圖片。
input 代表允許用戶編輯數據的數據區（文本框、單選框、復選框等）。
isindex 4.0種標簽，目前已廢棄
link 用于鏈接外部的 CSS 到該文檔。
meta 定義其他 HTML 元素無法描述的元數據。
param 代表 object 元素所指定的插件的參數
embed 代表一個嵌入的外部資源，如應用程序或交互內容
-
2.Block Elements
address 定義包含聯系信息的一個章節
applet 4.0種標簽，目前已廢棄
blockquote 代表引用自其他來源的內容。
button 代表按鈕
center 4.0種標簽，目前已廢棄
dd 代表出現在它之前術語的定義
del 定義從文檔移除的內容。
dir 4.0種標簽，目前已廢棄
div 代表一個通用的容器，沒有特殊含義
dl 定義一個定義列表（一系列術語和其定義）
dt 代表一個由下一個 dd 定義的術語
fieldset 代表控件組
form 代表一個表單，由控件組成
frameset 4.0種標簽，目前已廢棄
hr 代表章節、文章或其他長內容中段落之間的分隔符
iframe 代表一個內聯的框架
ins 定義增加到文檔的內容
isindex 4.0種標簽，目前已廢棄
li 定義列表中的一個列表項
map 與 area 元素共同定義圖像映射區域
menu 代表菜單
noframes
noscript 定義當瀏覽器不支持腳本時顯示的替代文字
object 代表一個外部資源，如圖片、HTML 子文檔、插件等
ol 定義一個有序列表
p 定義一個段落
pre 代表其內容已經預先排版過，格式應當保留
script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript
table 定義多維數據
tbody 代表表格中一塊具體數據（表格主體）
td 代表表格中的單元格
tfoot 代表表格中一塊列摘要（表尾）
th 代表表格中的頭部單元格
thead 代表表格中一塊列標簽（表頭）
tr 代表表格中的行
ul 定義一個無序列表
-
3.Inline Elements
a 代表一個鏈接到其他資源的超鏈接
abbr 代表省略或縮寫，其完整內容在 title 屬性中
acronym 4.0種標簽，目前已廢棄
applet 4.0種標簽，目前已廢棄
b 代表一段需要被關注的文字
basefont 4.0種標簽，目前已廢棄
bdo 指定子元素的文本方向，顯式地覆蓋默認的文本方向
big 4.0種標簽，目前已廢棄
br 代表換行
button 代表按鈕
cite 代表作品標題
code 代表計算機代碼
del 定義從文檔移除的內容
dfn 代表一個術語包含在其最近祖先內容中的定義
em 代表強調文字
font 4.0種標簽，目前已廢棄
i 代表一段不同性質的文字，如技術術語、外文短語等
iframe 代表一個內聯的框架
img 代表一張圖片
input 代表允許用戶編輯數據的數據區（文本框、單選框、復選框等）
ins 定義增加到文檔的內容
kbd 4.0種標簽，目前已廢棄
label 代表表單控件的標題
map 與 area 元素共同定義圖像映射區域
object 代表一個外部資源，如圖片、HTML 子文檔、插件等
q 代表內聯的引用
s 代表不準確或不相關的內容
samp 代表程序或電腦的輸出
script 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScript
select 代表下拉框
small 代表注釋，如免責聲明、版權聲明等，對理解文檔不重要
span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素
strike 4.0種標簽，目前已廢棄
strong 代表特別重要文字
sub 代表下標
sup 代表上標
textarea 代表多行文本框
tt 4.0種標簽，目前已廢棄
u 4.0種標簽，目前已廢棄
var 代表代碼中的變量
-

參考文獻：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
本文作者：前端首席體驗師(CheongHu)
聯系郵箱：simple2012hcz@126.com
版權聲明：本文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協議。轉載請注明出處！

們都知道現在學習HTML5開發技術是非常吃香的，很多互聯網公司都在高薪招聘HTML5工程師，但不是專業出身的話，很難順利進入這個行業，幸好現在有很多HTML5培訓機構可以幫助我們實現這個愿望。

不少人前來進行咨詢，都會問及一個問題，就是HTML5培訓的周期是多久，我來這里學習得學多久？這個問題非常普遍，因為基本上所有的人都希望盡快的學完出去找工作。在這里就給大家說一說HTML5培訓的時間是多久？

一般的培訓周期是5個月，5個月過后，學員如果按照老師的課程進度走的話，畢業進入名企工作是沒有問題的。同時在入學的時候要簽訂就業協議，免除后顧之憂。

課程首先介紹HTML5中的基礎知識，然后講解CSS3基礎知識。整個課程貫徹大量真實案例的演練，幫助學生進行鞏固知識，鍛煉學生動手能力、編程能力。

在積累了兩個月的知識以及大量案例后，講解HTML5的高級部分，保證學習效果。值得一提的是兄弟連HTML5課程要求學員要達到手寫代碼的程度。在有了扎實的手寫代碼的功底之后，再講解工具的使用，學習效果會更好。

了解客戶端和服務器交互的規則、及服務端的基礎技術，這樣可以幫助學員更好地設計程序與服務器進行交互。

說了這么多，其實就是想讓你更加了解HTML5開發。如此優秀的資源和讓人望眼欲穿的實習機會，再不行動就要被后來居上的技術人員拍死在沙灘上了。

在線咨詢

上一篇：JS截取字符串的方法
下一篇：零基礎必看的前端HTML+CSS教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5簡介

按照類別分：

按照是否Block元素分：

您的項目需求