ホームページ > 記事 > ウェブフロントエンド > HTMLのdivタグの使い方は？ div の使用例を次に示します。

HTMLのdivタグの使い方は？ div の使用例を次に示します。

寻∝梦オリジナル: 2018-08-28 13:54:2619090ブラウズ

この記事では、CSS を使用せずに div タグを使用することもできますが、CSS を追加すると、div タグの具体的な使用方法をよりわかりやすく表示できます。ここでは HTML div の意味を紹介します。見てください。今すぐ一緒に見てみましょう

まず第一に、div の意味と使い方について話しましょう:

ここで定義の紹介ですof div:

< ;div> はドキュメント内の部門またはセクション (部門/セクション) を定義できます。

タグは、ドキュメントを独立した異なる部分に分割できます。これは厳密な組織ツールとして使用でき、それに関連付けられた書式設定は一切使用されません。

に id または class を付けると、タグがより効果的になります。

ここでは div の使用法を紹介します:

はブロックレベルの要素です。これは、その内容が自動的に新しい行で始まることを意味します。実際、改行は

に固有の唯一の書式設定動作です。

のクラスまたは ID を介して追加のスタイルを適用できます。

すべての

にクラスや ID を追加する必要はありませんが、そうすることで一定の利点があります。

同じ

要素に class 属性または id 属性のいずれかを適用することは可能ですが、どちらか 1 つだけを適用するのが一般的です。 2 つの主な違いは、class は要素のグループ (類似した要素、または特定のタイプの要素として理解できる) に使用されるのに対し、id は個々の固有の要素を識別するために使用されることです。

HTML div タグプロンプトボックス:

ヒント:

要素は、Web ページをレイアウトするために CSS と一緒によく使用されます。

ヒント: デフォルトでは、ブラウザは通常、

要素の前後に改行を置きます。ただし、CSS を使用してこれを変更できます。

今ケースを分析してみましょう:

<body>
 <h1>PHP中文网</h1>
  <p>编程语言教室，里面有很多课程...</p>
  ...
 <div class="news">
  <h2>php中文网首页 1</h2>
  <p>关于HTML5的东西都在这里...</p>
  ...
 </div>
 <div class="news">
  <h2>php中文网首 2</h2>
  <p>关于HTML的东西都在这里...</p>
  ...
 </div>
 ...
</body>

このケースの効果は図に示すとおりです:

HTMLのdivタグの使い方は？ div の使用例を次に示します。

次に、例の状況を説明しましょう:

ご覧のとおり、上記の段落の HTMLニュースサイトの構造を模倣しています。これらの各 div は、各ニュース項目のタイトルと概要を結合します。これは、div がドキュメントに追加の構造を追加することを意味します。同時に、これらの div は同じタイプの要素に属しているため、class="news" を使用してこれらの div を識別できます。これにより、div に適切なセマンティクスが追加されるだけでなく、div をフォーマットするためのスタイルの使用も容易になります。、一石二鳥です。

さて、上記は HTML div タグの使用法に関するものですが、多くの使用法は CSS と一緒に使用されるため、CSS スタイルを使用しない場合はここだけがポイントです。ご質問がございましたら、以下からお問い合わせください

【編集者のおすすめ】

HTMLメタタグの役割とは何ですか？ HTMLメタタグの使い方を紹介

HTMLベースタグの使い方は？ベースタグの使い方（例あり）

以上がHTMLのdivタグの使い方は？ div の使用例を次に示します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML の ul タグは何を意味しますか? HTMLのulタグの役割を詳しく解説次の記事：HTML の ul タグは何を意味しますか? HTMLのulタグの役割を詳しく解説

続きを見る