html中id屬性的使用方法

小編給大家分享一下html中id屬性的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html的id屬性是什么？

html的id屬性其實就是一個HTML元素標簽的標志，可以用來唯一表示該元素的標識符；它在 HTML 文檔中必須是唯一的。例：

<div id="demo">
   <p id="p1">億速云！</p>
</div>

這里的"demo"和"p1"都是id屬性的值，分別用來表示了一個<div>標簽和<p>標簽；則，這兩個值不能在其他標簽的id屬性中再次被使用。

id屬性的語法：

<p ID="p1">測試文字</p>
<p id="p1">測試文字</p>
<p Id="p1">測試文字</p>
<p iD="p1">測試文字</p>

以上的寫法都可以，我們看看使用css給#p1添加字體顏色后的效果：

#p1{
color: red;
}

效果圖：

使用id屬性的規則

html的id屬性可以在文檔中的任何位置被使用，但必須要遵循一些規則：

1、id屬性的值必須是以字母（az或AZ）開頭，例：

<p id="p">測試文字</p>
<p id="A">測試文字</p>

說明：id屬性的值是大小寫敏感的

2、后續字符可以是字母，數字（0-9），連字符（ - ），下劃線（_）

<p id="pa">測試文字</p>
<p id="A1">測試文字</p>
<p id="p-a">測試文字</p>
<p id="A_1">測試文字</p>

3、每個id屬性值在文檔中必須是唯一的

這樣就可以方便我們通過這個id屬性值來確定了Web站點的唯一元素，就可以使用css或者js來操作這個唯一元素，例：設置元素樣式、修改元素中包含的內容等等。

id屬性的使用

id屬性是一個非常強大的屬性，它可以為Web頁面執行多個操作：

1、樣式表選擇器（id選擇器）：

這是大多數人都在使用的ID屬性的一個功能。因為它們是唯一的，所以當我們使用ID屬性設置樣式時，可以確保只對網頁上的一個項目進行樣式設置。例：

#p1{
color: red;
}

<p id="p1">測試文字</p>

效果圖：

2、用于鏈接到的命名錨點中：

Web瀏覽器允許我們通過指向URL末尾的ID值來定位Web文檔中的精確位置。我們只需將id值添加到頁面URL的末尾，并在前面加一個井號（＃）。我們還可以通過在元素的href屬性中添加井號（＃）和ID名稱來鏈接到頁面本身的這些錨點。例：

<div class="demo">
	<ul>
		<li>
			<a href="#a1">標題1</a>
		</li>
		<li>
			<a href="#a2">標題2</a>
		</li>
		<li>
			<a href="#a3">標題3</a>
		</li>
	</ul>
	<div class="container">
		<div>
			<h4 id="a1">標題1</h4>
			<p>測試文字！測試文字！測試文字！測試文字！</p>
		</div>
		<div>
			<h4 id="a2">標題2</h4>
			<p>測試文字！測試文字！測試文字！測試文字！</p>
		</div>
		<div>
			<h4 id="a3">標題3</h4>
			<p>測試文字！測試文字！測試文字！測試文字！</p>
		</div>
	</div>
</div>

效果圖：

3、在腳本中使用

當我們需要在Javascript中查找一個HTML元素時，可以使用ID屬性，來精確查找一個元素，在對這個元素進行設置。例：

<p id="p1">測試文字！</p>

<script>
	document.getElementById("p1").innerHTML="億速云!"
</script>

效果圖：

4、其他處理

id屬性允許我們以任何需要的方式來處理Web文檔。例如，可以和PHP一起使用，將HTML提取到數據庫中，ID屬性標識字段。

以上是html中id屬性的使用方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！