CSS 使用id屬性的規則


html中的id屬性是什么?本篇文章給大家帶來的內容是介紹html中的id屬性,讓大家了解id屬性的使用方法,希望對大家有所幫助。

 

html的id屬性是什么?

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

1

2

3

<div id="demo">

   <p id="p1">PHP中文網!</p>

</div>

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

id屬性的語法:

1

2

3

4

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

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

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

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

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

1

2

3

#p1{

color: red;

}

效果圖:

使用id屬性的規則

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

1、id屬性的值必須是以字母(az或AZ)開頭,例:

1

2

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

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

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

2、后續字符可以是字母,數字(0-9),連字符( - ),下划線(_)

1

2

3

4

<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屬性設置樣式時,可以確保只對網頁上的一個項目進行樣式設置。例:

1

2

3

#p1{

color: red;

}

1

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

效果圖:

4.jpg

2、用於鏈接到的命名錨點中:

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<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>

            <h3 id="a1">標題1</h3>

            <p>測試文字!測試文字!測試文字!測試文字!</p>

        </div>

        <div>

            <h3 id="a2">標題2</h3>

            <p>測試文字!測試文字!測試文字!測試文字!</p>

        </div>

        <div>

            <h3 id="a3">標題3</h3>

            <p>測試文字!測試文字!測試文字!測試文字!</p>

        </div>

    </div>

</div>

效果圖:

1.gif

3、在腳本中使用

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

1

2

3

4

5

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

 

<script>

    document.getElementById("p1").innerHTML="PHP中文網!"

</script>

效果圖:

4、其他處理

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

總結:以上就是本篇文章的全部內容,希望能對大家的學習有所幫助。

以上就是html中的id屬性是什么?id屬性的使用的詳細內容,更多請關注php中文網其它相關文章!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM