HTML（超文字標記語言）標籤的屬性為網頁元素定義了額外的資訊，用於調整元素的行為或外觀。每個HTML標籤都可以有多個屬性，但某些屬性只適用於特定的標籤。屬性提供了豐富的方式來控制HTML元素的行為和表示，是Web開發中不可或缺的部分。透過合理使用這些屬性，可以提升網頁的功能性、可訪問性和使用者體驗。
參考文件：
1、class
定義元素的類名，用於引用CSS樣式或JavaScript指令碼中的元素。class屬性是一種非常重要的屬性，它用於指定元素的類名（classname）。透過使用class屬性，可以為HTML元素分配一個或多個類名，這些類名之後可以在CSS中被引用來應用樣式，或者在JavaScript中用於操作DOM。
1）單個類名
可以為元素分配單個類名，用於指定特定的樣式規則。
<div class="container"></div>
2）多個類名
元素可以同時擁有多個類名，各個類名之間用空格分隔。可以將多個CSS規則組合應用到同一個元素上。
<div class="container highlight"></div>
2、id
指定元素的唯一ID，用於CSS樣式和JavaScript。id屬性是一種全域性屬性，可以用在任何HTML標籤上。id屬性為元素指定了一個唯一的識別符號（ID）。這個ID在整個文件中必須是唯一的，用於標識單獨的元素。
<div id="uniqueId">這裡是內容</div>
3、style
直接在元素上應用CSS樣式。style屬性用於為單個HTML元素指定內聯樣式。透過使用style屬性，可以直接在元素上應用CSS（層疊樣式表）規則，而無需使用外部或內部樣式表。這種方式允許開發者快速應用樣式，但一般推薦使用外部或內部樣式表進行樣式管理，因為這有助於保持內容與表現的分離，使得樣式的維護和管理更加高效。
<p style="color: blue; font-size: 20px;">這是一個帶有內聯樣式的段落。</p>
4、title
提供有關元素的額外資訊，通常以工具提示的形式顯示。title 屬性是一個非常實用的特性，它為元素提供額外的資訊。這個屬性通常被用於提供關於元素的更多細節，這些細節在使用者將滑鼠懸停在元素上時顯示。title 屬性可以被新增到幾乎所有的 HTML 標籤上，但最常見的用法是在<a>、<abbr>、<iframe>、<img> 和 <link> 等標籤中。
title的用法：
|
標籤 |
用法 |
|
連結 ( |
為連結提供額外資訊，例如說明連結將要帶使用者前往的內容。 |
|
縮寫 ( |
解釋縮寫或首字母縮略詞的完整形式。 |
|
圖片 ( |
為視覺受損的使用者提供圖片內容的文字描述，通常與 alt 屬性一起使用來增強無障礙性。 |
|
表格單元 ( |
為表格中的資料提供額外資訊或上下文。 |
使用示例：
<a href="https://www.example.com" title="訪問示例網站">示例網站</a> <abbr title="Hypertext Markup Language">HTML</abbr> <img src="logo.png" alt="公司logo" title="我們的公司logo"> <td title="這是年度總銷售額">¥500,000</td>
5、src
src 屬性在HTML中用於指定嵌入內容的來源。它是一個常用於<img>, <script>, <iframe>, <audio>, 和 <video> 標籤的屬性，用來設定引用外部資源的URL。這個屬性的值可以是一個相對URL或一個絕對URL，指向想要嵌入到HTML文件中的資源。
1）<img> 標籤
用於在網頁中嵌入影像。
<img src="image.jpg" alt="示例影像">
2）<script> 標籤
用於在文件中包含JavaScript檔案。
<script src="script.js"></script>
3）<iframe> 標籤
用於在當前文件中嵌入另一個文件。
<iframe src="page.html"></iframe>
4）<audio> 標籤
用於在文件中嵌入音訊內容。
<audio src="audio.mp3" controls></audio>
5）<video> 標籤
用於在文件中嵌入影片內容。
<video src="video.mp4" controls></video>
6、href
href屬性是非常重要的一個屬性，它用於指定連結的目的地地址。href這個名字代表“Hypertext Reference”，即超文字引用。最常見的用法是在<a>（錨點）標籤中，用來建立一個到另一個頁面或頁面內特定部分的連結。除了在<a>標籤中，href屬性也用於其他幾個標籤，如<link>和<base>標籤。
1）<a> 標籤中的 href
在<a>標籤中，href屬性定義了連結的目標URL，使用者點選這個連結後會被導向該URL指定的頁面。
<a href="https://www.example.com">Visit Example.com</a>
2）<link> 標籤中的 href
在<link>標籤中，href屬性用於指定外部資源的位置，常見於引入CSS檔案。
<link rel="stylesheet" href="styles.css">
3）<base> 標籤中的 href
在<base>標籤中，href屬性用於指定網頁內所有相對URL的基礎URL。<base>標籤如果存在，必須位於<head>部分中，而且一個文件中最多隻能有一個<base>元素。
<base href="https://www.example.com/">
7、alt
指定影像的替代文字，用於影像無法顯示時或輔助技術（如螢幕閱讀器）。alt 屬性是專門用於 <img> 標籤的，其全名為“alternate text”（替代文字）。這個屬性的主要作用是提供影像的文字替代，以便在影像無法顯示時（比如網速慢或者使用者使用的是螢幕閱讀器）向使用者展示影像的內容或功能。alt 屬性對於提高網站的可訪問性（Accessibility）至關重要，同時也對搜尋引擎最佳化（SEO）有好處，因為搜尋引擎會索引這些替代文字，從而更好地理解網頁上的影像內容。
<img src="image.jpg" alt="描述影像的內容">
8、type
type 屬性用於指定不同標籤的型別，具體表現形式取決於該屬性所用的標籤。這個屬性在多個HTML標籤中有著不同的用途和效果。
1）<input>標籤的type屬性
<input> 標籤的 type 屬性定義了使用者輸入資料的型別。
|
Type |
描述 |
|
type="text" |
定義單行的文字輸入欄位。 |
|
type="password" |
定義密碼欄位，輸入內容被遮蔽。 |
|
type="submit" |
定義提交按鈕。 |
|
type="radio" |
定義單選按鈕。 |
|
type="checkbox" |
定義核取方塊。 |
|
type="file" |
定義檔案選擇欄位， 允許使用者選擇一個或多個檔案。 |
|
type="email" |
定義用於電子郵件地址的輸入欄位。 |
|
type="date" |
定義日期選擇器。 |
<input type="text" name="fullname" placeholder="Enter your full name">
2）其他標籤的type屬性
<button type="submit">Submit</button>
<script type="application/javascript">
console.log("Hello, world!");
</script>
<embed type="image/jpg" src="image.jpg" width="300" height="200">
<object type="application/pdf" data="file.pdf" width="300" height="200"></object>
9、value
定義輸入欄位或選項的值。value屬性是一個常用於表單元素（如<input>、<option>、<button>等）的屬性，用於定義元素的值。這個值會在表單提交時被髮送到伺服器。
1）<input>標籤
對於<input>標籤，value屬性定義了輸入欄位的初始（預設）值。這適用於多種<input>型別，包括text、email、hidden、number、password等。
<input type="text" name="username" value="使用者名稱稱">
2）<button>標籤
對於<button>標籤，value屬性定義了按鈕的值。如果表單被提交，這個值將隨按鈕名稱作為一對鍵/值傳送到伺服器。
<button type="submit" name="submit_button" value="submit_value">提交</button>
3）<option>標籤
在<select>下拉選單中，<option>標籤使用value屬性來定義每個選項的值。如果選項被選中，該值會在表單提交時傳送到伺服器。
<select name="country"> <option value="USA">美國</option> <option value="China">中國</option> <option value="UK">英國</option> </select>
4）<input type="checkbox">和<input type="radio">
對於核取方塊和單選按鈕，value屬性用於指定當該選項被選中時，提交到伺服器的值。
<input type="checkbox" name="interest" value="music"> 音樂</input> <input type="checkbox" name="interest" value="sports"> 運動</input>
10、name
定義表單元素的名稱，用於表單資料的提交和處理。在HTML中，name屬性是用於指定元素名稱的一個屬性，它在不同的HTML元素中扮演著不同的角色。name屬性主要用於表單元素（如<input>、<textarea>、<select>等），但也可以用於其他元素（如<iframe>、<meta>、<a>等）。在HTML表單中，name屬性的值是非常關鍵的，因為它定義了表單資料在提交到伺服器時使用的名稱。
<form action="/submit-form" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <input type="submit" value="Submit"> </form>
11、placeholder
placeholder 屬性是HTML中輸入欄位（如 <input> 或 <textarea>）的一個屬性，用於顯示在輸入欄位為空時顯示的提示文字。這個提示旨在提供關於該輸入欄位期望資料型別的指示，或者提示使用者應該在欄位中輸入什麼樣的資訊。當使用者開始在輸入欄位中鍵入時，placeholder 中的文字會消失。提供輸入欄位的佔位符文字，指示預期的輸入型別。
1）<input> 標籤使用 placeholder
<input type="text" placeholder="請輸入您的姓名">
2）<textarea> 標籤使用 placeholder
<textarea placeholder="請在此輸入您的訊息"></textarea>
12、disabled
HTML標籤的 disabled 屬性是一個布林屬性，用於指示使用者無法與元素互動。當一個元素被設定為 disabled，它不僅會在視覺上變得不可用（通常是灰色的），而且使用者也無法與之互動。只需在需要禁用的元素上新增 disabled 屬性。不需要為 disabled 屬性指定值，因為它是布林屬性。只要存在，無論其值為何，元素都會被禁用。
<input type="text" disabled> <button disabled>點選我</button>
13、checked
指定輸入元素應該被預選中。checked 是一個HTML屬性，用於指定一個 <input> 元素（如單選按鈕或核取方塊）在頁面載入時應該被預選（checked）狀態。
<input type="checkbox" name="option" value="value1" checked> <input type="radio" name="group" value="value2" checked>
14、selected
HTML中，selected屬性是一個布林屬性，用於指定一個 <option> 元素應該在頁面載入時被預先選中。這個屬性常用在<select>元素內部的<option>標籤上，以定義哪個選項是預設選中的。當<select>元素包含多個<option>子元素時，可以透過在其中一個<option>元素上使用selected屬性來指定哪個選項應該被預設選中。
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes" selected>Mercedes</option> <option value="audi">Audi</option> </select>
15、readonly
指示輸入欄位為只讀狀態，不能修改。readonly 是 HTML 中用於表單元素的一個屬性，它指定輸入欄位是隻讀的，即使用者不能修改欄位中的值。但是，與 disabled 屬性不同，只讀欄位的值會在表單提交時被髮送到伺服器。這個屬性常用於需要向使用者顯示但不允許使用者編輯的資訊，如一個確認郵箱地址的欄位。
1）只讀文字框
<input type="text" name="email" value="user@example.com" readonly>
2）只讀多行文字框
<textarea name="message" readonly>這是一段示例文字。</textarea>
16、rel
rel屬性表示連結關係（relationship），用於定義當前文件與被連結文件之間的關係。這個屬性主要用在<a>、<link>和<area>標籤中。根據不同的rel值，瀏覽器和搜尋引擎可以以不同的方式處理連結。
1）<a>標籤中的rel屬性
nofollow：用於告訴搜尋引擎不要跟蹤或者不給連結傳遞權重。
<a href="https://example.com" rel="nofollow">連結到example.com</a>
noopener：當連結開啟一個新視窗（例如，使用target="_blank"）時，使用rel="noopener"可以防止新頁面對原頁面的JavaScript環境的訪問，增強安全性。
<a href="https://example.com" target="_blank" rel="noopener">開啟example.com</a>
noreferrer：與noopener類似，noreferrer還會防止傳送HTTP Referer頭部，用於增加隱私保護。
<a href="https://example.com" target="_blank" rel="noreferrer">開啟example.com</a>
2）<link>標籤中的rel屬性
stylesheet：最常見的用法，用於連結外部CSS檔案。
<link rel="stylesheet" href="styles.css">
icon：定義網站的圖示（如瀏覽器標籤頁圖示）。
<link rel="icon" href="favicon.ico" type="image/x-icon">
canonical：指定當前頁面的規範URL，用於告知搜尋引擎哪個版本是原始或首選版本，避免內容重複的問題。
<link rel="canonical" href="https://example.com/original-page.html">
alternate：用於指定當前文件的另一個語言版本的連結。
<link rel="alternate" hreflang="en" href="https://example.com/english-version.html"> <link rel="alternate" hreflang="fr" href="https://example.com/french-version.html">
preload：指示瀏覽器預先載入資源，如字型檔案、指令碼或樣式表，以提高頁面載入效能。
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
參考文件：