Was ist der Unterschied zwischen ID- und Klassenattributen in HTML?-HTML-Tutorial-php.cn

Was ist der Unterschied zwischen ID- und Klassenattributen in HTML?

青灯夜游

Freigeben： 2019-04-15 11:23:47

Original

15034 Leute haben es durchsucht

In HTML verwenden wir häufig die Attribute id und class. Sie haben ähnliche Funktionen. Was ist also der Unterschied zwischen ihnen? Der folgende Artikel vergleicht kurz die ID- und Klassenattribute in HTML und stellt die Unterschiede zwischen den ID- und Klassenattributen in HTML vor. Ich hoffe, dass er für alle hilfreich ist. [Video-Tutorial-Empfehlung: HTML-Tutorial]

Was ist der Unterschied zwischen ID- und Klassenattributen in HTML?

HTML-ID-Attribut

Das id-Attribut ist eine eindeutige Kennung, die zur Angabe eines Dokuments verwendet wird. Daher kann id zur Unterscheidung verschiedener Module innerhalb einer Seite verwendet werden. CSS und JavaScript verwenden das id-Attribut, um bestimmte Aufgaben für eindeutige Elemente auszuführen. In CSS wird das id-Attribut mit dem #-Symbol gefolgt von der id geschrieben.

Grundlegende Syntax:

HTML:

<element id =“id_name”>

Nach dem Login kopieren

CSS-Stylesheet:

#id_name {
    // CSS属性
}

Nach dem Login kopieren

Beispiel:

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

Nach dem Login kopieren

Ausgabe:

Was ist der Unterschied zwischen ID- und Klassenattributen in HTML?

HTML-Klassenattribut

Das Klassenattribut wird verwendet, um einen oder mehrere Klassennamen für HTML-Elemente anzugeben. Das Klassenattribut kann für jedes HTML-Element verwendet werden. CSS und JavaScript können Klassennamen verwenden, um bestimmte Aufgaben für Elemente mit angegebenen Klassennamen auszuführen. Klassennamen in CSS-Stylesheets verwenden das Symbol „.“

Grundlegende Syntax:

HTML:

<element class=“class_name”>

Nach dem Login kopieren

CSS-Stylesheet:

.class_name {
    // CSS属性
}

Nach dem Login kopieren

Beispiel:

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

Nach dem Login kopieren

Ausgabe:

Was ist der Unterschied zwischen ID- und Klassenattributen in HTML?

Hinweis: Derselbe Klassenname kann mehrmals auf der Seite erscheinen, sodass wiederholt darauf verwiesen werden kann Das gleiche CSS reduziert den Arbeitsaufwand und die Codemenge.

Zusammenfassung

Der Unterschied zwischen ID- und Klassenattributen ist: ID ist eindeutig und kann höchstens einmal auf der Seite erscheinen auf ein Element angewendet werden und nicht wiederholt verwendet werden. Die Klasse ist universell und kann mehrmals auf der Seite erscheinen und auf mehrere Elemente angewendet werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen ID- und Klassenattributen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!