一般的なブロックレベル要素とインライン要素とその使用法をマスターする

一般的なブロック レベルの要素とインライン要素とその使用法を習得するには、特定のコード例が必要です。

HTML では、要素はブロック レベルの要素とブロック レベルの要素に分割できます。インライン要素。 Web ページを開発し、ページ構造を理解するには、その特性と使用法を理解して習得することが重要です。この記事では、一般的なブロックレベル要素とインライン要素を紹介し、具体的なコード例をいくつか示します。

1. ブロックレベルの要素

ブロックレベルの要素は、HTML ではブロックの形式で表示され、専用の行を占有し、コンテキスト内に新しい独立したブロックを作成します。一般的なブロック レベルの要素は次のとおりです。

<li><div>: HTML ドキュメント内のパーティションまたはエリア ブロックを定義するために使用されます。これは最も一般的に使用されるブロックレベル要素の 1 つであり、他の要素をラップしてレイアウト分割とスタイル制御を実現するために使用できます。 <pre class='brush:html;toolbar:false;'>&lt;div&gt; &lt;h1&gt;Hello, World!&lt;/h1&gt; &lt;p&gt;This is a paragraph.&lt;/p&gt; &lt;/div&gt;</pre><ol start="2"><li> <code><p></p>: 段落を定義するために使用されます。 HTML では、通常、段落は連続したテキスト コンテンツを表示するために使用されます。

<p>This is a paragraph.</p>

<li> <h1></h1> ~ <h6></h6>: タイトルの定義に使用されます、<h1></h1> は最高レベルの見出し、<h6></h6> は最低レベルの見出しです。

<h1>This is a heading.</h1>

<li> <ul></ul>: 順序なしリストの定義に使用され、リスト項目は <li> 要素で囲まれます。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<li> <ol></ol>: 順序付きリストの定義に使用され、リスト項目も <li> 要素でラップされます。 。

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

2. インライン要素

インライン要素は、HTML 内でインラインに表示される要素で、専用の行を占有せず、他の要素と同じ行に表示できます。一般的なインライン要素は次のとおりです:

<li> <span></span>: テキストの一部を定義するために使用され、通常はテキストをマークしたり、スタイルを制御したり、追加のセマンティック情報を提供したりするために使用されます。

<p>This is a <span style="color: red;">red</span> text.</p>

<li> <a></a>: ハイパーリンクを定義し、href 属性を通じてリンクのターゲット URL を指定するために使用されます。

<a href="https://www.example.com">Click here</a> to visit our website.

<li> <strong></strong>: テキスト コンテンツを強調するために使用され、通常は太字で表示されます。

<p><strong>This is a strong text.</strong></p>

<li> <em></em>: テキストの内容を斜体にしてその重要性を強調するために使用されます。

<p><em>This is an emphasized text.</em></p>

<li> <img alt="一般的なブロックレベル要素とインライン要素とその使用法をマスターする" >: 画像を挿入するために使用され、src 属性を通じて画像の URL を指定します。

<img src="image.jpg" alt="Description">

ブロックレベル要素には他の要素を含めることができ、インライン要素にはテキスト コンテンツまたは他のインライン要素のみを含めることができることに注意してください。

概要:

一般的なブロックレベル要素とインライン要素とその使用法をマスターすることで、HTML ページの構造をより深く理解し、それらを使用して Web ページを構築およびレイアウトできるようになります。実際の開発では、ニーズに応じて適切な要素を選択し、さまざまな機能やスタイル効果を実現できます。上記のコード例は、読者がこれらの要素をよりよく理解し、使用できるようにすることを目的としています。