HTML - 屬性

上一個
下一個

我們已經看到了幾個 HTML 標籤及其用法，例如 標題標籤 <h1>、<h2>、段落標籤 <p> 和其他標籤。到目前為止，我們以最簡單的形式使用它們，但大多數 HTML 標籤也可以具有屬性，它們是額外的資訊。

什麼是 HTML 屬性？

HTML 屬性是提供 HTML 元素附加資訊的特殊單詞。屬性放置在元素的開始標籤內，用於配置或調整元素的行為。所有屬性都由兩部分組成：**名稱**和**值** -

  • **名稱：**屬性名稱是關鍵字，也稱為屬性識別符號，它定義了使用它的元素的特定特徵。例如，段落 **<p>** 元素（在下面給出的示例中）具有屬性“**align**”，它定義了段落在頁面上的對齊方式。
  • **值：**屬性值是定義要為該屬性設定的值的資料或資訊。該值在雙引號內分配。例如，“**left**”、“**center**”或“**right**”可以分配給段落標籤的“**align**”屬性（如以下示例所示）。

以下是具有屬性的 HTML 元素的語法 -

<tag_name attribute="Value">...</tag_name>

規則和特徵

以下是 HTML 屬性的規則和特徵；在將屬性與 HTML 元素 一起使用時，您應該遵循這些規則和特徵

  • 屬性是可選的；您可以使用它們來提供有關 HTML 元素的其他資訊。
  • 屬性具有名稱和值對，但某些屬性不需要任何值；這些被稱為布林屬性。
  • 一個 HTML 元素可以有多個屬性，並且它們應該用空格隔開。
  • 屬性應始終與開始標籤一起寫入。
  • 除了少數幾個，例如 <head>、<title>、<script> 等，所有 HTML 元素都可以具有屬性。
  • W3C 建議使用小寫屬性並將其值放在引號中。

HTML 屬性示例

此示例演示瞭如何在 HTML 元素中使用屬性。在這裡，我們正在將 align 屬性與不同的段落元素一起使用 -

<!DOCTYPE html>
<html>

<head>
    <title>Example of HTML Attributes</title>
</head>

<body>
    <p align="left">Left Aligned</p>
    <p align="center">Center Aligned</p>
    <p align="right">Right Aligned</p>
</body>

</html>

HTML 核心屬性

可以在大多數 HTML 元素（儘管不是全部）上使用的四個核心屬性是 -

id 屬性

HTML 標籤的 id 屬性 可用於唯一標識 HTML 頁面中的任何元素。您可能希望在元素上使用 id 屬性有兩個主要原因 -

  • 如果元素帶有 id 屬性作為唯一識別符號，則可以識別該元素及其內容。

  • 如果在網頁（或樣式表）中存在兩個同名的元素，則可以使用 id 屬性來區分名稱相同的元素。

我們使用 id 屬性來區分兩個段落元素 -

示例

<!DOCTYPE html>
<html>
<head>
   <title>ID Attribute Example</title>
</head>
<body>
   <p id="html">This para explains what is HTML</p>
   <p id="css">This para explains what is Cascading Style Sheet</p>
</body>
</html>

title 屬性

title 屬性 為元素提供建議的標題。title 屬性的語法與為 id 屬性解釋的類似 -

此屬性的行為將取決於承載它的元素，儘管它通常在游標移到元素上或元素載入時顯示為工具提示。

示例

<!DOCTYPE html>
<html>
<head>
   <title>The title Attribute Example</title>
</head>
<body>
   <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

執行上述示例後，它將顯示標題“標題標題標籤示例”。如果將游標懸停在其上，您會看到程式碼中使用的任何標題都作為游標的工具提示顯示。

class 屬性

class 屬性 為 HTML 元素指定一個或多個 CSS 類。可以使用此屬性在一個元素上使用多個類。如果要指定多個類，則此屬性的值是類名稱的空格分隔列表。

示例

class="className1 className2 className3"

style 屬性

style 屬性 允許您為元素編寫內聯 CSS 規則。

示例

<!DOCTYPE html>
<html>
<head>
   <title>The style Attribute</title>
</head>
<body>
   <p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p>
</body>
</html>

