divタグとは何ですか? HTMLでdivタグを使用するにはどうすればよいですか?-htmlチュートリアル-php.cn

divタグとは何ですか? HTMLでdivタグを使用するにはどうすればよいですか?

不言

リリース： 2018-11-26 13:36:26

オリジナル

8128 人が閲覧しました

HTML の div タグは、Web ページを実現するための重要な基礎であり、HTML の知識を学ぶのに不可欠です。この記事では、HTML での div タグの使用方法を紹介します。

div タグとは何ですか?

div タグは、必要な構造のセットを表します。 divタグに挟まれた文字をブロックに分割することが目的です。したがって、個別の div タグは、色の変更や文字スタイルの変更などの効果を持ちません。

また、div タグが他の要素に適合しない場合は、まだ使用しないでください。

しかし、実際にはどの要素を指定する必要がある場合には div タグを使用することがよくあります。

div タグに id と class を追加し、CSS を使用して id と class を処理することで、div タグ内の色を変更したり、別のスタイルに変更したりできます。

div タグと Section タグの比較

ドキュメント上に 1 つのコレクションを表示するには、section タグの方が適切だと思います

section タグドキュメントのグループを示すために使用されます。

セクションにはセクションの項目があると思います

セクション句の概念と同じように、セクションタグはブロックであり、通常は抽出しても意味がありません。

新聞記事では章項目だけを切り取っても記事全体の意図は伝わらないと思います。

比較すると、section タグは div タグとは使用方法が異なりますが、グループを表す文として使用されます。

divタグの使い方

divタグは以下のように記述します。

<div>内容</div>

ログイン後にコピー

上で述べたように、div タグは id と class を追加することで非常に便利です。 idとclassの付与方法は以下の通りです。

<div id="id名">内容</div>
<div id="class名">内容</div>

ログイン後にコピー

ところでidとclass

ところでidとclassって何ですか？ id と class は属性と呼ばれ、id は I has a D 番号のようなもので、同じ ID 名の付いたものはページ内で 1 回しか使用できません。

代わりに、一度だけ使用するものには id 属性を使用します。

一方、class 属性は同じページで複数回使用できます。「この要素とこの要素は同じ色」を指定したい場合はclass属性を使います。

もちろん、class 属性は 1 回しか使用しなくても使用できます。

実際の例を見てみましょう

まず div タグで囲まれた結果を見てみましょう

id と class については、次のように指定します。各名詞の色の名前。

次のソースコードを使用して div.html を作成し、ブラウザで開きます。

div.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="red">苹果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="lightyellow">蒲公英</div>
  </body>
</html>

ログイン後にコピー

ブラウザでの表示効果は次のとおりです:

divタグとは何ですか? HTMLでdivタグを使用するにはどうすればよいですか?

上記はテキストのみを表示します。 CSS を使用して背景に色を付けてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
 #red {
        background-color: #FF0000;
      }
      .skyblue {
        background-color: skyblue;
      }
      .yellow{
        background-color: yellow;
      }
      .blue{
        background-color: blue;
      }
      .beige{
        background-color: beige;
      }
 </style>
  </head>
  <body>
  <div id="red">苹果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="beige">蒲公英</div>
  </body>
</html>

ログイン後にコピー

ブラウザでの表示効果は以下の通りです。

divタグとは何ですか? HTMLでdivタグを使用するにはどうすればよいですか?