HTML 簡介

開始之前

為了能夠瞭解這篇文章，您應該要能駕輕就熟的使用瀏覽器。若您也知道該如何建立與編輯文字檔案，您就可以親自測試文內的範例。

當你透過瀏覽器瀏覽網頁時，你看到的是文字。大部分網頁上的文字是格式化過的文字，而非純文字。現今的網頁設計師能使用數百種不同的字體、大小、顏色、以及各種非拉丁字元（如西文、日文、俄文…）等等，瀏覽器大多能正確呈現。網頁還包含圖片、影片或背景音樂。有時會有下拉選單、搜索框或連結，讓你能進入其他頁面（不論是在同一網站內、或連到它站）。有些網站甚至能讓用戶按照自己的偏好，調整頁面的顯示方式，以符合個人所需（例如克服視覺障礙、聽障或是色弱等）。網頁通常包含一個可隨畫面捲動的內容區塊，而頁面的其餘部分則保持靜態。

常見的網頁仰賴許多技術（諸如 CSS、JavaScript、Flash、AJAX、JSON）來控制用戶所見，但是以最基底的層面來說，設計師以 HTML（超文件標示語言）來撰寫網頁。意即沒有 HTML，就沒有所謂網頁。瀏覽器在裝置上顯示網頁的過程，就從讀取 HTML 開始。

W3C (全球資訊網協會) 以及WHATWG (網頁超本文應用技術工作小組) 是負責制定 HTML 標準與規範的兩個國際機構。WHATWG 將 HTML 視為一個持續演進的「動態標準」，而 W3C 則同時進行了 HTML 的開發（HTML 5.1）及維護 HTML 的特定「快照版本」（目前的最新版是 HTML5）。

HTML 規範中定義此語言可以用鬆散的 HTML 語法、或較嚴謹的 XML （可擴充標記語言）語法撰寫。 HTML 也針對網頁應用程式（Web App）的需求有所強化。HTML 只用以描述內容的意義，而不包含樣式與格式。請搭配 CSS 來定義樣式與格式，不要試圖使用 HTML 來控制內容的呈現。

本文包含 HTML 的基本介紹，如果你想知道網頁瀏覽器背後有什麼，這裡就個好的開始。

HTML 簡史

提姆·柏納-李（Tim Berners-Lee），CERN（歐洲核子研究組織）的物理學家，在 1980 年代晚期設計出讓科學家在網際網路上共享文件的方法。在此之前，網際網路上的溝通方式僅限於使用純文字、使用諸如電子郵件、檔案傳輸協議（FTP）和 Usenet 之類的討論版等。HTML 將特定格式的內容儲存於中央伺服器，再傳輸至本地的工作站，並透過瀏覽顯示，簡化了內容存取的方式，也讓富本文（更豐富的內容，諸如格式化的文本與圖片等）得以呈現。

甚麼是 HTML？

HTML 是一種標記語言。標記在過去指編輯提供修改建議時，在書稿所寫下的記號（通常使用藍色鉛筆）。現今「標記」則有不同的意思：一種使用特定語法的語言，告訴瀏覽器該如何顯示一個網頁。更進一步，HTML 將「內容」（文字、影像、聲音、影片…等等）由「表現」（如何呈現各種內容的指示）之中抽離。 HTML 使用一組預先定義好的元素來定義內容的類型，元素由一或多個「標籤」組成，包含或表示某種內容。標籤由「小於符號」起始，而以「大於符號」作結束。

大部分瀏覽器都允許使用者觀看任何網頁的 HTML 原始碼。以 Firefox 為例，按下 Ctrl + U 快捷鍵就可以瀏覽頁面的原始碼。初學者可能會發現，幾乎無法直接看懂較複雜網頁的原始碼。但是，若您花一點時間，閱讀一些簡單網頁的原始碼，並將其與顯示的結果兩相比較，就可以較清楚的了解 HTML 語法如何運作。

舉例來說，段落元素包含起始標記「」和結束標記「」。下面範例展示由 HTML 段落元素所包圍住的文字段落。請注意，你的瀏覽器不會顯示連續兩個以上的空白：

<p>你正在開始學習 HTML。</p>

當此內容在網頁瀏覽器上顯示時，看起來會像這樣：

瀏覽器利用標籤作為該如何顯示內容的指示。

通常元素的內容中，還可以再包含其它元素。舉例來說，強調元素（「」）可以包含在段落元素中，用以強調某個字詞：

<p>你<em>正在開始</em>學習 HTML。</p>

它會顯示成這樣：

有些元素則不能包含其它元素。舉例來說，圖片標籤（「<img>」）僅能明確指示內容（圖片）的檔案名稱作為屬性：

<img src="smileyface.jpg" alt="笑臉" >

在 XHTML（構成 HTML 元素的 XML 綱要語言），通常會在大於符號前方，加上一個斜線（「/」），以表示空元素的結束。

接下來的文章將會更深入的進入此語言的概念。不過如果您想實際試試 HTML 如何運作，歡迎前往 Mozilla Thimble，一個線上的互動編輯器，協助你學習如何撰寫 HTML。除此之外，也別忘了查看 HTML 元素來了解有哪些可用的元素與它們的說明。

元素 — 基礎的建構區塊

HTML 由一系列的元素組成，元素定義了內容的語意。元素由兩個相搭配的標籤及其間的東西組成。舉例來說，「」這個元素代表段落、「<img>」元素代表圖片。HTML 元素頁面中有完整清單。

