網頁中的唯一標識符
根據W3C的說法,HTML中的ID屬性是:
元素的唯一標識符
這是一個非常強大的屬性的簡單描述。 ID屬性可以為網頁執行多個操作:
- 樣式表選擇器 - 這是大多數人使用ID屬性的功能。 因為它們是獨一無二的,所以當您使用ID屬性進行樣式設置時,可以確定您只會在Web頁面上創建一個項目。 使用ID進行樣式設計的不利之處在於它具有非常高的特異性,如果您稍後需要在樣式表中出於某種原因重寫樣式,這可能會使其非常具有挑戰性。 正因為如此,當前的Web實踐傾向於使用類和類選擇器來代替ID和ID選擇器來實現一般樣式。
- 命名定位點用於鏈接到 - Web瀏覽器允許您通過指向URL末尾的ID來定位Web文檔中的精確位置。 您只需將該ID添加到頁面網址的末尾,並以英鎊符號(#)開頭。 您還可以通過在a元素的href屬性中添加井號(#)和ID名稱,將頁面本身鏈接到這些錨點。 例如,如果您有一個具有聯繫人 ID的部門,則可以使用以下鏈接連接到該頁面:
這是鏈接文本 - 腳本的參考 - 如果您編寫任何Javascript函數,則需要使用ID屬性,以便可以使用腳本更改頁面上的精確元素。
- 其他處理 - 該ID允許您以任何您需要的方式處理您的Web文檔。 例如,您可以將HTML提取到數據庫中,ID屬性標識字段。
使用ID屬性的規則
有一些規則必須遵循才能擁有使用文檔中任何位置的id屬性的有效文檔:
- 該ID必須以字母(az或AZ)開頭
- 所有後續字符可以是字母,數字(0-9),連字符( - ),下劃線(_),冒號(:)和句點(。)。
- 每個ID在文檔中必須是唯一的。 為什麼?
使用ID屬性
一旦確定了網站的一個獨特元素,就可以使用樣式表來設計該元素的樣式。
聯繫我們
這裡有一些文字內容
div#contact-section {background:#0cf;}
-要不就-
#contact-section {background:#0cf;}
這兩個選擇器中的任何一個都可以工作。 第一個(div#contact-section)將以ID屬性為“contact-section”的分區為目標。 第二個(#contact-section)仍然會以“contact-section”的ID作為目標,但它不知道它正在尋找的是一個分區。 造型的最終結果將完全相同。
您也可以鏈接到該特定元素而不添加任何標籤:
鏈接到聯繫信息
使用“getElementById”JavaScript方法在腳本中引用該段落:
的document.getElementById(“接觸部”)
ID屬性在HTML中仍然非常有用,即使類選擇器已經將它們替換為最常用的樣式目的。 使用ID屬性作為樣式的鉤子,同時將它們用作鏈接或腳本目標的能力意味著它們在今天的網頁設計中仍然佔有重要地位。
由Jeremy Girard編輯