第 5 章 要素のグループ化_html/css_WEB-ITnose

学習ポイント:

1. グループ化要素の概要

2. グループ化要素の分析

講師: Li Yanhui

この章では主に HTML5 におけるグループ化要素の使用法について説明します。いわゆるグループ化は、関連するコンテンツを整理し、明確かつ効果的に分類するために使用される HTML5 要素です。

1つ。グループ化要素の概要 ページ レイアウトのニーズに対応するために、HTML5 にはいくつかのセマンティック グループ化要素が用意されています。

要素名説明pは段落を意味します div セマンティクスを持たないユニバーサル要素。これに対応する要素です。スパン blockquote は彼から引用された大規模なコンテンツを意味します pre は形式が保持されるべきコンテンツを意味します 時間ul,ollidl,dt,ddfigurefigcaption

段落レベルのトピックの遷移、つまり水平線を表します

順序なしリスト、順序付きリストを表します

はリストに使用されますウル、オルで要素

という用語は、一連の用語と定義を含むリストを表します。 dt は dl 内の用語を表し、通常はタイトルとして機能し、dd は dl 内の定義を表し、通常は内容として機能します。

は画像を表します

はFigure要素のタイトルを表します

2.グループ要素の分析

1.

段落の作成

<p>    这是一个段落</p><p>    这也是一个段落</p>

説明:

要素の実際の機能は、内部に含まれるテキストから段落を形成することであり、一定量のスペースが維持されます。段落の間。

2.

gt;一般的なグループ化

<div>    这是一个通用分组</div><div>    这是又一个通用分组</div>

説明:

要素は初期のバージョンで非常に一般的に使用され、レイアウトは

の一般的なグループ化要素によって実行されました。

HTML5 では、セマンティクスにより、他のさまざまなドキュメント要素に置き換えられます。

段落との違いは、テキストの 2 つの段落の上部と下部の間にギャップがなく、ギャップの間隔が
の改行と同じであることです。

3.

他のコンテンツの大部分を引用します

<blockquote>    这是一个大段引自他出内容</blockquote><blockquote>    这是另一个大段引自他出内容</blockquote>

説明:

要素の実際の機能に加えて、

要素と同じ機能もあります。 、段落ギャップの機能があり、インデントの始まりと終わりの高度な機能も含まれています。意味的に言えば、それは彼のコンテンツの大部分を引用することを意味します。

4.

フォーマットされたコンテンツを表示する </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><pre class="brush:php;toolbar:false">    #####            #####                #####            #####        #####

ログイン後にコピー

説明:

 要素の実際の機能は、エディターがそれをどのようにフォーマットするかであり、そのまま表示されます。もちろん、これは単純な組版にのみ適しており、複雑な組版では要件を満たすことができません。 </p> <p> </p> <p>5.<hr>区切りの追加 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><hr>

ログイン後にコピー

説明:

---

要素の実際の機能は、文脈上のトピックの分割を示すことを目的とした分割線を追加することです。

6.

• 順序なしリストを追加します

  <ul>    <li>        张三    </li>    <li>        李四    </li>    <li>        王五    </li>    <li>        马六    </li></ul>

  説明:

  要素は順序なしリストを表し、
  • 要素は内部リスト項目です。

    7.

    1. 順序付きリストを追加します

       <ol>    <li>        张三    </li>    <li>        李四    </li>    <li>        王五    </li>    <li>        马六    </li></ol>

       説明:

       要素は順序付きリストを表し、
       1. 要素は内部リスト項目です。
          要素は現在 3 つの属性をサポートしています
          をサポートしていません

          	ol 要素の属性
          属性名	説明
          スタート	どの順序から数えます:
          reversed	逆の順序で配置されているかどうか: 、主流のブラウザの半分は
          type	はリストの数値タイプを表し、値は次のとおりです: 1、a、A、i、I
          	li 要素の属性
          属性名	説明
          値	項目の番号を強制的に設定します。

          <li value="7">王五</li>

          8.

          説明リストを生成します

          <dl>    <dt>        这是一份文件    </dt>    <dd>        这里是这份文件的详细内容 1    </dd>    <dd>        这里是这份文件的详细内容 2    </dd></dl>

          説明: これら 3 つの要素は全体ですが、

          &

          ;すべてが表示される必要はありません。

          9.

          イラストを使用する

          <figure>    <figcaption>        这是一张图    </figcaption>    <img src="img.png"></figure>

          説明: これら 2 つの要素は通常、画像のレイアウトに使用されます。