HTML5 概述及基本語法
1、HTML5 概述
（1）HTML5 的歷史 HTML5 是繼 HTML4.01 和 XHTML1.0 之後的超文字標記語言的最新版本。它是由一群自由思想者組成的團隊設計出來，並最終實現多媒體支援、互動性、更加智慧的表單，以及更好的語義化標記。 HTML5 並不僅僅是 HTML 規範的最新版本，而是一系列用來製作現代富 Web 內容的相關技術的總稱，其中最重要的三項技術分別為：HTML5 核心規範（標籤元素）、CSS（層疊樣式表第三代）、和 JavaScript。 1993 年 HTML 首次以因特網草案的形式釋出，然後經歷了 2.0、3.2 和 4.0，直到 1999年的 HTML4.01 版本穩定下來。由於發展緩慢，逐漸的被更加嚴格的 XHTML 取代。 1）XHTML 的興衰史 自從 HTML4.01 版本之後，掌握著 HTML 規範的全球資訊網聯盟（W3C）組織沒有再發布新的標準，而是圍繞著 XHTML1.0 以及之後的 XHTML2.0 展開工作。XHTML 是基於 XML、致力於實現更加嚴格並且統一的編碼規範的 HTML 版本，解決之前 HTML4.01 版本時，由於編碼不規範導致瀏覽器的各種古怪行為。所以，Web 開發者對 XHTML 非常的擁護。XHTML 極大的好處，就是強迫開發者養成良好的編碼習慣，放棄 HTML 的凌亂寫法，最終降低了瀏覽器解析頁面的難度，方便移植到更多平臺。 可是，越是想往好的方面發展，往往可能是帶來的卻是毀滅性的災難，世間萬物就是如此。XHTML2.0 規範了更嚴格的錯誤處理規則，強制要求瀏覽器拒絕無效的 XHTML2 頁面，強制 Web 開發者寫出絕對正確規範的程式碼，同時不得向下相容，摒棄 HTML 遺留的怪異行為和編碼習慣。按理說，取其精華、舍其糟粕應該是好事。但是，這樣的話，數億的頁面將無法相容，Web 開發者的難度又被加大，並且制定這個標準又太過久遠，最終被拋棄。 2）HTML5 的迴歸 2008 年 W3C 釋出了 HTML5 的工作草案，2009 年停止了 XHTML2 計劃。又過去大概一年，HTML5 規範進一步解決了諸多非常實際的問題，各大瀏覽器廠商開始對旗下的產品進行升級，以便支援 HTML5。這樣，得益於瀏覽器的實驗反饋，HTML5 規範得到了持續的進步和完善，從而迅速融入到 Web 平臺的實質性改進中。 和 XHTML2.0 不同，制定 HTML5 規範的一群人並不想挑出以往 HTML 的各種毛病為其改正，而是儘可能的補全 Web 開發者急需的各種功能。這些功能包括更強大的 CSS3、表單驗證、音訊視訊、本地儲存、地理定位、繪畫（Canvas）、Web 通訊等等。 （2）HTML5 的功能 HTML5 到底涵蓋了哪些功能？這些功能到底在主流的瀏覽器支援情況如何？ 1）HTML5 核心：這部分主要由 W3C 官方的規範組成，涉及新的語義元素、新的增強的 Web 表單、音訊和視訊、以及通過 JavaScript 繪圖的 Canvas。這部分大多數主流瀏覽器均得到很好的支援； 2）曾經的 HTML5 標準：這部分主要來自於最初制定的 HTML5 規範，其中大多數功能需要 JavaScript 且支援富 Web 應用開發。比如：本地資料儲存、離線應用和訊息傳遞； 3）非 HTML5 標準：這部分通常指下一代功能，雖然從未進入 HTML5 標準，但人們還是會把它認做 HTML5 的一部分。這些包括最為常見的 CSS3，以及很熱門的地理定位。 對於最為常用且實用的部分，基本上主流的瀏覽器都支援的比較好。而那些特殊需求的部分，則需要根據不同的瀏覽器檢測才能知道是否支援自己想要的功能。 （3）HTML5 的特點 在 HTML5 發展的同時，XHTML2.0 也在不斷髮展，那麼到底是哪些特點導致 HTML5 取得最終的勝利呢？ 1）向下相容 對於 XHTML2.0 要求遵循規則，否則不予顯示的方式，HTML5 卻實行“不破壞 Web”的原則。也就是說，以往已存在的 Web 頁面，還可以保持正確的顯示。 當然，面對開發者，HTML5 規範要求摒棄過去那些編碼壞習慣和廢棄的標籤元素；而面對瀏覽器廠商，要求它們相容 HTML 遺留的一切，以做到向下相容。 2）使用者至上 HTML5 遵循“使用者至上”的原則，在出現具體問題時，會把使用者放在第一位，其次是開發者，然後是瀏覽器廠商，最後才是規範制定者。比如，開發者在編碼時不嚴謹導致本該出現警告或錯誤時，卻正常顯示了頁面。 3）化繁為簡 HTML5 對比之前的 XHTML，做了大量的簡化工作。具體如下：
- 以瀏覽器的原生能力代替複雜的 JavaScript；
- DOCTYPE 被簡化到極致；
- 字符集宣告被簡化；
- 簡單強大的 API。
4）無外掛正規化 在 HTML5 出現之前，很多功能只能通過外掛或 hack（如繪圖 API）來實現，但 HTML5原生提供了這些支援。使用外掛有很多問題，具體如下：
- 外掛安裝容易失敗；
- 外掛被瀏覽器或軟體禁用遮蔽（如 Flash 外掛）；
- 外掛經常會被爆出漏洞被利用攻擊；
- 外掛不容易與 HTML 文件其他部分整合（比如整體透明化等）。
5）訪問通用性 這個原則分為三個概念：
- 可訪問性：比如更加利於殘障人士的閱讀方案；
- 媒體中立：比如 HTML5 的媒體播放在不同裝置或平臺均能正常執行；
- 支援所有語種：比如新元素。
6）引入語義 HTML5 引入了一些用來區分不同含義和內容的標記元素。這種方式極大的提供的編碼人員的可讀性和程式碼區域查詢的便利性。 7）引入原生媒體支援 HTML5 的一次大改進救生衣支援在瀏覽器中直接播放視訊和音訊檔案，以前都需要藉助外掛才能實現此類功能。 8）引入可程式設計內容 HTML5 最大的變化就是引入了需要通過 JavaScript 程式設計才能完全的各種效果，而這些很多都是 HTML5 原生的。那麼現在 HTML5 可以理解為 HTML + CSS + JavaScript 的總稱。
2、HTML5 基本格式
（1）HTML5 文件結構
<!DOCTYPE html> // 文件型別宣告 <html lang="zh-cn"> // 表示 HTML 文件開始 <head> // 包含文件元資料開始 <meta charset="utf-8"> // 宣告字元編碼 <title>基本結構</title> // 設定文件標題 </head> // 包含文件元資料結束 <body> // 表示 HTML 文件內容 <a href="http://www.baidu.com">百度</a> // 一個超連結元素（標籤） </body> // 表示 HTML </html> // 表示 HTML 文件結束
（2）文件結構解析 1）Doctype 文件型別宣告（Document Type Declaration，也稱 Doctype）。它主要告訴瀏覽器所檢視的檔案型別。在以往的 HTML4.01 和 XHTML1.0 中，它表示具體的 HTML 版本和風格。而如今 HTML5 不需要表示版本和風格了。
<!DOCTYPE html> // 不分割槽大小寫
2）html 元素 首先，元素就是標籤的意思，html 元素即 html 標籤。html 元素是文件開始和結尾的元素。它是一個雙標籤，頭尾呼應，包含內容。這個元素有一個屬性和值：lang=“zh-cn”，表示文件採用語言為：簡體中文。
<html lang="zh-cn"> // 如果是英文則為 en
3）head 元素 用來包含元資料內容，元資料包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。這些內容用來瀏覽器提供資訊，比如 link 提供 CSS 資訊，script 提供 JavaScript 資訊，title 提供頁面標題等。
<head>...</head> // 這些資訊在頁面不可見
4）meta 元素 這個元素用來提供關於文件的資訊，起始結構有一個屬性為：charset=“utf8”。表示告訴瀏覽器頁面採用的什麼編碼，一般來說我們就用 utf8。當然，檔案儲存的時候也是utf8，而瀏覽器也設定 utf8 即可正確顯示中文。
<meta charset="utf-8"> // 除了設定編碼，還有別的
5）title 元素 這個元素很簡單，顧名思義：設定瀏覽器左上角的標題。
<title>基本結構</title>
6）body 元素 用來包含文件內容的元素，也就是瀏覽器可見區域部分。所有的可見內容，都應該在這個元素內部進行新增。
<body>...</body>
7）a 元素 一個超連結。
<a href="http://www.baidu.com">百度</a>
（3）元素標籤探討 HTML 是一種標記語言，剛才的結構我們已經詳細探討過。這裡，我們再剖析一下這些“標記”或者叫“標籤”，書面上經常稱作為“元素”的東西是怎麼構成的。 1）元素 元素就是一組告訴瀏覽器如何處理一些內容的標籤。每個元素都有一個關鍵字，比如<body>、<title>、<meta>都是元素。不同的標籤名稱代表不同的意義，後面將會涉及到段落標籤、文字標籤、連結標籤、圖片標籤等。 元素一般分為兩種：單標籤（空元素）和雙標籤。單標籤一般用於宣告或者插入某個元素，比如宣告字元編碼就用<meta>，插入圖片就用<img>；雙標籤一般用於設定一段區域的內容，將其包含起來，比如段落<p>...</p>。 2）屬性和值 元素除了有單雙之分，元素的內部還可以設定屬性和值。這些屬性值用來改變元素某些方面的行為。比如超連結：<a>中的 href 屬性，裡面替換網址即可連結到不同的網站。當然一個元素裡面可以設定多個屬性，甚至自定義屬性。
3、HTML5 文字元素
|
元素名稱 |
說明 |
|---|---|
|
a |
生成超連結 |
|
br |
強制換行 |
|
wbr |
Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.安全換行，在英文單詞過長時使用<wbr>會根據瀏覽器的寬度適當的裁切換行 |
|
b |
實際作用就是加粗，標記一段文字但不強調 |
|
strong |
實際作用就是加粗，從語義上來看，就是強調一段重要的文字 |
|
i |
表示外文或科學術語，實際作用就是傾斜。從語義上來看，表示區分周圍內容，並不是特別強調重要性 |
|
em |
實際作用就是傾斜，從語義上來看，表示對一段文字的強調 |
|
u |
實際作用就是加一條下劃線，從語義上來看，並不強調此段文字 |
|
ins |
實際作用就是加一條下劃線，從語義上來看，是新增一段文字，起到強調的作用 |
|
s |
實際作用就是刪除線，從語義上來看，表示不準確的刪除 |
|
del |
實際作用就是刪除線，從語義上來看，表示刪除相關文字 |
|
dfn |
該元素就是一般性的傾斜，從語義上看，表示術語定義 |
|
mark |
實際作用就是加上一個黃色的背景，黑色的字；從語義上來看，顯示與上下文相關而突出的文字，用於記號 |
|
code |
表示計算機程式碼片段，由於這屬於英文範疇的，必須將 lang="en"英語才能體現效果 |
|
var |
表示程式語言中的變數，由於這屬於英文範疇的，必須將 lang="en"英語才能體現效果 |
|
samp |
表示程式或計算機的輸出，由於這屬於英文範疇的，必須將 lang="en"英語才能體現效果 |
|
kdb |
表示使用者的輸入，由於這屬於英文範疇的，必須將 lang="en"英語才能體現效果 |
|
abbr |
該元素沒有實際作用，從語義上看，是一段文字的縮寫 |
|
cite |
實際作用就是加粗，從語義上來看，表示引用其他作品的標題 |
|
q |
實際作用就是加了一對雙引號。從語義上來看，表示引用來自其他地方的內容 |
|
ruby |
表示位於表意文字上方或右方的注音符號，用來為非西方語言提供支援 |
|
rp |
與 ruby 元素結合使用，標記括號 |
|
rt |
與 ruby 元素結合使用，標記拼音 |
|
bdo |
<bdo dir="rtl">HTML5</bdo>控制文字的方向。<bdo>必須使用屬性 dir 才可以設定，一共兩個值：rtl（從右到左）和 ltr（從左到右）。一般預設是 ltr。還有一個<bdi>元素也是處理方向的，由於是特殊語言的特殊效果，且主流瀏覽器大半不支援 |
|
small |
實際作用就是將文字放小一號，從語義上來看，用於免責宣告和澄清宣告 |
|
sub |
表示下標字型 |
|
sup |
表示上標字型 |
|
time |
<time>2015-10-10</time>該元素沒有實際作用；從語義上來看，表示日期和時間 |
|
span |
通用元素，沒有任何語義。一般配合 CSS 修飾 |
<ruby>元素示例：
<ruby>
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>
4、超連結和路徑
（1）超連結的屬性
|
屬性名稱 |
說明 |
|---|---|
|
href |
指定<a>元素所指資源的 URL |
|
hreflang |
指向的連結資源所使用的語言 |
|
media |
說明所連結資源用於哪種裝置 |
|
rel |
說明文件與所連結資源的關係型別 |
|
target |
指定用以開啟所連結資源的瀏覽環境 |
|
type |
說明所連結資源的 MIME 型別（比如 text/html） |
1）href 屬性 <a href="http://www.baidu.com">百度</a> 解釋：href 是必須屬性，否則<a>元素就變成空元素了。如果屬性值是 http://開頭的 URL，意味著點選跳轉到指定的外部網站。 2）target 屬性 <a href="http://www.baidu.com" target="_blank">百度</a> 解釋：target 屬性告訴瀏覽器希望將所連結的資源顯示在哪裡。
|
屬性名稱 |
說明 |
|---|---|
|
_blank |
在新視窗或標籤頁中開啟文件 |
|
_parent |
在父窗框組（frameset）中開啟文件 |
|
_self |
在當前視窗開啟文件（預設） |
|
_top |
在頂層視窗開啟文件 |
這四種最常用的是_blank，新建一個視窗。而_self 是預設，當前視窗開啟。_parent和_top 是基於框架頁面的，分別表示在父視窗開啟和在整個視窗開啟。而 HTML5 中，框架基本被廢棄，只能使用元素，且以後大量結合 JavaScript 和 PHP 等語言配合，框架用的就很少了。 （2）相對路徑與絕對路徑 所謂相對路徑，就是相對於連結頁面而言的另一個頁面的路徑。而絕對路徑，就是直接從 file:///磁碟符開始的完整路徑。我們在同一個目錄下做上兩個頁面，其中一個頁面連結到另一個頁面。 1）絕對路徑 <a href="file:///D:/備課/HTML5 第一季/code/index2.html">index2</a> 解釋：首先是 file:///開頭，然後是磁碟符，然後是一個個的目錄層次，找到相應檔案。這種方式最致命的問題是，當整個目錄轉移到另外的碟符或其他電腦時，目錄結構一旦出現任何變化，連結當即失效。 2）相對路徑 <a href="index2.html">index2</a> 解釋：相對路徑的條件是必須檔案都在一個磁碟或目錄下，如果是在同一個目錄下，直接屬性值就是被連結的檔名.字尾名。如果在同一個主目錄下，有多個子目錄層次，那就需要使用目錄結構語法。 3）目錄語法 同一個目錄：index2.html 或./index2.html； 在子目錄：xxx/index2.html； 在孫子目錄：xxx/xxx/index2.html； 在父目錄：…/index2.html； 在爺爺目錄：…/…/index2.html； （3）錨點設定 超連結也可用來將同一個文件中的另一個元素移入視野。通過屬性 id 或 name 實現錨點定位。
// 連結
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
// 錨點
<a name="1"></a> <a id="3"></a>
5、分組元素
|
元素名稱 |
說明 |
|---|---|
|
p |
素實際作用就是將內部包含的文字形成一個段落；而段落和段落之間保持一定量的空隙 |
|
div |
<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進行佈局。而在 HTML5 中，由於語義的緣故，被其他各種文件元素所代替。和<p>段落的區別就是，兩段文字的上下空隙是沒有的，空隙間隔和<br>換行一樣 |
|
blockquote |
實際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮排的功能。語義上表示，大段的引用他處的內容 |
|
pre |
實際作用就是編輯器怎麼排版的，原封不動的展現出來。當然，這種只適合簡單的排版，複雜的排版就無法滿足要求了 |
|
hr |
實際作用就是新增一條分割線，意圖呈現上下文主題的分割 |
|
ul,ol |
表示無序列表，有序列表 |
|
li |
用於 ul,ol 元素中的列表項 |
|
dl,dt,dd |
表示包含一系列術語和定義說明的列表。dt 在 dl 內部表示術語，一般充當標題；dd 在 dl 內部表示定義，一般是內容 |
|
figure |
表示圖片 |
|
figcaption |
表示 figure 元素的標題 |
（1）ol 元素屬性
|
屬性名稱 |
說明 |
|---|---|
|
start |
從第幾個序列開始統計：<ol start="2"> |
|
reversed |
是否倒序排列：<ol reversed>，一半主流瀏覽器不支援 |
|
type |
表示列表的編號型別，值分別為：1、a、A、i、I |
（2）li 元素屬性
|
屬性名稱 |
說明 |
|---|---|
|
value |
強行設定某個專案的編號 |
例如：<li value="7">馬六</li> （3）<dl><dt><dd>生成說明列表
<dl>
<dt>這是一份檔案</dt>
<dd>這裡是這份檔案的詳細內容 1</dd>
<dd>這裡是這份檔案的詳細內容 2</dd>
</dl>
解釋：這三個元素是一個整體，但<dt>或<dd>並非都必須出現。 （4）<figure> <figcaption>使用插圖
<figure>
<figcaption>這是一張圖</figcaption>
<img src="img.png">
</figure>
解釋：這兩個元素一般用於圖片的佈局。
本文參與騰訊雲自媒體分享計劃，歡迎正在閱讀的你也加入，一起分享。