搜尋

HTML 標籤與架構

所有的網頁的 HTML 內容都是由標籤組成,呈現的「基本架構」也都差不多,差別只在於內容組成、編排、框架、樣式...等的不同 ( 就像每個人類的身體骨架結構都相同,差別在於外貌、才智、個性...等 ),這篇文章會介紹 HTML 的標籤以及架構組成。

快速導覽:

HTML 標籤

HTML 裡所有元素都是透過「標籤」組成,而元素又分成基本元素、空元素和巢狀元素,元素的標籤組成關係如下圖所示:

HTML 教學 - HTML 標籤與架構

HTML 的大部分元素都是「基本元素」,又可稱作「容器標籤」,其架構如下表所示:

寫法 功能 說明
<tag> 起始標籤 ( Opening tag ) 在「大於、小於」符號的中間放入元素名稱,代表這個元素從這裡開始。
</tag> 結束標籤 ( Closing tag ) 在「大於、小於」符號的中間放入元素名稱,但前方需要加上斜線,代表這個元素在這裡結束。
內容 ( Content ) 在起始標籤和結束標籤中間的內容。
元素 ( Element ) 由起始標籤、結束標籤和內容所組合成。

下方的 HTML 在網頁開啟後,會在網頁裡出現一個 <h1></h1> 大標題元素以及 <p></p> 內容元素。

<h1>我是大標題</h1>
<p>我是內容</p>

「沒有內容」的元素稱作「空元素」( 例如圖片<img>),也可稱作「單一標籤」,使用時只要直接使用即可,下方的 HTML 在網頁開啟後,會在網頁裡出現一張圖片。

<img src="oxxostudio/demo.jpg">

如果元素裡面還有其他元素,可以稱作「巢狀元素」,所架構出的結構稱為「巢狀結構」,下方的 HTML 會在 <p></p> 元素裡使用 <strong></strong> 標籤,將想要強調的文字框住,使其變成預設粗體字的新元素。

<p>大家好,我是 <strong>OXXO.STUDIO</strong></p>

HTML 元素屬性

HTML 所有的元素都可以設定「屬性 ( Attribute )」,屬性包含「名稱與值」,除了可以使用預設的屬性,也能使用自訂名稱的屬性,透過屬性的設定,能夠替元素增加更多不同的特色 ( 例如色彩、對齊方式、圖表的格線...等 ),屬性基本寫法如下 ( 更多屬性可以參考:HTML 元素屬性 ):

  • 元素名稱和屬性之間必須有一個空格( 如果有多個屬性,屬性之間也需要有空格 )。
  • 屬性名稱後面接著等於符號「=」,等於符號後方表示屬性的內容 (值 ),需要使用雙引號「"」包覆。

透過網頁開啟下方的 HTML,會在網頁裡出現一個超連結,超連結的連結屬性 src 指向 Google 搜尋的網頁。

<a src="https://www.google.com">連結到 Google 搜尋</a>

網頁的各個元素都會有各自的屬性,當中最常使用的是「id」和「class」屬性,id 表示「唯一的名稱」,class 表示「類別」,相關說明如下:

屬性 說明
id 元素在網頁中的唯一名稱,網頁中每個 id 只會「出現一次」,如果出現多次,則以最後一個為主。
class 元素在網頁中的類別,一個元素可以有多個類別,多個類別之間需要用一個空白隔開,不同元素也可以使用相同名稱的類別。

下方的 HTML 裡的<h1></h1>具有 id 和一個 class,<p></p>則具有兩個 class。

<h1 id="title" class="red">大標題</h1>
<p class="red small">我是內文</p>

HTML 基本架構

一個網頁的基本架構主要由<!DOCTYPE html>和三個主要元素所構成,這些元素都是「必須存在」且「不可更改其標籤」,相關說明如下:

元素 說明
<!DOCTYPE html> 定義 HTML 的類型( doctype ),只要是網頁都會需要放入這段程式碼。
<html></html> 根元素,包含了所有顯示在這個頁面上的內容。
<head></head> head 元素,網頁不會被使用者看到,但卻是必須具備的重要資訊 ( 例如網頁標題、頁面說明、CSS...等 )。
<body></body> body 元素,所有要讓使用者看到的內容。

下方的 HTML 表示一個網頁的基本架構,<head></head>裡會包含其他許多像是<meta>等不會被看到的資訊 ( 提供給瀏覽器或搜尋引擎看的 ),<body></body>裡則是要給使用者看到所有內容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
  </head>
  <body>
    <h1>OXXO.STUDIO</h1>
    <a src="https://www.google.com">連結到 Google 搜尋</a>
  </body>
</html>

HTML 的樹狀結構

從 HTML 的架構可以觀察到 HTML 其實是個層層包覆的「樹狀結構」,在樹狀結構裡,處於外層的元素稱作「父元素」,內層元素稱為「子元素」,父元素和子元素是一個「相對關係」,在身為別人的父元素的同時,可能也是另外一個元素的子元素,然而除了父元素和子元素,還有「子孫元素」、「祖先元素」和「兄弟元素」...等相對元素,例如下圖,將上述網頁的架構,採用樹狀結構的方式呈現:

HTML 教學 - HTML 標籤與架構

小結

不論是哪種網頁編輯軟體,產生的網頁基本架構幾乎都是相同,就算是自行撰寫 HTML,也必須要遵照基本的架構寫法,熟悉 HTML 架構後,就可以開始正式進行網頁的編輯。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片