認識 HTML
網頁是一個 HTML 文件，由 HTML 語言所撰寫而成的檔案，HTML全名為 HyperText Markup Language ，稱為超文字標記語言，是屬於一種標準通用標記語言 (Standard Generalized Markup Language, SGML) ，所謂標記語言指的是用標示 (mark up) 表示內容的結構、顯示和語意的資訊。HTML 標記語言主要有兩個概念：元素 (element) 和屬性 (attribute)，這些都定義在文件宣告定義 (Document Type Definition, DTD)裡面，每個元素具有多個屬性，元素由起始標籤、內容、結束標籤3個部分組成。元素名稱和屬性名稱都是不區分大小寫 (case-insensitive)。
不過注意到，HTML 元素和標籤是不一樣的概念，元素不一定需要起始標籤或結束標籤，例如 body, head, html, tbody這四個就允許完全不需要起始和結束標籤，但這些元素依舊存在於 HTML 文件中，有些元素則允許忽略結束標籤。另外，有一部分元素是不需要結束標籤，而且內容要為空。
HTML 文件是由 HTML 元素所組成，HTML4 總共有91個元素，我們可以依據不同用途分成四大類：基礎元素、結構元素、外觀元素與互動元素。這裡我們會先介紹 HTML 文件和基礎元素。
一個 HTML 文件可以分成三部分：版本資訊、文件標頭 (document head) 與文件主體 (document body) 。版本資訊是 HTML 文件的第一列，目前有三種文件類型宣告 (document type declaration) 指定版本資訊，分別是：
嚴謹的 (strict) 宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
過渡的 (transitional) 宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
框架組的 (frameset) 宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
這三個版本資訊的差異在於 HTML 元素支援的數量不同，參閱下表所述：
| strict | transitional | frameset | |
| 支援元素數量 | 77 | 88 | 91 |
接著版本資訊是 html 元素，代表 HTML 文件， html 元素內包括 head 與 body 兩個區塊。head 區塊由 head 元素組成文件標頭，是用來儲存文件的資訊，通常不會顯示給使用者看，所以只要不屬於內容的資料都應該在 head 區塊中。而 body 區塊則由 body 元素組成文件主體，這部分是文件的內容本身，寫網頁絕大多數都是在編輯 body 區塊，使用者看的網頁也就是 body 元素的內容。
一個 HTML 文件會像下面這樣的結構：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- head 區塊：文件標頭 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>這是標題</title>
</head>
<body>
<!-- body 區塊：文件主體 -->
</body>
</html>
注意，DTD中定義 html 元素中必須包含一個 head 元素與 body 元素，如果你在 HTML 文件中差入多個 head 標籤內容，還是只會有一個 head 元素， body 元素也是相同的行為，這其實說明 HTML 元素和標籤是不一樣的概念。
HTML 基礎元素如下表所示，加上 html 元素自己總共有 14 個基礎元素。
| 文件標頭 | 文件主體 | |
| 組成的元素 | head | body |
| 所屬的元素 | title meta | 群集：div, span 標題：h1, h2, h3, h4, h5, h6 address |
這裡還必須介紹一個觀念，文件主體內的元素可以分成兩大類，區塊 (block-level) 元素和行內 (inline ，或稱 text-level) 元素。區塊元素中可以包含行內元素和其他區塊元素，而行內元素只能包含行內元素或資料，兩類的內容模型 (content model) 不太一樣。區塊元素通常從新的一列開始放置，而行內元素則會在同一列中延續放置，所以才稱為「行內」。這兩類元素對於語言方向性的行為也有所不同，這部分將另外說明。
###
沒有留言:
張貼留言