最新的Web開發教程

HTML屬性

❮上一頁 下一頁章❯

屬性提供有關HTML元素的更多信息。

一個HTML屬性是一個HTML元素類型的改性劑。 一個屬性或者修改的元素類型的默認功能或提供功能無法沒有它們正常工作某些元素類型。 在HTML語法，的屬性被添加到HTML開始標記。

HTML屬性

  • HTML元素可以有attributes
  • 屬性提供additional information有關的元件
  • 屬性總是在指定the start tag
  • 屬性來像名稱/值對： name="value"

描述

HTML通常屬性顯示為名稱 - 值對，通過=分離，並且一個元素的開始標籤中被寫入，元素的名稱之後：

<tag attribute="value">content to be modified by the tag</tag>

當標籤名稱的HTML元素類型，屬性是屬性的名稱，設置所提供的價值。 的值可以被包含在單引號或雙引號，雖然由某些字符的值可以在HTML（但不是XHTML）留下無引號.Leaving屬性值沒有引用的被認為是不安全的。

雖然大多數屬性為成對的名稱和值提供，有的乾脆由他們中的元素（像img元素的屬性ISMAP）的起始標籤存在影響的元素。

大多數元素可以採取任何的幾個共同屬性：

id屬性提供了一種用於element.This寬文檔的唯一標識符可以被用作CSS選擇以提供表象的特性，通過瀏覽器將注意力集中在特定的元件上，或通過腳本來改變一個元素的內容或呈現。 附加到網頁的URL，該URL直接針對文檔中的特定元素，通常是頁面的子部分。 例如，ID“屬性”。

類屬性提供類似的元件進行分類的方法。 這可以用於語義目的，或用於演示。 語義上，例如，類在微使用。 Presentationally，例如，HTML文檔可以使用指定類=“符號”，以表明這一類值的所有元素都從屬於文件的主要內容。 這樣的元素可能會聚集在一起，並呈現為頁面，而不是出現在它們出現在HTML源在地方的腳註。 另一個演示用途是作為一個CSS選擇器。

作者可以使用樣式非attributal碼表象性的特定元素。 它被認為是更好的做法是使用元素的ID或類屬性來選擇一個樣式表的元素，雖然有時這可能是風格屬性的簡單和具體的或臨時應用程序太麻煩了。

標題屬性用於解釋亞文本附加到元素。 在大多數瀏覽器這個屬性顯示為一個什麼是通常被稱為一個提示。

縮寫元件，縮寫，可以用來證明這些各種屬性：

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

本實施例中顯示為HTML; 在大多數瀏覽器中，在簡稱指向指針應顯示的標題文字“超文本標記語言”。

大多數元素也採取了與語言相關的屬性郎和目錄。

在lang屬性

文檔語言可以在聲明<html>標記。

語言在聲明lang屬性。

聲明一個語言是用來輔助功能應用程序很重要(screen readers)和搜索引擎：

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

前兩個字母指定語言(en) 如果有一種方言，使用兩個字母(US) 。

該title屬性

HTML段落中與所定義的<p>標記。

在這個例子中， <p>元件具有標題屬性。 該屬性的值是" About w3im "

例

<p title="About w3ii">
w3ii is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
試一試»

當您在元素上移動鼠標時，標題會顯示為工具提示。

該href屬性

HTML鏈接與定義<a>標籤。 鏈接地址在指定href屬性：

例

<a href="http://www.w3ii.com">This is a link</a>
試一試»

您將了解更多有關環節和<a>標籤在本教程的後面。

尺寸屬性

HTML圖像與定義<img>標記。

源的文件名( src )以及圖像（的尺寸width和height ）都被設置為屬性 ：

例

<img src="w3ii.jpg" width="104" height="142">
試一試»

圖像尺寸以像素指定：寬度=“104”是指寬104的屏幕像素。

您將了解更多關於圖像和<img>標籤在本教程的後面。

該alt屬性

的alt屬性指定了要使用的，當無法顯示一個HTML元素的替代文本。

屬性的值可以通過讀取"screen readers" 。 這樣一來，一個人"listening"到的網頁，即一個盲人，可以"hear"的元素。

例

<img src="w3ii.jpg" alt="w3ii.com" width="104" height="142">
試一試»

我們建議：始終使用小寫屬性

HTML5標準不要求小寫屬性名稱。

在title屬性可以與大寫或小寫等被寫入Title和/或TITLE 。

W3C 建議在HTML4小寫字母，以及更嚴格的文件類型，如XHTML 要求小寫。

小寫是最常見的。 較低的情況下更容易輸入。
在w3ii我們總是使用小寫屬性名稱。

我們建議：總是引用屬性值

HTML5標準不需要引號屬性值。

的href屬性，以上證明的，可以寫為：

例

<a href=http://www.w3ii.com>
試一試»

W3C recommends在HTML4報價，並要求報價更嚴格的文件類型，如XHTML。

有時需要使用引號。 這將無法正確顯示，因為它包含一個空格：

例

<p title=About w3ii>
試一試»

使用引號是最常見的。 省略引號會產生誤差。
在w3ii我們總是用引號屬性值。

單或雙引號？

雙引號風格是最常見的HTML，但也可以使用單一的風格。

在某些情況下，當屬性值本身包含雙引號，就必須使用單引號：

<p title='John "ShotGun" Nelson'>

或相反亦然：

<p title="John 'ShotGun' Nelson">

章節總結

  • 所有的HTML元素可以有屬性
  • 在HTML title屬性提供附加的"tool-tip"信息
  • 在HTML href屬性提供的鏈接地址信息
  • 的HTML width和height屬性提供用於圖像大小信息
  • 該HTML alt屬性為屏幕閱讀器提供文本
  • 在w3ii我們總是用lowercase HTML屬性名
  • 在w3ii我們總是quote加上雙引號屬性

測試自己與練習！

練習1» 練習2» 練習3» 練習4» 練習5»

HTML屬性

下面是經常在HTML中使用的一些屬性的字母順序列表：

屬性 描述
alt 指定圖像的替代文本
disabled 指定一個輸入元件應被禁用
href 指定URL (web address)的鏈接
id 指定一個唯一的ID為元素
src 指定URL (web address)的圖像
style 指定內嵌CSS樣式的元素
title 指定元素的額外信息(displayed as a tool tip)

每個HTML元素的所有屬性的完整清單，列在我們的： HTML標籤參考 。

❮上一頁 下一頁章❯