HTML 屬性-html教學-PHP中文網

HTML 屬性是修改 HTML 元素行為的特殊單字。它們在元素的開始標籤內使用，可以修改元素的預設功能或提供必要的功能。從語法上講，屬性被加入到 HTML 開始標記中。它們可以分類為必需、可選、標準或事件屬性，並以名稱-值對的形式編寫，在元素的開始標記內用等號“=”分隔。

不同的 HTML 屬性

下面給出了不同的 HTML 屬性及其詳細工作原理：

1.核心屬性

主要使用的核心屬性有四：

ID: 此屬性唯一標識 HTML 頁面中的元素。當元素帶有 ID 屬性時，它會充當唯一標識符，可以輕鬆識別該元素及其內容。當網頁中有多個同名元素時，這特別有用。
標題屬性： 此屬性提供元素的建議標題。它的行為取決於使用它的上下文，當遊標懸停在元素上或載入元素時，它可能會顯示為工具提示。當使用者將滑鼠指標懸停在某個元素上時，它還可以提供有關該元素的附加資訊。
類別屬性： 此屬性透過指定元素的類別將元素與樣式表關聯起來。在學習級聯樣式表時可以了解有關此屬性的更多資訊。類別屬性的值可以是以空格分隔的類別名稱清單。例如：class=”className1 className2 className3″
樣式屬性： 此屬性允許使用者為單一元素指定 CSS 規則。透過 style 屬性，使用者可以將各種 CSS 效果應用於 HTML 元素，例如更改字體大小、字體系列和顏色。

2.國際化屬性

Dir: dir 屬性有助於向瀏覽器指示文字應遵循的方向。此屬性可以採用兩個值：LTR 和 RTL。 LTR 表示從左到右，這是預設值，而 RTL 表示從右到左。當在中使用時標籤，它決定文字在整個文件中的表示方式。它還可以控制標籤內容內文字的方向。
Lang 屬性： 此屬性有助於展示文件中使用的主要語言。人們可以在 HTML 中使用它來保持與早期版本的 HTML 的向後相容性。另外，在新的 XHTML 文件中將其替換為 XML: lang 屬性。 lang 屬性的值是基於 ISO-639 標準，由兩個字元的語言代碼組成。聲明一種語言對於可訪問性和搜尋引擎正確索引內容非常重要。
XML-Lang 屬性： 此屬性傾向於取代 lang 屬性。 XML-lang 屬性的值必須包含 ISO-639 指定的語言和國家代碼。

3.通用屬性

對齊屬性：當您想要在網頁上定位某些元素時，此屬性非常有用。它允許您更改頁面的左對齊、右對齊或居中對齊方式。所有元素的預設對齊方式設定為左側，但您可以使用align 屬性變更它。
Src 屬性： 當想要在網頁中插入圖片時，需要使用屬性。帶有 src 屬性的標籤。可以將影像的位址指定為雙引號內的屬性值。可以使用 src 屬性，如下所示將圖片包含在網頁上。

代碼：

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>

登入後複製

Alt 屬性： 此屬性用作替代標籤，可用於在主要屬性（即）顯示某些內容時顯示某些內容。標籤，無法顯示分配給它的原始圖像。它可以向在編碼端使用它的開發人員描述圖像。如果主圖像失敗，則可以顯示備用圖像。
寬度和高度屬性：這些屬性可以調整影像的高度和寬度。

範例：

代碼：

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html>

登入後複製

Href Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the tag. When the link is placed in the href attribute, it is associated with the text displayed within the tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.

4. Data Attribute

HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.

In order to customize, one divides the data into two parts:

Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
Attribute Value: Any string value can be associated with the attribute.

The syntax for a data attribute is as follows:

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

登入後複製

5. DOM Attribute Property

To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.

The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

登入後複製

6. Global Attributes

HTML also provides global attributes that can work with any HTML element:

Accesskey: Specifies a shortcut key to activate or focus on any element.
Translate: Specifies whether the content of the element is to be translated or not.
Class: One or more class names for an element are specified.
Title: Specifies extra information about an element.
Contenteditable: This attribute can be used to specify whether the content is editable or not.
Tabindex: Specifies the tabbing order of an element.
Dir: Specifies the text direction for any content of an element.
Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
Draggable: Specifies if an element should be draggable or not.
Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.

7. Event Attributes

HTML has the ability to trigger actions when some events take place.

Onload: Fires after the page has finished loading.
Onmessage: A script that runs when the message is triggered.
Onstorage: A script that runs when a web storage area is updated.
Onerror: The script runs when an error occurs.
Onpagehide: The script can be used when the user navigates away from a page.