執行上述示例後，它將以“Arial”字型和紅色顯示文字“歡迎使用 Tutorialspoint…”。

HTML 國際化屬性

有三個國際化屬性，可用於大多數（儘管不是全部）XHTML 元素。

dir 屬性

dir 屬性 允許您指示瀏覽器文字應流動的方向。dir 屬性可以取兩個值之一，如下表所示 -

序號 值和含義
1

ltr

從左到右（預設值）
2

rtl

從右到左（對於希伯來語或阿拉伯語等從右到左閱讀的語言）

示例

<!DOCTYPE html>
<html dir="rtl">
<head>
   <title>Display Directions</title>
</head>
<body>
   This is how IE 5 renders right-to-left directed text.
</body>
</html>

如果單擊編輯和執行，您可以觀察到文字向右對齊。

當dir 屬性在 <html> 標記 內使用時，它決定了整個文件中文字的呈現方式。當在另一個標記內使用時，它控制該標記內容的文字方向。

lang 屬性

lang 屬性 允許您指示文件中使用的主要語言，但此屬性僅在 HTML 中保留是為了向後相容 HTML 的早期版本。在新 XHTML 文件中，此屬性已被 xml:lang 屬性替換。

lang 屬性的值是 ISO-639 標準的兩位語言程式碼。檢視 HTML 語言程式碼：ISO 639 以獲取語言程式碼的完整列表。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>English Language Page</title>
</head>
<body>
   This page is using English Language
</body>
</html>

HTML 布林屬性

布林屬性表示真值和假值，並且不需要在屬性名稱中使用任何值。要設定真值，您需要寫入屬性的名稱，要將其設定為假，則應完全省略該屬性。

以下是一些布林屬性 -

示例

以下是一個 HTML 布林屬性（required）的示例 -

<!DOCTYPE html>
<html>
<body>

<h1>Example of "required" attribute</h1>

<form>
  <label for="user_name">Input User Name:</label>
  <input type="text" id="user_name" name="user_name" required>
  <input type="submit">
</form>

</body>
</html>

xml:lang 屬性

xml:lang 屬性是 lang 屬性的 XHTML 替代品。xml:lang 屬性的值應為 ISO-639 國家/地區程式碼，如上一節所述。

HTML 通用屬性

這是一個其他屬性的表格，這些屬性可以很容易地與許多 HTML 標籤一起使用。

屬性 選項 功能
align right, left, center 水平對齊標籤。
valign top, middle, bottom 垂直對齊 HTML 元素內的標籤。
bgcolor 數字、十六進位制、RGB 值 在元素後面放置背景顏色。
background URL 在元素後面放置背景圖片。
id 使用者定義 為元素命名，以便與層疊樣式表一起使用。
class 使用者定義 對元素進行分類，以便與層疊樣式表一起使用。
width 數值 指定表格、影像或表格單元格的寬度。
height 數值 指定表格、影像或表格單元格的高度。
title 使用者定義 元素的“彈出”標題。

在繼續學習其他 HTML 標籤時，我們將看到相關的示例。有關 HTML 標籤和相關屬性的完整列表，請訪問：HTML 標籤參考 和 HTML 屬性參考。

使用 HTML 屬性的最佳實踐

在任何元素上使用屬性時，都應遵循某些實踐，請檢視以下方法：

1. 在引號中編寫值

應始終在單引號或雙引號中編寫屬性值。

<!-- Good Practice -->
<a href="https://tutorialspoint.tw/html/html_overview.htm">
   HTML Introduction
<a>

<!-- Bad Practice -->
<a href=https://tutorialspoint.tw/html/html_overview.htm>
   HTML Introduction
<a>

2. 使用小寫

HTML 不區分大小寫，但最佳實踐是將 HTML 屬性寫成小寫。

<input type="text">

3. 同時使用單引號和雙引號

如果需要在屬性值中提供任何帶引號的字串，則可以使用單引號和雙引號的組合。

<!-- Can use single and double Quotes -->
<p title="We are known for 'Simple Easy Learning'">
    Tutorialspoint
</p>
<p title='We are known for "Simple Easy Learning"'>
    Tutorialspoint
</p>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.