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

2.

gt;一般的なグループ化

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

説明:

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

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

HTML5 では、セマンティクスにより、他のさまざまなドキュメント要素に置き換えられます。 e388a4556c0f65e1904146cc1a846bee 段落との違いは、テキストの 2 つの段落の上部と下部の間にギャップがなく、ギャップの間隔が 0c6dc11e160d3b678d68754cc175188a の改行と同じであることです。

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

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

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

4.e03b848252eb9375d56be284e690e873フォーマットされたコンテンツを表示する

<pre class="brush:php;toolbar:false">    #####            #####                #####            #####        #####

説明: e03b848252eb9375d56be284e690e873 要素の実際の機能は、エディターがそれをどのようにフォーマットするかであり、そのまま表示されます。もちろん、これは単純な組版にのみ適しており、複雑な組版では要件を満たすことができません。

5.f32b48428a809b51f04d3228cdf461fa区切りの追加

<hr>

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

6.ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6順序なしリストを追加します

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

説明: ff6d136ddc5fdfeffaf53ff6ee95f185 要素は順序なしリストを表し、25edfb22a4f469ecb59f1190150159c6 要素は内部リスト項目です。

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

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

説明: c34106e0b4e09414b63b2ea253ff83d6 要素は順序付きリストを表し、25edfb22a4f469ecb59f1190150159c6 要素は内部リスト項目です。 c34106e0b4e09414b63b2ea253ff83d6 要素は現在 3 つの属性をサポートしています

をサポートしていません

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

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

8.5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742説明リストを生成します

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

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

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

9.24203f2f45e6606542ba09fd2181843a614eb9dc63b3fb809437a716aa228d24イラストを使用する

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

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