結構 (structure) 元素是 HTML 最重要的一個部份,數量也是最多的一類,結構元素將網頁內容組織成有系統的結構,用來標示那些內容是文字、清單或表格等等。結構元素包括5大項目:文字、清單、表格、連結與物件,如下表總共有 46 個元素。
分類 | 文字(text) | 清單 (list) | 表格 (table) | 連結 (link) | 物件 (object) |
數量 | 19 | 8 | 10 | 3 | 6 |
元素名稱 |
em
strong
dfn
code
samp
kbd
var
cite
abbr
acronym
blockquote
q
sub
sup
p
br
pre
ins
del |
ul
ol
li
dl
dt
dd
dir
menu |
table
caption
thead
tbody
tfoot
colgroup
col
tr
th
td |
a
link
base |
img
object
param
applet
map
area |
接著我將概略介紹各類結構元素,詳細內容請參閱 HTML 的規範。
文字類
最常使用的大就是 p 元素,代表的是段落 (paragraph) ,一個段落代表的是作者的思想或論點,與文字如何呈現沒有任何關係,可以是左右對齊 (double-justified) 或是靠左對齊 (left-justified) ,結構上都是相同的。
如果要強制在段落中的文字分行 (line break) ,則是使用 br 元素。不然瀏覽器會在英文段落中空白或連字符號 (hyphen) 的地方自動分行,中文段落則是每個字的地方都能自動分行。如果不想要在空白的地方分行,則可以使用 實體,如果要指定文字在何處分行,則在英文字中插入­實體。
另外,HTML 文件中的 Carriage Return (\r) 和 Line Feed (\n) 控制字元都會變成空白字元,如果想讓這些控制字元原汁原味呈現,那麼就要使用 pre 元素,pre 是指預先編排 (preformatted)的
意思。
對於內容的變動,使用 ins 元素標示新增的內容,使用 del 元素標示刪除的內容。對於引用的內容,HTML 提供兩個元素標示引用資料, blockquote 元素用於區塊元素,q 元素則用於行內元素。
文字上若需要下標 (subscript) 與上標 (superscript) 的文字標示,使用 sub 元素標示下標符號,上標符號則使用 sup 元素。
最後介紹文字類中的詞組元素 (phrase elements),這些都是用來組織文字片段的結構,總共有10個。
- em:強調
- strong:比em更強調
- dfn:定義
- code:程式碼片段
- samp:程式碼的輸出結果
- kbd:使用者的輸入
- var:變數或引數
- cite:引用或參考
- abbr:縮寫詞
- acronym:首字母縮略字
清單類
HTML 提供三種清單結構,分別是無次序 (unordered)、有次序 (ordered) 與定義 (definition) 。無次序清單使用 ul 元素,而有次序清單使用 ol 元素,不論有無次序,這兩種元素都要包含一個以上的清單項目,也就是 li 元素。
定義的清單結構是使用 dl 元素,dl 元素中不是包含 li 元素,而是使用名稱 (term) 與描述 (description) 的組合當作清單項目,名稱和描述個別使用的是 dt 元素和 dd 元素。
在清單類中還有兩個 dir 元素和 menu 元素,dir 使用來做路徑清單,而 menu 則用來做選單清單,這兩個元素 HTML 規格已經標示為棄用 (deprecated),建議改用 ul 元素取代。
表格類
表格類元素的使用大概是僅次於文字類,表格除了可以呈現資料外,也可以用來做排版設計。一個表格由 table 元素組成, table 元素內有 cpation 元素顯示表格標題,表格的每列 (row) 是由 tr 元素組成,表格中最小的單位則是單元格 (cell),單元格使用的是 td 或 th 元素。
一個表格中包含多列,我們可以群組這些列, HTML 中有三種元素可以使用,thead 元素是表頭 (table header),tbody 是表體 (table body) ,thead是表尾 (table footer)。這些群組元素的用途在於,如果有一個很多列的表格,表體的內容會橫跨多個頁面,但表頭和表尾則會固定在頁面上顯示欄 (column) 資訊。
除了表格列群組,欄也可以群組,使用 colgroup 和 col 元素,這些用途是在設定欄的寬度和樣式,平常很少使用。
連結類
一個連結包含兩個部分,錨點 (anchor)和方向 (direction),連結的方向是從來源錨點 (source anchor) 指向目標錨點 (destination anchor)。
在文件標頭設定連結是使用 link 元素,不會顯示給使用者,而在文件主體中使用連結則是用 a 元素。 link 元素通常是設定外部樣式表,或是設定個網頁之間的關係。 一般在頁面上看到的超連結都是指 a 元素,將頁面上的資訊連結至目標錨點。
另外還有一個 base 元素, base 元素是用來設定路徑資訊,當使用相對路徑時,利用 base 元素指定參考的基礎路徑位置,這個元素必須放在文件標頭裡面。
物件類
物件類的元素是用來組織多媒體資訊,如圖像、媒體播放器、Java Applet等,最常使用的是 img 元素,img 元素用來插入圖像到 HTML 文件之中。此外,插入圖像也可以使用 object 元素,object 元素是通用類型的物件,通常是用來嵌入媒體播放器,物件執行時期的參數設定使用 param 元素。目前,applet 標示為棄用 (deprecated),建議 Java Applet 使用 object 元素。
在使用圖像的時候, HTML 提供影像地圖的功能,利用 map 和 area 元素設定圖像上特定區域的動作,通常是用來設定圖像上的超連結。
###