2025-09-04 HTML2——常用標簽與屬性

文章目錄

1 文本標簽
- 1.1 標題 (`<h1>` - `<h6>`)
- 1.2 段落 (`<p>`)
- 1.3 文本格式化
- 1.4 列表
- - 1.4.1 無序列表 (`<ul>`)
  - 1.4.2 有序列表 (`<ol>`)
- 1.5 表格 (`<table>`)
2 屬性
- 2.1 屬性值
- 2.2 全局屬性
- 2.3 特定元素的屬性
- 2.4 布爾屬性
- 2.5 自定義屬性
- 2.6 事件處理屬性
3 帶有屬性的標簽
- 3.1 鏈接 (`<a>`)
- 3.2 圖像 (`<img>`)

為簡潔顯示，以下示例均為 <body>...</body> 中的內容。

1 文本標簽

1.1 標題 (`<h1>` - `<h6>`)

標題標簽用于定義不同級別的標題。

標簽：<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
作用：
- <h1> 定義最高級別的標題，字體最大、最粗。
- <h6> 定義最低級別的標題，字體最小。
- 數字越小，標題級別越高，字體越大。
顯示效果：瀏覽器會根據標簽的級別，自動調整字體大小和加粗效果。

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

1.2 段落 (`<p>`)

段落標簽用于創建段落文本。

標簽：<p>
作用：定義一個段落，將文本內容包裹在其中。
顯示效果：段落文本的字體比標題小，且默認不加粗。

<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>這是一個段落。</p>

1.3 文本格式化

這些標簽用于改變文本的樣式，增強表達力。

加粗：
- <b>：用于加粗文本，無語義含義。
- <strong>：同樣用于加粗文本，但具有重要性或強調的語義含義。在實際開發中，更推薦使用 <strong>。
斜體：
- <i>：用于斜體文本，無語義含義。
- <em>：同樣用于斜體文本，但具有強調的語義含義。
其他格式：
- <u>：下劃線。
- <s>：刪除線。
- <sub>：上標。
- <sup>：下標。

<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>

1.4 列表

列表標簽用于組織和展示結構化的信息。

1.4.1 無序列表 (`<ul>`)

標簽：<ul>（根元素）和 <li>（列表項）
作用：創建一個沒有特定順序的列表，每個列表項前通常會顯示一個圓點。

<h4>無序列表:</h4>
<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>

1.4.2 有序列表 (`<ol>`)

標簽：<ol>（根元素）和 <li>（列表項）
作用：創建一個有特定順序的列表，列表項前通常會顯示數字。

<ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol><ol start="50"><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>

1.5 表格 (`<table>`)

表格標簽用于創建表格，清晰地展示結構化數據。

標簽：
- <table>：表格的根元素。
- <tr>：定義表格中的行（Table Row）。
- <th>：定義表頭單元格（Table Header），通常文字會加粗居中。
- <td>：定義數據單元格（Table Data）。
作用：將數據以行和列的形式進行排列。
屬性：
border：可以在 <table> 標簽中添加 border 屬性來給表格添加邊框，例如 <table border="1">。

<p>每個表格從一個 table 標簽開始。 每個表格行從 tr 標簽開始。每個表格的數據從 td 標簽開始。
</p><h4>一列:</h4>
<table border="1"><tr><td>100</td></tr>
</table><h4>一行三列:</h4>
<table border="1"><tr><td>100</td><td>200</td><td>300</td></tr>
</table><h4>兩行三列:</h4>
<table border="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr>
</table>

2 屬性

屬性是 HTML 元素提供的附加信息，通常出現在 HTML 標簽的開始標簽中，用于定義元素的行為、樣式、內容或其他特性。

屬性總是以 name="value" 的形式寫在標簽內，name 是屬性的名稱，value 是屬性的值。

2.1 屬性值

屬性值應該始終被包括在引號內，雙引號是最常用的，不過使用單引號也沒有問題。

使用雙引號：

<a href="https://www.runoob.com">Link</a>

使用單引號：

<a href='https://www.runoob.com'>Link</a>

在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：

name='John "ShotGun" Nelson'

或者：

<a href="https://www.runoob.com?q='search'">Link</a>

屬性和屬性值對大小寫不敏感。不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。而新版本的 (X)HTML 要求使用小寫屬性。

下面列出了適用于大多數 HTML 元素的屬性：

屬性名	適用元素	說明
`id`	所有元素	為元素指定唯一的標識符。
`class`	所有元素	為元素指定一個或多個類名，用于 CSS 或 JavaScript 選擇。
`style`	所有元素	直接在元素上應用 CSS 樣式。
`title`	所有元素	為元素提供額外的提示信息，通常在鼠標懸停時顯示。
`data-*`	所有元素	用于存儲自定義數據，通常通過 JavaScript 訪問。
`href`	`<a>`, `<link>`	指定鏈接的目標 URL。
`src`	`<img>`, `<script>`, `<iframe>`	指定外部資源（如圖片、腳本、框架）的 URL。
`alt`	`<img>`	為圖像提供替代文本，當圖像無法顯示時顯示。
`type`	`<input>`, `<button>`	指定輸入控件的類型（如 `text`, `password`, `checkbox` 等）。
`value`	`<input>`, `<button>`, `<option>`	指定元素的初始值。
`disabled`	表單元素	禁用元素，使其不可交互。
`checked`	`<input type="checkbox">`, `<input type="radio">`	指定復選框或單選按鈕是否被選中。
`placeholder`	`<input>`, `<textarea>`	在輸入框中顯示提示文本。
`target`	`<a>`, `<form>`	指定鏈接或表單提交的目標窗口或框架（如 `_blank` 表示新標簽頁）。
`readonly`	表單元素	使輸入框只讀。
`required`	表單元素	指定輸入字段為必填項。
`autoplay`	`<audio>`, `<video>`	自動播放媒體。
`onclick`	所有元素	當用戶點擊元素時觸發 JavaScript 事件。
`onmouseover`	所有元素	當用戶將鼠標懸停在元素上時觸發 JavaScript 事件。
`onchange`	表單元素	當元素的值發生變化時觸發 JavaScript 事件。

