ホームページ > 記事 > ウェブフロントエンド > HTMLのid属性とclass属性の違いは何ですか?
HTMLのid属性とclass属性の違いは何ですか?
- 青灯夜游オリジナル
- 2019-04-15 11:23:4715027ブラウズ
HTML では id 属性と class 属性がよく使われますが、これらは似たような機能を持っていますが、両者の違いは何でしょうか?次の記事では、HTML の id 属性と class 属性を簡単に比較し、HTML の id 属性と class 属性の違いを紹介しますので、皆様の参考になれば幸いです。 [ビデオチュートリアルの推奨: HTML チュートリアル ]
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 要素の 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>出力:
説明: 同じクラス名がページ内に複数回出現する可能性があるため、参照できます。同じCSSを繰り返し使用することで作業負荷とコード量が軽減されます。
概要
id 属性と class 属性の違いは次のとおりです: id は一意であり、ページ内に最大 1 回しか表示できません。は 1 つの要素に適用され、繰り返し使用することはできません。クラスはユニバーサルであり、ページ上に複数回表示したり、複数の要素に適用したりできます。 以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！以上がHTMLのid属性とclass属性の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。