HTML

HTML是網頁一切的基礎。HTML是WWW的核心語言。

HTML是HyperText Markup Language的縮寫，中文常常翻譯成超文件標示語言，用HTML編輯出來的檔案是我們所說的網頁(Web Page)，換句話說，網頁就是HTML文件(document)。HTML也是Web的三個基礎運作機制之一(另外兩個是URI與HTTP)，想要學習Web Application的第一步就是認識HTML。

這裡所說的HTML是指HTML 4.01，這是HTML第4版的修訂版本。

HTML是什麼？

HTML是一種語言，由 Tim Berners-Lee發明，讓作者(authors)發佈資訊到全球資訊網上，使得電腦可以解讀這些資訊。HTML是SGML的應用之一，SGML指的是標準通用標示語言(Standard Generalized Markup Language)，使用標示(mark up)來表示內容的結構、顯示和語意的資訊，如何使用這些標示的語法和結構會定義在文件類型定義(Document Type Definition, DTD)之中，DTD最重要的內容有兩個：元素(Elements)和屬性(Attributes)。

如何閱讀DTD？在HTML中的第3.3節介紹DTD的定義方式，有興趣者可以參閱3.3 How to read the HTML DTD

DTD會定義許多元素類型(element type)，也就是不同的元素名稱，在HTML中總共有91個元素，注意元素名稱是不區分大小寫(case-insensitive)，每個Element包含三個部分組成：開始標記(start tag)、內容(content)與結束標記(end tag)，注意Element不是Tag這個觀念，因為有些元素類型並不需要開始標記或結束標記，但Element不因為沒有標記而不存在，例如html, head, body這3個Tag可以不存在HTML當中，但瀏覽器一樣可以解析HTML。

每個元素具有許多性質(properties)，稱為屬性(attributes)，也就是不同的屬性名稱，這些屬性將具有值(value)。DTD同樣會定義許多屬性的資料類型(data type)，設定這些屬性必須給符合資料類型的值，而且都必須用單引號或雙引號給值標示起來，注意屬性名稱和值是不區分大小寫(case-insensitive)。

HyperText

HTML文件結構

一個HTML檔案的內容可以分成3個部分：HTML版本、標頭(head)和正文(body)。

HTML版本以文件類型宣告(document type declaration)指定，位於HTML檔案內容的最前面，就是用<!DOCTYPE HTML PUBLIC...開始的那一列。在HTML第4版中定義了三種不同類型：

    • HTML 4.01 Strict DTD (嚴謹文件類型定義)

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

    • HTML 4.01 Transitional DTD (鬆散文件類型定義，也稱為過渡性文件類型定義)

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

    • HTML 4.01 Frameset DTD (框架頁文件類型定義)

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

這三種類型的差異在於元素支援程度的不同，例如HTML 4.01 Frameset DTD有支援框架頁(frameset)的元素功能，一般的HTML文件通常使用HTML 4.01 Transitional DTD類型，至於HTML 4.01 Strict DTD則因為限制較多的元素而比較少使用。以支援的元素數量來看：Frameset>Transitional>Strict。

HTML的第1.1節中提到元素可以分成3大類，分別是結構元素、外觀元素與互動元素。另外有一部分元素屬於HTML文件的全域結構(global structure)，這部分是構成HTML的基礎元素。

基礎元素，總共14個元素

    • html

    • head

      • title

      • meta

    • body

      • 群集元素

        • div

        • span

      • 標題

        • h1

        • h2

        • h3

        • h4

        • h5

        • h6

      • 地址

        • address

語言資訊，總共1個元素

    • bdo

結構(structure)元素, 46

文字(Text)，總共19個元素

    • 組織文字(structured text)

      • 詞組元素(phrase elements)

        • em

        • strong

        • dfn

        • code

        • samp

        • kbd

        • var

        • cite

        • abbr

        • acronym

      • 引用(quotations)

        • blockquote

        • q

      • 標著(subscripts, superscripts)

        • sub

        • sup

    • 行與段落

      • 段落(paragraph)

        • p

      • 分行

        • br

      • 預先格式

        • pre

    • 文件變更

      • ins

      • del

清單(Lists)，總共8個元素

    • 無序清單(Unordered lists)

      • ul

    • 有序清單(Ordered lists)

      • ol

    • 清單項目(list items)

      • li

    • 定義清單(Definition lists)

      • dl

    • 定義名稱(Definition term)

      • dt

    • 定義描述(Definition description)

      • dd

    • 目錄清單(directory lists)

      • dir

    • 目錄(menu)

      • menu

表格(Tables)，總共10個元素

    • 表格

      • table

    • 表格標題

      • caption

    • 列群組

      • thead

      • tbody

      • tfoot

    • (欄群組)行群組

      • colgroup

      • col

    • 表格列

      • tr

    • 單格(table cell)

      • th

      • td

外觀(presentation)元素, 17

樣式表(Style Sheet)，總共1個元素

    • style

在HTML文件使用樣式表的方式有三種：

    1. 行內樣式(inline style)

    2. <div style="font-size: 12pt;"></div>

    3. 標頭樣式(header style)，或稱為嵌入樣式(embedded style)

    4. <style type="text/css">div{ font-size: 12pt; }</style>

    5. 外部樣式(external style)，或稱為連結樣式(linked style)

    6. <link href="external_style.css" rel="stylesheet" type="text/css" />

行內與標頭樣式是將樣式表放入HTML文件當中，而外部樣式的方式是將樣式表與HTML文件分離。

格式(Format)，總共12個元素

    • 對齊(alignment)

      • center

    • 字體樣式(font style)

      • tt

      • i

      • b

      • big

      • small

      • strike

      • s

      • u

    • 字體(font)

      • font

      • basefont

    • 尺(rule)

      • hr

互動(interactivity)元素, 13

表單(Forms)，總共11個元素

    • form

    • input

    • button

    • select

    • optgroup

    • option

    • textarea

    • isindex

    • label

    • fieldset

    • legend

腳本(Scripts)，總共2個元素

    • script

    • noscript

元素列表

參考資料：http://www.w3.org/TR/html401/index/elements.html

在HTML 4.01規範總共有91個元素，如下表所述，表中各英文字母的說明(Legend)為：

    • O=選用(Optional)

    • F=禁止(Forbidden)

    • E=無(Empty)

    • D=不適用(Deprecated)

    • L=鬆散文件類型定義(Loose DTD)

    • F=框架頁文件類型定義(Frameset DTD)