HTML

HTML（全名HyperText Markup Language），又譯超文本標記語言，係目前用喺網頁嘅主流標記語言。HTML元素係網頁嘅基本組成模塊。HTML嘅書寫形式一般由封閉嘅標籤構成，而且標籤會寫喺兩個尖括號裏面，譬如<html>。而內容就會寫喺封閉標籤入面。

早期嘅HTML語法被定義為較鬆散嘅規則，以幫助唔熟悉網絡出版嘅人採用。網頁瀏覽器接受咗呢個現實，並可以顯示語法唔嚴格嘅網頁。隨住時間流逝，官方標準逐漸趨於嚴格嘅語法，但係瀏覽器仍然可以顯示一啲遠遠及唔上合乎標準嘅HTML。用XML嘅嚴格規則嘅XHTML（可擴展超文本標記語言）係W3C計劃中嘅HTML接替者。雖然好多人認為佢已經成為目前嘅HTML標準，但佢實際上係一個獨立嘅、同埋HTML平行發展嘅標準。W3C目前建議用XHTML 1.1、XHTML 1.0或者HTML 4.01登網頁。

發展史

喺1982年，Tim Berners-Lee為咗令世界各地嘅物理學家能夠更加方便咁進行合作研究，建立咗HTML。Tim Berners-Lee設計嘅HTML係以純文字格式為基礎，可以進行任何文字編輯器處理，最初只有嘅少量標記（TAG）。隨住HTML使用率增加，啲人唔滿足於淨係睇到文字。喺1993年，大學生Marc Andreessen喺佢嘅Mosaic瀏覽器加入<img>標記，自此Web頁面可以出埋圖片。但啲人認為得圖片都係未夠，希望可以將任何形式嘅媒體加到去網頁度。因此HTML不斷擴充同埋發展。

HTML標記

HTML標記由幾個關鍵部件構成，包括元素（以及佢嘅屬性）、基於字符嘅數據類型、字符引用以及實體引用。另一個重要構成部件係文檔類型聲明。呢個聲明會為瀏覽器嘅渲染模式作出標準提示。以下嘅Hello World程式，係一個較為常見嘅簡單電腦程式語言入門示例，腳本語言同標記語言構成咗下面9行代碼，雖然喺HTML裏面唔係限死要開新行嘅：

<!DOCTYPE html>
<html>
  <head>
    <title>你好 HTML</title>
  </head>
  <body>
    <p>HTML 好好玩!</p>
  </body>
</html>

喺<html>同埋</html>之間嘅標籤描述咗一個網頁。介乎<body>同埋</body> 之間嘅文本係嗰頁睇得到嘅內容。呢個標記文本'<title>Hello HTML</title>'定義咗瀏覽器嘅標題。

呢個文檔聲明嘅類型系一個HTML5。如果呢個<!doctype html>聲明無被引用嘅話，大部分瀏覽器會用Quirks mode（俗稱怪異模式）對呢個HTML文檔進行渲染^[1]。

元素

HTML文檔完全係由HTML元素構成嘅。HTML元素最普遍嘅形式一般含有三樣嘢：標籤對、起始標籤、結束標籤；寫喺起始標籤裏面嘅某啲屬性；最後，任何文字以及圖形內容會處於起始標籤同結束標籤之間，又或者呢啲內容會套入其它嘅HTML元素。所謂HTML元素其實就係起始同結束標籤裏面嘅任何內容，同時亦包括起始同結束標籤。留意每個標籤都會封閉喺尖括號裏面。

一個HTML元素嘅一般形式係<tag attribute1="值1" attribute2="值2">內容</tag>。因此，用<tag attribute1="值1" attribute2="值2" />呢類形式嘅元素會被定義作為空元素。空元素可以唔附帶任何內容，譬如BR標籤或者內聯IMG標籤。一個HTML元素嘅叫法一般就係佢喺標籤入面用嘅英文名，結束標籤嘅英文名前面會帶有一個斜線字符「/」。空元素唔需要而且唔畀有結束標記。若果標籤嘅屬性無被提及，屬性會被定義為默認屬性。

示例

HTML文檔頭：<head>...</head>。通常文檔標題會喺文檔頭被定義，例如：

<head>
  <title>文檔標題</title>
</head>

細標題：HTML 文檔嘅細標題一般會定義喺由 <h1> 到 <h6> 嘅標籤入面：

<h1>細標題1</h1>
<h2>細標題2</h2>
<h3>細標題3</h3>
<h4>細標題4</h4>
<h5>細標題5</h5>
<h6>細標題6</h6>

段落：

<p>段落 1</p><p>段落 2</p>

換行：<br>。 <br> 同 <p>之間嘅分別係，「br」只會簡單咁換行，而唔會對頁面嘅語義結構產生影響。而「p」就會將頁面分成好幾個段落。「br」喺呢度其實係一個「空元素」，雖然佢可以含有屬性，但佢唔會帶有任何標籤內容，而且唔帶有結束標籤。

<p>呢個 <br> 係一個段落 <br> 同時 <br> 帶有換行符</p>

註：

<!-- 呢個係一個註釋 -->

註釋有助於理解標記處嘅含義，但就唔會顯示喺頁面上面。一般情況下佢係畀開發者睇嘅。

喺HTML裏面嘅標記元素重有另外好幾種類型：

描述文字目的嘅結構化標記，例如，<h2>高爾夫</h2>將「高爾夫」構築為一個二級標題。結構化標記唔會具體表達任何嘅渲染過程，但係大多數瀏覽器會有默認嘅樣式嚟對元素進行格式化。而內容更有可能會通過樣式表（Cascading Style Sheets，即係CSS）進一步被格式化。
描述文字外觀嘅表象標記，例如<b>boldface</b>指明可視化輸出設備需要令文字呈現「粗體」嘅視覺效果。而對於無法做出呢類行為嘅設備（譬如TTS聽覺類嘅設備），喺呢度就無更多嘅設定。例如呢兩個例子<b>粗體</b>同埋<i>斜體</i>，會同時存在其它嘅元素可以起到一樣嘅視覺效果。例如，<strong>加粗文字</strong>同埋<em>重點文字</em>，而呢類元素有時會有更強嘅語義性，以幫助閱讀代碼嘅人去理解。極之容易就可以睇出，一個以聽覺作為輸出嘅客戶端應該恰當咁解釋後面兩個元素。然而，佢哋會同對應嘅視覺表現效果產生分歧：例如，喺屏幕上對書名用斜體嚟表示係啱嘅，而對一個書名進行強調嘅屏幕閱讀器就係唔可取嘅。大多數表象標記喺HTML 4.0規範下已經被標註為過時，用樣式表進行格式化就已成慣例。
超文本標記令文檔嘅某部分可以連接到其它文檔，一個錨元素會喺文檔入面創建一個超連結，同時佢嘅href屬性會設置為超連結嘅目標URL。例如呢個HTML標記，<a href="http://wikipedia.org/">維基百科</a>會將「維基百科」設定為一個超連結。若果要將一個圖片作為一個超連結，通常會將一個「img」元素作為內容嵌喺一個「a」元素入面。例如'br'，'img'呢類只有屬性而無任何內容嘅空元素，就會係咁：<a href="http://wikipedia.org"><img src="image.gif" alt="描述文字" width="50" height="50" border="0"></a>。

參考

↑ Activating Browser Modes with Doctype

[hsivonen-1] Activating Browser Modes with Doctype

[1]