HTML 簡介

開始之前

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

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

常見的網頁仰賴許多技術(諸如 CSSJavaScriptFlashAJAXJSON)來控制用戶所見,但是以最基底的層面來說,設計師以 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 語法如何運作。

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

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

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

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

通常元素的內容中,還可以再包含其它元素。舉例來說,強調元素(「<em>」)可以包含在段落元素中,用以強調某個字詞:

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

它會顯示成這樣:

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

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

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

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

元素 — 基礎的建構區塊

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

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

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

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

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

標籤

HTML 文件是以純文字的格式撰寫。你可以使用任何讓你存成純文字格式的編輯器來寫 HTML(例如記事本、Notepad++、或 Sublime Text),但大多數的 HTML 作者偏好使用專門的編輯器,可以以顏色來突顯語法、並顯示 DOM 結構。

標籤名字可以寫成大寫或小寫,然而 W3C(維護 HTML 標準的國際組織)建議使用小寫(XHTML 則要求使用小寫)。

在 HTML 中,小於符號(「<」)和大於符號(「>」)之間的所有東西都具有特殊意義。這種標記被稱為一個標籤。請記住要撰寫結束標籤,雖然有些標籤會自動結束,但其他可能就會造成意外的錯誤。

下面是一個簡單的例子:

<p>這是段落中的文字。</p>

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

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

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

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

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

有效的範例中,內部的 <strong> 元素在外部的 <em> 元素結束前就已結束。

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

<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 中,小於符號(「<」)和大於符號(「>」)被用來當作標籤的區隔符號。當您想要在文中顯示大於符號時,您可以使用字元實體參照。你必須知道以下四種常用的字元實體參照:

  • &gt; 表示大於符號(>)
  • &lt; 表示小於符號(<)
  • &amp; 表示 & 符號(&)
  • &quot; 表示雙引號(")

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

註解與文件類型

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

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

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

在 HTML5 中僅有一種宣告方式,寫法如下:

<!DOCTYPE html>

雖然檔案類型有一段又長又複雜的歷史,但現在您只需知道,檔案類型宣告會告知瀏覽器依照  W3C 標準解釋 HTMLCSS,不要試圖以 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" "http://www.w3.org/TR/html4/strict.dtd">

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://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>

Document Tags and Contributors

Contributors to this page: irvinfly, jcchang, stingyong, moscartong, wildsky, teoli, Dawei, waynew
最近更新: irvinfly,