HTML5 概述及基本語法
- 2019 年 12 月 26 日
- 筆記
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>
解釋：這兩個元素一般用於圖片的布局。
