HTML 筆記 | 元素與結構

HTML 最基本的單位是元素 (element)，例如以下是一個元素 p 的範例：

1	<p>My cat is very grumpy</p>

MDN 提供了圖片的詳細介紹：

圖 1：HTML 標籤說明

圖片來源：HTML 入門 - 學習 Web 開發 | MDN

起始標籤 (opening tag)：包含元素名稱，以 <元素名稱> 表示，代表元素於何時生效
結束標籤 (closing tag)：同樣包含元素名稱，但是是以 </元素名稱> 表示，代表元素於何時失效
內容 (content)：元素內容

元素分類

HTML 特別區分元素的種類，並且按照不同性質與效果有不同的定義與處理方式。

巢狀元素 (Nesting Element)

在前面的例子中，我們嘗試用段落元素來顯示一個句子，那麼如果想要特別強調我們的貓特兇，則可以使用 <strong> 元素包住想要強調的字：

1	<p>My cat is <strong>very grumpy</strong>.</p>

因為 strong 元素被包在 p 元素中，則可以稱這段為巢狀元素。

巢狀元素順序

儘管 HTML 提供編寫者自由在元素內用各種巢狀元素層層堆疊，但需要注意的是，結構必須是：

1	<元素1><元素2><元素3>...</元素3></元素2></元素1>

必須正確打開與關閉元素。

區塊元素 (Block Element) 與行內元素 (Inline Element)

就顯示在頁面上的方式，元素可以分為區塊與行內：

區塊：在頁面中單獨佔一行，前後都以一個換行分隔，例如段落、列表、導航選單
行內：放在區塊元素中的內容，非以段落或群組方式組成，例如超連結、強調元素

<em>first</em><em>second</em><em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>

其中 em 是行內元素，彼此緊挨著；p 則是區塊元素，上下皆有空間。

圖 1：HTML 標籤說明

空元素 (Empty Element)

用於插入/嵌入物件的元素，大多都是空元素。空元素並不符合起始標籤、內容、結束標籤的格式，僅有一個標籤。例如 img 用於在當前位置插入圖片檔：

1	<img src="images/firefox-icon.png" alt="Firefox logo">

常見 HTML 元素

元素	功能	類別
`<h1>`~`<h6>`	標題（從最大到最小）	區塊元素 (Block)
`<p>`	段落	區塊元素 (Block)
`<a>`	超連結	行內元素 (Inline)
`<img>`	顯示圖片	行內元素 + 空元素
`<div>`	區塊容器，不具語意	區塊元素 (Block)
`<span>`	行內容器，不具語意	行內元素 (Inline)
`<br>`	換行符號	行內元素 + 空元素
`<ul>`	無序清單	區塊元素 (Block)
`<ol>`	有序清單	區塊元素 (Block)
`<li>`	清單項目	區塊元素 (Block)
`<strong>`	強調（通常顯示為粗體）	行內元素 (Inline)
`<em>`	語意上強調（通常顯示為斜體）	行內元素 (Inline)
`<input>`	表單輸入欄位	行內元素 + 空元素
`<form>`	表單容器	區塊元素 (Block)
`<table>`	表格容器	區塊元素 (Block)
`<thead>`	表格的標題列區塊	區塊元素 (Block)
`<tbody>`	表格的資料列區塊	區塊元素 (Block)
`<tr>`	表格的單一列	區塊元素 (Block)
`<td>`	表格中的儲存格（欄）	區塊元素 (Block)
`<script>`	插入 JavaScript 程式碼	區塊元素 (Block)
`<link>`	連結外部資源（如 CSS）	行內元素 + 空元素
`<meta>`	定義網頁的 metadata（如編碼）	行內元素 + 空元素
`<title>`	設定頁面標題（出現在瀏覽器標籤上）	區塊元素 (在 `<head>` 中)

詳細說明請參考 MDN 的 HTML elements reference。

屬性 (Attribute)

在 HTML 中，元素決定了內容的性質，例如 p 就代表內容將以段落的樣式呈現。而屬性則提供更多關於該元素的附加資訊，例如：

