透過前面的學習,我們已經對HTML標籤有了簡單的認識,知道可以在標籤中可以添加一些屬性,這些屬性包含了標籤的額外信息,例如:
(1)href 屬性可以為<a> 標籤提供連結位址;
(2)src 屬性可以為<img> 標籤提供影像的路徑;
(3)style 屬性幾乎可以為所有標籤定義CSS 樣式。
本篇我們就來說明HTML 標籤屬性的定義和用法。
一、什麼是屬性?
屬性可以為HTML 標籤提供一些附加信息,或對HTML 標籤進行修飾。屬性需要加入開始標籤中,語法格式為:
attr=value
attr 表示屬性名,value 表示屬性值。屬性值必須使用雙引號或單引號' '包圍。
注意:雖然雙引號和單引號都可以包圍屬性值,但是為了規範和專業,請盡量使用雙引號。
一個標籤可以沒有屬性,也可以有一個或多個屬性。
使用HTML 屬性的範例:
<pid=user-infoclass=color-red>歡迎您<fontcolor=redsize=3>使用者名稱</font>來到C語言網,您已經使用本站3年,這是您第264次登入。 <p><divclass=clearfloat><pclass=left>使用者名稱帳號資訊</p><pclass=right>使用者名稱個性簽章</p></div>
展示如下:
1. 專用屬性
HTML 屬性很多,大體可以分成兩類:
(1)有些屬性適用於大部分或所有HTML 標籤,我們將這些屬性稱為通用屬性;
(2)有些屬性只適用於一個或幾個特定的HTML 標籤,我們將這些屬性稱為專用屬性。
HTML 中的<img> 標籤就有src 和alt 兩個專用屬性,<a> 標籤也有href 和target 兩個專用屬性,如下例所示:
<img src=./logo.png alt=C語言網Logo width=100 height=50>
<a href=http://c.biancheng.net/ target=_blank>C語言網</a>
對程式碼的說明:
<img> 標籤中的src 屬性用來定義影像的路徑,alt 屬性用來定義影像的描述訊息,當影像出現異常無法正常顯示時就會顯示alt 中的資訊。
<a> 標籤的href 屬性用來定義連結的位址,target 屬性用來定義新頁面在瀏覽器中的開啟方式。
2. 自訂屬性
除了自帶的屬性,HTML 也允許我們自訂屬性,這些屬性雖然可以被瀏覽器識別,但是並不會添加什麼特殊效果,我們需要藉助CSS 和JavaScript 處理自訂屬性,為HTML 標籤添加指定樣式或者行為。
二、HTML 屬性
● HTML 元素可以設定屬性
●屬性可以在元素中新增附加資訊
●屬性一般描述於開始標籤
●屬性總是以名稱/值對的形式出現,例如:name=value。
小結:HTML中的元素可以透過設定屬性為HTML元素提供附加資訊;屬性,為屬於該元素的特性。
1. 常用屬性
以下為適用於大多數HTML元素的屬性
(1)class
為html元素定義一個或多個類別名稱(classname)(類別名稱從樣式檔案引入)
class屬性可以多用,即class=classname1 classname2 classname3 ... (引號裡面可以填入多個class屬性)
(2)id
定義元素的唯一id
id屬性只能單獨設置,即id=myid(只能填寫一個,多個無效)
(3) style
規定元素的行內樣式(inline style)
(4)title
描述了元素的額外資訊(作為工具條使用)
2. HTML 屬性常用引用屬性值
屬性值應該始終被包括在引號內。
雙引號是最常用的,不過使用單引號也沒問題。
提示: 在某些個別的情況下,例如屬性值本身就含有雙引號,那麼您必須使用單引號,例如:
name='JohnShotGunNelson'
3. HTML 提示:使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過,萬維網聯盟在其HTML 4 建議標準中建議小寫的屬性/屬性值。
而新版的(X)HTML 則要求使用小寫屬性。
4. HTML 屬性參考手冊
查看完整的HTML屬性清單: HTML 標籤清單。
下面列出了適用於大多數HTML 元素的屬性: