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

HTML

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

發展史 編輯

 
一段用彩色標示嘅HTML原始碼

喺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元素其實就係起始同結束標籤裏面嘅任何內容,同時亦包括起始同結束標籤。留意每個標籤都會封閉喺尖括號裏面。

一個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>

參考 編輯