HTML ?id? 屬性用于 為HTML 元素指定唯一的 id。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了廬江免費(fèi)建站歡迎大家使用！

一個(gè) HTML文檔中不能存在多個(gè)有相同 id 的元素。

使用 id 屬性

?id? 屬性指定 HTML 元素的唯一 ID。 ?id? 屬性的值在 HTML 文檔中必須是唯一的。

?id? 屬性用于指向樣式表中的特定樣式聲明。JavaScript 也可使用它來(lái)訪(fǎng)問(wèn)和操作擁有特定 ID 的元素。

id 的語(yǔ)法是：寫(xiě)一個(gè)井號(hào) (#)，后跟一個(gè) ?id? 名稱(chēng)。然后，在花括號(hào) {} 中定義 CSS 屬性。

下面的例子中我們有一個(gè) ?

? 元素，它指向 ?id? 名稱(chēng) "myHeader"。這個(gè) ?

? 元素將根據(jù) head 部分中的 ?#myHeader? 樣式定義進(jìn)行樣式設(shè)置：

實(shí)例

My Header

嘗試一下

注釋?zhuān)篿d 名稱(chēng)對(duì)大小寫(xiě)敏感！

注釋?zhuān)篿d 必須包含至少一個(gè)字符，且不能包含空白字符（空格、制表符等）。

Class 與 ID 的差異

同一個(gè)類(lèi)名可以由多個(gè) HTML 元素使用，而一個(gè) id 名稱(chēng)只能由頁(yè)面中的一個(gè) HTML 元素使用：

實(shí)例

My Cities


London
London is the capital of England.

Paris
Paris is the capital of France.

Tokyo
Tokyo is the capital of Japan.

嘗試一下

提示：請(qǐng)?jiān)谖覀兊?nbsp;CSS教程 中學(xué)習(xí)更多 CSS 知識(shí)。

通過(guò) ID 和鏈接實(shí)現(xiàn) HTML 書(shū)簽

HTML 書(shū)簽用于讓讀者跳轉(zhuǎn)至網(wǎng)頁(yè)的特定部分。

如果頁(yè)面很長(zhǎng)，那么書(shū)簽可能很有用。

要使用書(shū)簽，您必須首先創(chuàng)建它，然后為它添加鏈接。

然后，當(dāng)單擊鏈接時(shí)，頁(yè)面將滾動(dòng)到帶有書(shū)簽的位置。

實(shí)例

首先，用 ?id? 屬性創(chuàng)建書(shū)簽：

第四章

嘗試一下

然后，在同一張頁(yè)面中，向這個(gè)書(shū)簽添加一個(gè)鏈接（“跳轉(zhuǎn)到第四章”）：

實(shí)例

跳轉(zhuǎn)到第四章

嘗試一下

或者，在另一張頁(yè)面中，添加指向這個(gè)書(shū)簽的鏈接（“跳轉(zhuǎn)到第四章”）：

Jump to Chapter 4

嘗試一下

在 JavaScript 中使用 id 屬性

JavaScript 也可以使用 id 屬性為特定元素執(zhí)行某些任務(wù)。

JavaScript 可以使用 ?getElementById()? 方法訪(fǎng)問(wèn)擁有特定 id 的元素：

實(shí)例

使用 id 屬性通過(guò) JavaScript 來(lái)處理文本：

提示：請(qǐng)?jiān)谖覀兊?nbsp;JavaScript教程 中學(xué)習(xí) JavaScript。

本章總結(jié)

• ?id? 屬性用于為 HTML 元素指定唯一的 id
• ?id? 屬性的值在 HTML 文檔中必須是唯一的
• CSS 和 JavaScript 可使用 ?id? 屬性來(lái)選取元素或設(shè)置特定元素的樣式
• ?id? 屬性的值區(qū)分大小寫(xiě)
• ?id? 屬性還可用于創(chuàng)建 HTML 書(shū)簽
• JavaScript 可以使用 ?getElementById()? 方法訪(fǎng)問(wèn)擁有特定 id 的元素

當(dāng)前文章：創(chuàng)新互聯(lián)HTML教程：使用 id 屬性
網(wǎng)頁(yè)URL：http://m.5511xx.com/article/cdhichg.html