超連結的目標網址
圖片的檔案位置與替代文字
是否預設勾選某些選項
提示訊息、表單限制

屬性不是裝飾，而是提供行為與語意。

HTML 的屬性通常出現在開始標籤中，並由名稱與值組成，語法為：

1	<標籤名稱屬性1="值" 屬性2="值"...>內容</標籤名稱>

注意到不同屬性之間會用空格分隔。

布林屬性 (Boolean attributes)

布林屬性只要寫出來就表示 True，例如 required、checked 等。以輸入元素 input，當使用 disabled 時，輸入框就會被賦予無法輸入文字的屬性。

1	<input type="text" disabled="disabled" />

或者更簡短的方法是：

1	<input type="text" disabled />

自訂屬性

架構

前面是 HTML 一些基本的元素與屬性定義與操作，但尚未真正了解一個 HTML 網頁的架構是什麼。事實上它有一個標準的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

只要 IDE 有裝上相關的插件，在一份空白的 HTML 文件中輸入 doc 就會跑出上述內容。

區塊/標籤	功能說明
`<!DOCTYPE html>`	宣告這是一份 HTML5 文件，讓瀏覽器用標準模式解析。不是 HTML 標籤，而是聲明。
`<html lang="en">`	整份 HTML 文件的根元素，所有內容都包在裡面。`lang="en"` 表示這是英文頁面，有助於搜尋引擎與輔助工具理解語言環境。
`<head>`	儲存網頁的設定與資訊（非畫面內容），包含編碼、標題、連結 CSS、meta 描述等。
`<meta charset="UTF-8">`	指定字元編碼為 UTF-8（支援各種語言文字，包括中文），避免亂碼問題。
`<meta ...>`	這是為了響應式設計（行動裝置）加入的設定，讓畫面在不同裝置寬度下正常顯示。
`<title>...</title>`	設定瀏覽器標籤上的名稱，與搜尋結果的標題文字。
`<body>`	放置實際出現在畫面上的內容，像是標題、段落、圖片、表單等等。
`</html>`	結束 HTML 文件（與 `<html>` 對應）。

head

<head> 是 <html> 中第一個子元素，用來放置設定與宣告用的元素，不會顯示在畫面中，但會影響瀏覽器行為、SEO 表現、社群分享預覽等。

用途	寫法範例	說明
編碼宣告	`<meta charset="UTF-8">`	最重要的 `meta`，避免亂碼，請務必放在最上方
響應式設計	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	調整頁面在手機、平板的呈現比例
SEO 摘要	`<meta name="description" content="這是我的個人網站首頁">`	給搜尋引擎的簡介摘要
作者資訊	`<meta name="author" content="xxx">`	指出網頁製作者，非必要但可加

link

<link> 的作用是用來將網頁與外部資源連結起來，不會出現在畫面上，但會被瀏覽器載入使用。其結構如下：

1	<link rel="..." href="..." [type="..."]>

用途	寫法範例	說明
連結 CSS 檔案	`<link rel="stylesheet" href="style.css">`	最常見用法，載入樣式表
設定 favicon	`<link rel="icon" href="/favicon.ico" type="image/x-icon">`	設定頁籤圖示（favicon）
RSS feed	`<link rel="alternate" type="application/rss+xml" href="feed.xml">`	提供 RSS 訂閱連結
字型檔案	`<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>`	提前載入自訂字型（效能優化）

script

<script> 用來在 HTML 文件中「插入 JavaScript 程式碼」，它可以：

引用外部 JavaScript 檔案
直接撰寫內嵌 JavaScript 程式
設定載入時機與模式（如延遲、異步）

一般來說，<script> 的位置多放在 </body> 之前，而引入方式有兩種，一個是載入外部 JS：

1	<script src="main.js"></script>

另一種是直接寫死在 HTML 中，但通常為了管理方便，不太會這樣做。

1
2
3

<script>
  console.log("Hello, world!");
</script>

比較

標籤	功能	是否顯示內容	是否有行為
`<meta>`	提供描述資訊	否	否
`<link>`	載入外部資源	否	否
`<script>`	載入與執行 JavaScript 程式	否	有程式行為