HTML element 中文可以翻譯為 HTML 元素或元件,簡單來說就是 HTML 網頁內的各種不同功能,普遍來說是用標籤(tag)的語法來呈現,例如負責顯示網頁標題的
title element、負責顯示網頁主體內文的
body element、顯示文字的
font element 都是,這些 HTML elements 有著標準的語法規則(syntax rule),如果要把 HTML 的基礎打好,這些基本的 HTML elements 都要仔細學會,這裡舉個簡單的例子。
這是一個標準的 H1 網頁標頭 element 的語法,由開頭標籤與結尾標籤包含住一段字串,絕大多數的 HTML elements 都是這樣的規則,僅有少部份的 elements 不需要結尾標籤,例如用來顯示圖片的 img tag 或顯示換行的 br tag。
我們這裡稍微整理一些常用到的 HTML elements 給各位參考。
elements | 用途描述 |
html
| 宣告一個 HTML 網頁
|
title | 顯示網頁標題
|
meta | 宣告網頁基本資訊,包含網頁的關鍵字、內容描述、網頁作者與版權宣告 |
link | 用來嵌入外部檔案到網頁內使用 |
style
| 宣告一段 CSS 樣式
|
body | 網頁顯示內容主體
|
font | 文字
|
h1~h6
| 網頁標頭
|
b
| 粗體字
|
strong
| 粗體字
|
img
| 圖片標籤,用來顯示網頁圖片
|
span
| 區域標籤
|
div
| 區塊標籤
|
TABLE | 表格
|
Form | 表單
|
以上是一些常用的 HTML elements,當然遠遠不僅於此,每一種不同的 HTML element 都有各自不同的功能與用途,真的要仔細學會還是需要花一點點時間的。
HTML elements 內可以包含其它的 elements
這一點就相當利害,同一組 element 內可以加入其它的 elements,這也是 HTML 的基本特性,舉例來說,head 標籤內就經常包含了 title 標籤、meta 標籤、style 標籤或是 link 標籤,body 標籤內又幾乎可以包含所有要顯示的 elements,如
font、span、div、
img、
TABLE、
Form ... 等,舉個簡單的例子給各位看看。
從這個很基本的範例可以看到最外層的 html element 就包含了 head, title, body 等標籤,head 內又包含了 title 標籤,這就是所謂的 HTML element 內還可以包含其它的 elements,正因為這樣的彈性,才能讓我們設計出各式各樣不同風格與內容的網頁,今天的 HTML elements 簡介您學會了嗎?
延伸閱讀參考資料- Wibibi en: HTML Elements description