HTMLのレイアウトタグとリストタグを図解で詳しく解説

レイアウトマーク

最初に紹介するレイアウトマークはpマークで、WebページのレイヤーやWebページのパーティションとして使用できます。 p を Web ページのレイヤーとして使用すると、Web サイトでよく見るフローティング広告と同じように、Web ページ上で浮遊する効果を実現できます。 p が Web ページを分割するとき、Web ページのレイアウトをレイアウトし、Web ページを複数のモジュールに分割し、これらのモジュールの構造から Web ページを構築できます。
p には style 属性があります。この属性は、たとえば、背景色、コンポーネントの幅と高さ、コンポーネントの位置などを調整するために使用されます。基本的に、スタイルに関連するすべてのものです。 style 属性を使用して制御できます。
例:

実行結果:

実行結果から、1 つの p が設定されたサイズを占め、各 p が別々であり、Web ページを個別の部分に分割していることがわかります。

Baidu 検索のソース コードを見ると、このページで最もよく使用されているタグは p であることがわかり、このページが p タグを使用してレイアウトされていることもわかります:

これを簡単に分析します。ページのレイアウトに関しては、ページ全体から、このページはページ全体をカバーするために p を使用し、この p 内で上、中、下のレイアウト方法が使用されていることがわかります。 p、ページ全体をカバーする p :

内部の一般的な上部、中央、下部のレイアウト:

上部:

中:

次:

Web ページ全体の一般的なレイアウトは次のとおりです:

上記の単純な分析から、ほぼすべての p が p でネストされ、その後 1 つずつレイアウトし続けることがわかります。 Web ページは、これらのブロックを組み合わせてページを構築するようなものです。これは、P パーティショニングの応用です。

このようなレイアウト方法を模倣して「Baidu」を作成することもできます。コード例:

実行結果:

フォーム送信ページは、Baidu の受信ページを使用して検索を実現できます:

検索機能の実装は非常に簡単です。まず、Baiduを使用して気軽に検索し、サーバーを受信するページのアドレスと検索キーワードを示す属性を取得できます:

次に、アクション属性でフォームのサーバー受信ページのアドレスを入力し、テキスト ボックスの name 属性を wd に割り当てて、Baidu のサーバー受信ページを使用して検索機能を実装します。

上記は p パーティションの応用です。実際、p のパーティションは行のようなもので、p の層は列のようなものです。 コード例:

。

実行結果:

実行結果から、p は列ごとであり、ウィンドウがズームされると位置が自動的に変更されることがわかります:

table タグと p タグは両方とも次のタグです。 Web ページのレイアウトに属し、テーブルは主にテーブルを作成するために使用されます。テーブルで一般的に使用される属性は次のとおりです。テーブルの境界線、セルパディングテーブルの充填度、セルスペースの内部間隔距離。テーブルは thead、tbody、tfood、tr でネストする必要があります。 、th、td、およびその他のタグを使用してテーブルを実装します。
thead はテーブルの先頭部分を表すために使用され、tbody はテーブルのコンテンツ部分を表すために使用され、tfood はテーブルの末尾部分を表すために使用されます。これら 3 つのタグは、データをクロールするときにテーブルの特定の部分がどの部分であるかを識別するためだけに実際の効果はありません。
tr はテーブルの行を実装し、th はテーブルのヘッダーを実装し、td はテーブルのセルを実装します。コード例:

。

実行結果:

td タグには、列をマージできるようにする Colspan 属性があります。この属性の数は、マージされる列の数を表すことに注意してください。コード例:

実行結果:

実行結果から、セルの内容がテーブルから絞り出されていることがわかります。セルを削除する対応する方法はありません。削除する対応する列の数:

cellpadding 属性の値は、テーブルの充填度を変更できます。値が大きいほど、テーブルの内部間隔を変更できます。コード例:

border は境界線を削除します。テーブルのコード例:

実行結果:

style 属性を使用してテーブルの色を調整できます。 コード例:

実行結果:

上記テーブルを作成するための table の基本的な使い方を紹介しました。次に、ナビ: ナビゲーション バーとフッター: Web ページの末尾を紹介します。この 2 つのマークは、実際には説明として機能するだけであり、実際には使用されません。データをクロールするときに、これがナビゲーション バーであり、これが Web ページの終わりであることを他の人に知らせるためのコード例:

。

実行結果:

上記はWebページレイアウトタグの内容、マインドマップまとめ:

リストマーク

最初に紹介するリストはULの順序なしリストであり、順序なしリストは項目のリスト。このリスト内の項目は太字の点 (通常は小さな黒丸) でマークされています。リスト効果を実現するには、ul を li にネストする必要があります。順序なしリストは タグで始まり、各リスト項目は で始まります。 コード例:

この種の順序なしリストが最も一般的です。 used 順序なしリストの元の効果を調べません。これは、スタイルが使用されていないためです。順序なしリストの特性は、複数項目のリストやナビゲーション バーのリスト ボックスに適しています。たとえば、この Web ページは ul 順序なしリストを使用して作成されたナビゲーション バーです。

次は、ol 順序付きリストです。順序付きリストの場合は true。リスト項目には自己増加する番号が付けられるため、順序付きリストと呼ばれます。順序付きリストは タグで始まり、各リスト項目も 実行結果:

定義リストは単なる項目のリストではなく、項目とそのコメントの組み合わせであるためです。カスタム リストは タグで始まり、各カスタム リスト項目は で始まります。コード例:

よく使用されるタグリスト:

以上がHTMLのレイアウトタグとリストタグを図解で詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。