HTMLのdivとspanの比較

この記事ではHTMLにおけるdivとspanの比較を中心に、pとspanの使い方と比較についても紹介しています

1. ;span> ;

1.

タグ

タグはパーティションまたはセクション (pision/section) を定義できます。これにより、文書が独立した異なる部分に分割されます。

タグは厳密な整理ツールとして使用でき、HTML マークアップと表示スタイルを分離するという考えを含む、それに関連付けられた書式設定は使用されません。実際の作業では、タグをより効果的にするために、

タグに id または class 属性を指定することがよくあります。

はブロックレベルの要素であり、その内容は自動的に新しい行で始まります。そして実際には、改行は

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

次の HTML は、ニュース Web サイトの構造をシミュレートします。

タグの各ペアは、各ニュース項目のタイトルと概要を結合します。つまり、

はドキュメントに追加の構造を追加します。同時に、これらの

は同じタイプの要素に属しているため、class="news" 属性を使用してこれらの

タグを識別できます。

のみを提供し、適切なセマンティクスを追加し、

をフォーマットするためのスタイルのさらなる使用を容易にします。

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

2. タグ

タグは、ドキュメント内のインライン要素をグループ化するために使用されます。

  <span style="color: Red">注意：</span>

2. ブロックレベル要素とインライン要素

ブロックレベル要素 (ブロック要素) とインライン要素/インライン要素 (インライン要素) は、

などの要素は、ブロックレベル要素と呼ばれることがあります。これは、これらの要素がコンテンツのブロック、つまり「ブロック ボックス」として表示されるためです。対照的に、 や などの要素は、その内容が 1 行の「インライン ボックス」に表示されるため、「インライン要素」と呼ばれます。

ブロックレベル要素とインライン要素の概念は固定されておらず、相対的なものです。要素の表示プロパティを使用して、生成されるボックスのタイプを変更できます。これは、display 属性を block に設定することによって、インライン要素 ( 要素など) をブロックレベルの要素のように動作させることができることを意味します。また、display を inline に設定することによって、生成された要素をインライン要素にすることもできます。要素にボックスがまったく存在しないように、表示属性を none に設定することができます。この場合、ボックスとそのすべてのコンテンツは表示されなくなり、ドキュメント内のスペースを占有しなくなります。

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

3. の比較:

span> タグは間隔を分割するために使用されますが、実際のセマンティクスはありません。どちらも主にスタイル シートを適用するために使用されます。 2. 違い:

タグはブロックレベルの要素であり、ブラウザはその前後に改行タグを追加します。 inline 要素の前後に改行タグは自動的に追加されません。

Web ページのレイアウトで 2 つのコンテンツを同じ行に表示する場合、最も簡単な方法は、それらを タグで囲むことです。たとえば、ページには 2 つの隣接する要素があり、1 つは

、もう 1 つは です。同じ行に表示するには、この

を に変更します。もちろん、これは、CSS を通じて

などのタグの表示属性をインラインに設定することによっても実現できます。

要約:

以上がこの記事の全内容です。皆様の学習に役立つことを願っています。 関連する推奨事項:

は、コードを通してjsでdiv、

span

、label

を作成する方法を詳しく説明します。 divのdisplay:inline styleと

span

の違いについて話しましょう。 インライン要素span

の最小の高さ

を定義します

以上がHTMLのdivとspanの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。