HTMLのid属性とclass属性の違いは何ですか?-htmlチュートリアル-php.cn

HTMLのid属性とclass属性の違いは何ですか?

青灯夜游

リリース： 2019-04-15 11:23:47

オリジナル

15152 人が閲覧しました

HTML では id 属性と class 属性がよく使われますが、これらは似たような機能を持っていますが、両者の違いは何でしょうか?次の記事では、HTML の id 属性と class 属性を簡単に比較し、HTML の id 属性と class 属性の違いを紹介しますので、皆様の参考になれば幸いです。 [ビデオチュートリアルの推奨: HTML チュートリアル ]

HTMLのid属性とclass属性の違いは何ですか?

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のid属性とclass属性の違いは何ですか?

##HTML クラス属性

class 属性は、HTML 要素の 1 つ以上のクラス名を指定するために使用されます。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>

ログイン後にコピー

出力:

HTMLのid属性とclass属性の違いは何ですか?