2.2 全局屬性

全局屬性是所有 HTML 元素都可以使用的屬性。

id：為元素指定唯一的標識符。

<div id="header">This is the header</div>

class：為元素指定一個或多個類名，用于 CSS 或 JavaScript 選擇。

<p class="text highlight">This is a highlighted text.</p>

style：用于直接在元素上應用 CSS 樣式。

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title：為元素提供額外的提示信息，通常在鼠標懸停時顯示。

<abbr title="HyperText Markup Language">HTML</abbr>

data-*：用于存儲自定義數據，通常通過 JavaScript 訪問。

<div data-user-id="12345">User Info</div>

2.3 特定元素的屬性

某些屬性僅適用于特定的 HTML 元素。

href（用于 <a> 和 <link> 元素）：指定鏈接的目標 URL。

<a href="https://www.example.com">Visit Example</a>

src（用于 <img>, <script>, <iframe> 等元素）：指定外部資源的 URL。

<img src="image.jpg" alt="An example image">

alt（用于 <img> 元素）：為圖像提供替代文本，當圖像無法顯示時顯示。

<img src="image.jpg" alt="An example image">

type（用于 <input> 和 <button> 元素）：指定輸入控件的類型。

<input type="text" placeholder="Enter your name">

value（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。

<input type="text" value="Default Value">

disabled（用于表單元素）：禁用元素，使其不可交互。

<input type="text" disabled>

checked（用于 <input type="checkbox"> 和 <input type="radio">）：指定復選框或單選按鈕是否被選中。

<input type="checkbox" checked>

placeholder（用于 <input> 和 <textarea> 元素）：在輸入框中顯示提示文本。

<input type="text" placeholder="Enter your email">

target（用于 <a> 和 <form> 元素）：指定鏈接或表單提交的目標窗口或框架。

<a href="https://www.example.com" target="_blank">Open in new tab</a>

2.4 布爾屬性

布爾屬性是指不需要值的屬性，它們的存在即表示 true，不存在則表示 false。

disabled：禁用元素。

<input type="text" disabled>

readonly：使輸入框只讀。

<input type="text" readonly>

required：指定輸入字段為必填項。

<input type="text" required>

autoplay（用于 <audio> 和 <video> 元素）：自動播放媒體。

<video src="video.mp4" autoplay></video>

2.5 自定義屬性

HTML5 引入了 data-* 屬性，允許開發者自定義屬性來存儲額外的數據。

data-*：用于存儲自定義數據，通常通過 JavaScript 訪問。

<div data-user-id="12345" data-role="admin">User Info</div>

2.6 事件處理屬性

HTML 元素可以通過事件處理屬性來響應特定的事件，如點擊、鼠標懸停等。

onclick：當用戶點擊元素時觸發。

<button onclick="alert('Button clicked!')">Click Me</button>

onmouseover：當用戶將鼠標懸停在元素上時觸發。

<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>

onchange：當元素的值發生變化時觸發。

<input type="text" onchange="alert('Value changed!')">

3 帶有屬性的標簽

3.1 鏈接 (`<a>`)

<a href="URL" target="_blank" rel="noopener" download="example.pdf" title="訪問 Example 網站">鏈接文本</a>

<a> 標簽用于創建超鏈接，它有兩個非常重要的屬性：

href：指定鏈接的目標 URL。當用戶點擊鏈接時，瀏覽器會跳轉到 href 指定的頁面。
target：規定鏈接的打開方式。
- _blank：在新標簽頁中打開鏈接。
- _self：在當前標簽頁中打開鏈接（這是默認值）。
- _parent：在父框架中打開鏈接。
- _top：在整個窗口中打開鏈接，取消任何框架。
rel：定義鏈接與目標頁面的關系。
- nofollow：表示搜索引擎不應跟蹤該鏈接，常用于外部鏈接。
- noopener：防止新的瀏覽上下文（頁面）訪問window.opener屬性和open方法。
- noreferrer：不發送referer header（即不告訴目標網站你從哪里來的）。
- noopener noreferrer：同時使用noopener和noreferrer。
noopener 和 noreferrer防止在新標簽中打開鏈接時的安全問題，尤其是使用 target="_blank" 時。
download：提示瀏覽器下載鏈接目標而不是導航到該目標。

如果指定了文件名，瀏覽器會提示下載并保存為指定文件名。
title：定義鏈接的額外信息，當鼠標懸停在鏈接上時顯示的工具提示。

<a href="https://www.runoob.com/" target="_blank">訪問菜鳥教程!</a><p>如果你將 target 屬性設置為 &quot;_blank&quot;, 鏈接將在新窗口打開。</p>

3.2 圖像 (`<img>`)

<img src="url" alt="some_text" width="304" height="228">

<img> 標簽用于在網頁中嵌入圖片，它是一個單標簽。

src：指定圖像的路徑。可以是本地文件路徑，也可以是網絡 URL。
alt：定義當圖像無法加載時顯示的替代文本。這個屬性非常重要，有助于搜索引擎優化（SEO）和提升無障礙性。
width 和 height：設置圖片的寬度和高度。

假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。

<p>一個圖像:<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
</p><p>一個動圖:<img src="hackanm.gif" alt="Computer man" width="48" height="48" />
</p><p>注意插入動圖的語法和靜態圖的語法是一樣的。</p>