有些元素具有非常精確的含義，如「這是一張圖片」、「這是一個標題」、或「這是一個有序列表」；有些的語意則較不精確，例如「這是頁面上的一個區塊」或「這是文本的一部分」；而其他元素則用於技術所需，諸如「這是頁面識別資訊，所以別顯示出來」。無論如何，各式各樣的所有 HTML 元素都具有各自的語義。

大部分元素可能會包含其他元素，形成階層式結構。一個非常簡單但完整的網頁看起來像這樣：

<html>
  <body>
    <p>你正在挑戰 HTML 第一關。</p>
  </body>
</html>

如你所見，<html> 元素包圍住文件其餘的部分， <body> 元素則包圍住頁面內容。這種結構通常被想像成樹枝（在這個範例中的 <body> 和 元素）從樹幹（<html>）上生長出來。這個階層的結構，被稱為 DOM （文件物件模型）。

在這個例子中，有一個開始標籤和結束標籤。結束標籤與開始標籤相同，只在小於符號前多了一個斜線。大多數 HTML 元素都需同時使用開始與結束標籤來寫。想要撰寫正確的程式，你必須維持開始與結束標籤的正確巢狀結構。也就是，結束標籤必須依開始標籤的反向順序排列。

這是一個有效的程式範例：

<em>我<strong>就是</strong>這麼想</em>。

而這是一個無效的程式範例：

<!--無效:--> <em>我<strong>就是</em>這麼想</strong>。

有效的範例中，內部的  元素在外部的  元素結束前就已結束。

某些元素不包含任何文本內容或其他元素。這些都是空元素，不需要結束標籤。這是一個例子：

<img src="smileyface.jpg" alt="Smiley face" >

在 XHTML 模式中，空元素的尾端會以斜線標示結束。

<img src="smileyface.jpg" alt="Smiley face" />

在 HTML 中，斜線具有 Firefox 尚未實作的意義，因此不該使用。在 HTML 模式下，請不要結束空元素。

屬性

開始標籤內可能會包含額外的資訊，一如前例。這樣的資訊被稱為屬性。屬性通常由兩部分組成：

屬性的名稱
屬性的值

有些具備布林值的屬性，可以簡寫為僅留屬性名稱、或在屬性值處留空。因此以下範例內的三行，具有相同意義：

<input required="required">

<input required="">

<input required>

若屬性的值僅爲一個單詞或數字，可以直接寫上；但包含空白符號的值則必須以引號括住（單引號「'」或雙引號「"」皆可）。多數開發者會總是會使用引號，來避免如下的錯誤：

<p class=foo bar> <!--注意，這裡與你想的不太一樣-->

在上述範例中，屬性值應該要是「foo bar」；但由於沒有引號，程式被瀏覽器理解成：

<p class="foo" bar="">

字元實體參照

字元實體參照（常稱作 entities）用於顯示在 HTML 中具有特殊意義的字元。舉例來說，在 HTML 中，小於符號（「<」）和大於符號（「>」）被用來當作標籤的區隔符號。當您想要在文中顯示大於符號時，您可以使用字元實體參照。你必須知道以下四種常用的字元實體參照：

> 表示大於符號（>）
< 表示小於符號（<）
& 表示 & 符號（&）
" 表示雙引號（"）

還有許多其他字元實體參照，但這四種是最重要的，因為它們在 HTML 中都有特殊意義。

註解與文件類型

HTML 中有個嵌入註解的機制，當瀏覽器繪製網頁時，這些註解不會顯示。當您想要解釋一段程式、留下註解供他人參考、或是留下對自己的提醒時，註解都很有用。 HTML 的註解形式是以特殊符號包括如下：

<!-- 這是一段註解文字 -->

除了標籤、文字內容、以及 entities 外，HTML 文件必須在第一行包含一個 doctype 宣告。doctype 宣告不是 HTML 標籤，其作用是告知瀏覽器目前頁面使用的 HTML 版本。

在 HTML5 中僅有一種宣告方式，寫法如下：

<!DOCTYPE html>

雖然檔案類型有一段又長又複雜的歷史，但現在您只需知道，檔案類型宣告會告知瀏覽器依照 W3C 標準解釋 HTML 與 CSS，不要試圖以 90 年代的 Internet Explorer 風格來呈現文件。（請參考怪異模式（quirks mode））

在 HTML 4.01，doctype 如其 SGML（標準通用標記語言）的基礎一樣，作為 DTD（文件型態定義）。在 HTML 4.01 中有三種不同的 doctype 定義：strict、transitional 與 frameset。

strict DTD 包含所有 HTML 元素與屬性，但不包含表現層與被棄用的屬性（例如 font）。頁框（Framesets）也不被允許。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

transitional DTD 包含所有 HTML 元素與屬性，包含表現層與被棄用的屬性（例如 font）。頁框（Framesets）仍不被允許使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

frameset DTD 允許頁框，其餘與 HTML 4.01 Transitional 相同。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">

一份簡短但完整的文件

綜合以上所述，以下是一個簡短的 HTML 範例文件。您可以將此原始碼複製到文字編輯器中，並把它儲存為 myfirstdoc.html，接著使用瀏覽器打開它。存檔時要記得確認以 UTF-8 編碼儲存。由於沒有加入任何樣式，這份文件會看起來相當樸素，但這只是一個小小的開始。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>一份迷你文件</title>
</head>
<body>
  <h1>文件中的主標題</h1>
  <p>老媽我在這，我正在寫 <abbr title="Hyper Text Markup Language">HTML</abbr>！</p>
</body>
</html>