HTML5 のインライン要素とブロックレベル要素の詳細

HTML5 のインライン要素とブロックレベル要素を理解するには、特定のコード例が必要です。

HTML5 は、現在の Web 開発で広く使用されているマークアップ言語です。 HTML5 では、要素はインライン要素とブロックレベル要素の 2 つの主なカテゴリに分類されます。 HTML5 を正しく使用するには、これら 2 つの要素の特性を理解することが非常に重要です。以下では、読者がそれらの違いをよりよく理解できるように、コード例を通じてインライン要素とブロックレベル要素の特徴を説明します。

インライン要素は、HTML ドキュメント内でデフォルトでインラインに表示される要素を指します。インライン要素は通常、独自の行を占有せず、他の要素と同じ行を共有します。一般的なインライン要素には、<span></span>、<a></a>、<img alt="HTML5 のインライン要素とブロックレベル要素の詳細" > などがあります。インライン要素の使用方法を示す例を次に示します。

<p>这是一段包含行内元素的文本，其中包括 <span   style="max-width:90%">红色文本</span> 和 <a href="https://www.example.com">链接</a>。</p>

上記の例では、 <span></span> は、テキストにスタイルを追加するために使用されるインライン要素です。色を変える。 <a></a> も、ハイパーリンクの作成に使用されるインライン要素です。これらのインライン要素は同じ行に表示されます。

インライン要素とは異なり、ブロックレベル要素は、HTML ドキュメント内でブロックレベル形式で表示される要素です。ブロックレベルの要素は通常、単独で 1 行を占め、その前後に改行が入ります。一般的なブロックレベル要素には、<div>、<code><p></p>、<h1></h1> などが含まれます。以下に、ブロック レベル要素の使用方法を示す例を示します。

<div>
  <h1>这是一个标题</h1>
  <p>这是一个包含块级元素的段落。</p>
</div>

上の例では、

は、別の領域を作成するために使用されるブロック レベル要素です。ピース。 <h1></h1> および <p></p> もブロックレベルの要素であり、それぞれ見出しと段落を作成するために使用されます。これらのブロックレベルの要素は独自の行を占め、その前後に改行があります。

インライン要素をブロックレベル要素に、またはブロックレベル要素をインライン要素に変換したい場合があります。 HTML5 では、これは CSS display プロパティを使用して実現できます。インライン要素をブロック レベルの要素に変換する方法と、ブロック レベルの要素をインライン要素に変換する方法を示す例を次に示します。

<style>
  .block-element {
    display: block;
  }
  
  .inline-element {
    display: inline;
  }
</style>

<span class="block-element">这是一个行内元素被转换为块级元素的示例。</span>

<div class="inline-element">
  <h2>这是一个块级元素被转换为行内元素的示例。</h2>
  <p>这是一个包含块级元素的段落。</p>
</div>

上の例では、display:block; を設定します。 、インライン要素 <span></span> をブロックレベルの要素に変換します。 display:inline; を設定して、ブロックレベル要素 <div> をインライン要素に変換します。このようにして、特定のニーズに基づいて要素の表示方法を制御できます。 <p>上記のサンプル コードを通じて、HTML5 のインライン要素とブロックレベル要素の特性をよりよく理解できます。インライン要素は通常、単独で 1 行を占有せず、他の要素と 1 行を共有します。ブロックレベル要素は通常、単独で 1 行を占有し、前後に改行が追加されます。同時に、CSS の <code>display プロパティを使用して要素の表示方法を変更する方法も学びました。この知識は、HTML5 を正しく使用して Web およびアプリケーションの開発を改善するのに役立ちます。