首頁 >web前端 >html教學 >HTML中id和class屬性的差別是什麼？

HTML中id和class屬性的差別是什麼？

青灯夜游原創: 2019-04-15 11:23:4715178瀏覽

在HTML中我們經常會使用到id和class屬性，它們之間的作用相似，那麼它們之間有什麼區別？下面本篇文章就來簡單比較一下HTML中id和class屬性，介紹HTML中id和class屬性之間的差別，希望對大家有幫助。【影片教學推薦：HTML教學】

#HTML id屬性

HTML id屬性

id屬性是用來指定文件的唯一識別碼；因而，可以使用id在頁面中區分不同的模組。 CSS和JavaScript使用 id屬性來為唯一元素執行特定任務。在CSS中，id屬性使用＃符號後面跟著id編寫。

基本語法：

HTML中：

<element id =“id_name”>

CSS樣式表中：

#id_name {
    // CSS属性
}

範例：

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
    <title> HTML id 属性 </title> 
      
    <style> 
        #demo{ 
            color:red; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1>Hello World!</h1> 
    <p id="demo">欢迎来到PHP中文网！</p> 
    <p >php从入门到精通，一站式php自学平台！</p> 
</body> 
  
</html>

輸出：

#HTML class屬性

HTML中id和class屬性的差別是什麼？

######### ##class屬性用於為HTML元素指定一個或多個類別名稱；class屬性可用於任何HTML元素。 CSS和JavaScript可以使用類別名稱來為具有指定類別名稱的元素執行某些任務。 CSS樣式表中的類別名稱使用“.”符號。 #########基本語法：#########HTML中：###

<element class=“class_name”>

###CSS樣式表中：###

.class_name {
    // CSS属性
}

######範例：## ####

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
    <title> HTML class 属性 </title> 
      
    <style> 
        .demo{ 
            color:red; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <p class="demo">Hello World!</p> 
    <p class="demo">欢迎来到PHP中文网！</p> 
</body> 
  
</html>

###輸出：##################說明：###同一個類別名稱在頁裡面可以多次出現，這樣可以重複引用同一個css，減少工作量和程式碼量。 ############總結############id與class屬性之間的差異是：id具有唯一性，在頁裡面只能出現一次，最多隻能應用於一個元素，不能重複使用。 class具有普遍性，在頁裡面可以多次出現，套用於多個元素。 ######以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！！！ ###

以上是HTML中id和class屬性的差別是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Element表格嵌入複選框以及單選框的方法介紹（程式碼範例）下一篇：Element表格嵌入複選框以及單選框的方法介紹（程式碼範例）

看更多