html 標記語言 (HyperText Markup Language)

html 語法

語言主要在建立網頁文件的基本結構,文件內實際只有文字內容,並無實質影像內容,例如,圖片並非真正置入文件中,而只是標出與圖片檔的參照位置,再透過瀏覽器的機制繪製 (render) 出來。文件以文字編輯軟體即可開啟或編寫成網頁,而檔案的副檔名通常為 htmlhtm。語法的基本規則,是由前後成對的「標籤」 (tags) 以標記 (markup) 模式圍繞內容,而標籤是以 < 作起始及 > 作結尾表示。

html 片段如:
<p>
使用標準網頁語法
</p>

<p> </p> 分別在的起始與結尾處,就是包圍內容一前一後成對的標籤,實際瀏覽的畫面只有出現「使用標準網頁語法」,標籤只是一組標記 (符號) ,不會顯示出來,如 <p></p> 標記一個段落結構。每對標籤及其內容合起來形成一組「元素」 (elements,或譯要素、組件) ,如前例的 p 就是一組元素名稱。而標準的元素都有預先定義的含意,用來加強文章結構化 (如標題、段落之類) ,所以依據結構特性,瀏覽器已預先賦予元素特定的呈現形態,也可將元素當成「物件」 (objects) 來自行設計不同的呈現風格及資料的操控。

元素組成的結構會形成堆疊

元素在文件內會形成樹狀階層 (hierarchy) 或巢狀 (nested) 的結構,類似由內而外一層一層地將內容包裝起來,或由後向前一層一層地把內容堆疊出來。

html 片段如:
<article>
 <blockquote>
  <p>
   春風不度玉門關
  </p>
  <p>
   出塞
   <strong>
    王之渙
   </strong>
  </p>
 </blockquote>
</article>

strong 元素包圍「王之渙」,第二組 p 段落元素包圍「出塞」及 strong 元素 (含「王之渙」), blockquote 元素再包圍兩組 p 元素,而 article 元素再包圍整個 blockquote 元素,這樣就形成一層一層的結構,並且由外而內相互牽連。外面一層可稱為內層的親 (parent,或譯父) 元素,而向內一層為外層的子 (child) 元素,如前例的 articleblockquote 的親元素, pblockquote 的子元素。因此,每個元素都應該有一個唯一的親元素,除了文件的根基 (root) 元素已經是最外層了當然就沒有親元素 (html 文件的根基元素就是 html 元素) ;而由前例清楚可知,子元素當然可以不只一個。

因為有層級堆疊的關係,所以可以產生前後層次的視覺效果,最內層的元素,基本上會在最前面顯示,也就是說會擋到包圍它的外層 (後面),這是理所當然地,「文字」總不能被擋在後面看不到吧。

【例示一】模擬 html 範例碼的層疊關係

元素的主要型式 block and inline

元素依其代表的結構特性,主要分為「區塊」 (block) 及「行內」 (inline) 兩個水平 (level) 。

區塊元素 (block elements) 會圍成一個區域,與其它元素內容分開,預設狀態會形成佔據整個橫向範圍的矩形區域,就像文章內一個段落一個段落一般,如前例的 p, blockquote, article 元素都屬於區塊水平 (block level) 。行內元素 (inline elements) 則不會形成整個橫向區域,僅佔有原本大小的區域,而且也會適度地折行 (換行) ,所以不一定會是完整的矩形,就像文字一個接著一個一般,通常須以區塊元素包圍,如前例的 strong 元素就屬於行內水平 (inline level) ;而單純的文字就是行內水平,如前例「出塞」、「春風不度玉門關」,通常會被另稱為文字水平 (text level) 。行內元素只能包圍行內元素,如前例的 strong 元素;區塊元素則可能包圍行內元素、區塊元素、或限定的元素,如 p 段落元素僅能包圍行內元素,因為段落裡面如果還包含段落就不合乎文章邏輯了;用在包含文章內容,如 article 元素,當然可以包圍區塊,如標題、段落、或行內元素。

區塊與行內的視覺呈現模式可參閱 block box and inline box

標記語言的標準語法

元素可有特定的「屬性」(attributes) ,是用來定義元素的特質、參照、事件等。屬性包含「屬性名稱」和「屬性值」 (value) ,以 = (等號) 連接,值以 "' (引號) 前後括起來。

html 標記語言的語法
<element-name attribute-name="AttributeValue" attribute-name="AttributeValue" …>content</element-name>
<element-name attribute-name="AttributeValue" attribute-name="AttributeValue" … >

以起始 (如 <p>) 和結尾標籤 (如 </p> 多了 / 符號表示結尾) 包圍內容,形成完整的元素。元素名稱為了一致性及方便閱讀原始碼,最好統一用小寫字母。在起始標籤中,元素名稱後面緊接著屬性,並以至少一個半形空白 (按下 space) 區隔;大部分元素,屬性不是必須要有的。屬性可能不只一個,屬性與屬性間,以至少一個半形空白區隔,屬性值則視不同內容而有其表示方式,如果沒有可表示的值就填入屬性名稱作為值,或是省略屬性值亦可。如果元素沒有包圍內容,可以省略掉結尾標籤,如 <img >

例如:

<h2 class="slogan">以輕鬆心情去認真工作。</h2>
<a href="navguide.html">網站導覽</a>
<img src="photo3.png" alt="玉山日出"></img>
<link href="style.css" rel="stylesheet"></link>

h2, a, img, link 就是元素名稱;而 class, href, src, alt, rel 等就是屬性名稱,後面 = 接著 " 前後括起來的內容就是屬性值。 img, link 元素不需要包圍內容,可省略結尾標籤。

html 註解的語法

html 的註解表示法,與 XML 相同,以 <!-- 作起始及 --> 作結尾包圍內容,這個區段的內容,瀏覽器會忽略不執行。但注意不能僅包圍屬性會產生錯誤,須包圍整個標籤,或非標籤內容。

例如:

<!--end of #main-->
<!-- <object type="application/x-shockwave-flash"> -->

其它非正式的註解語法

會被忽略的空白 (white space)

html 文件原始碼內,連續輸入一個以上空白字元 (white space characters) ,如半形 spaceentertab 等看不見的字元,預設的顯示方式是會被忽略的,實際只會執行或實現一個半形空白。而緊鄰著起始標籤後或結尾標籤前加入空白字元,瀏覽器呈現時會全部忽略。然而,要注意關鍵性的字詞,如元素名稱、屬性名稱等,名稱的中間斷行或空白是不允許的,因為很明顯地,意義會變得完全不同了 。

html 網頁文件結構

文件基本結構

<!DOCTYPE html>

<html lang="zh-tw"><!-- 指定文件的主要語系-->


<head>
 <meta charset="utf-8"><!-- html 文件的編碼指定-->
 <title>網頁的標題</title>
</head>

<body>
網頁的實際呈現內容放在這裡,如文字、背景、表格、圖片、動畫、多媒體、表單等。
</body>

</html>

文件以 html 元素 (<html></html> 之間) 所形成,其內層有二大區段,

  1. head 元素 (<head></head> 之間) :內容主要是與此文件相關資訊或參照文件的元素,通常不會顯示在瀏覽視窗內。唯有 title 元素的文字內容會顯示在一般瀏覽器的視窗標題或分頁標題上,需特別注意的是 title 元素的文字內容,將會是搜尋引擎索引關鍵字非常重要的參考,因此每一頁的 title 內容都應妥善安排。
  2. body 元素 (<body></body> 之間) :是實際網頁內容呈現的區域,與實際內容相關的元素只會在此區段出現。

html 元素是整個文件的容納區,較為特別,為所有元素的最外層元素,通常稱為根基元素 (root element) ,其寬高就像視窗的可視區域,也可以有背景顯示,及變更視窗捲軸特性。當然,一個文件只會有一組 html, head, body 元素。

UTF 統一文字編碼

由於全世界有太多種複雜的語言文字,舊時代網頁各有各的電腦編碼方式,導致同一文件內無法正確顯示多種語言文字。為了解決這個問題,於是就產生統一文字編碼方式 UTF (UCS Transformation Format) ,目前較常見的是每個字元以 8 位元 (8-bit) 編碼的 utf-8 ,涵蓋的字元也比舊式編碼多了很多。還有以 16 位元及 32 位元編碼的 utf-16, utf-32 ,當然也納入更多較複雜的文字型式。

XML 在宣告文件時就指定編碼方式,文件的第一行會看到 <?xml version="1.0" encoding="utf-8"?> 就是指定 utf-8 作為文件的編碼方式;而 html 文件則在 head 元素區段內可看到 <meta charset="utf-8">