htmlタグのネストルールの紹介
XHTMLのタグには、div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong ......といったものがたくさんあります。これらのタグを使ってページ構造を構築する場合、無限に入れ子をすることができますが、入れ子には一定のルールがあります。しかし、ネストにも一定のルールが必要で、無差別にネストする個人の習慣に任せるのではなく、では、htmlタグのネストのルールとは何なのでしょうか?
I. HTMLタグにはブロックレベル要素(block)、インライン要素(inline)などがある
1. ブロックレベル要素
一般に、サイトのアーキテクチャ、レイアウトを構築し、コンテンツを運ぶために使用される......。これらのタグが含まれる。
address, blockquote, center, dir, div, dl, dt, dd,fieldset, form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul
2. インライン要素
一般に、サイトコンテンツの細部や部分において、強調、スタイルの区別、上付き文字、下付き文字、アンカーなどのために使用されます。以下のタグがインライン要素になります。
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea tt, u, var
II. HTMLタグのネストに関するルール
1. ブロック要素はインライン要素またはいくつかのブロック要素を含むことができますが、インライン要素はブロック要素を含むことができません。
<div><h1></h1><p></p></div> -- on </p> <p> <a href="#"><span></span></a> -- to </p> <p> <span><div></div></span> -- Wrong
2. 2. ブロックレベル要素は <p> 内に配置することはできません。
<p><ol><li></li></ol></p> -- Wrong</p> <p> <p><div></div></p> -- Wrong
3. 3. インライン要素のみを含み、それ以上のブロックレベル要素を含むことができない、いくつかの特別なブロックレベル要素があります。
h1, h2, h3, h4, h5, h6, p, dt
4. liはdivタグを含むことができる -- これは別に記載する必要はないのですが、ウェブ上の多くの人が少し混乱しているので、ここで少し説明します。
liタグもdivタグもコンテンツコンテナであり、地位は同等で、階層構造(h1、h2など^_^)はなく、liタグは親のulやolまで収容できることを知っておくことが重要で、なぜliがdivを収容できないと考える人がいるのでしょうか。liをケチと見ないでください、liをかなりやせ我慢と見ないでください、実はliは大きな心を持っているのです.
5. ブロックレベル要素に並ぶブロックレベル要素、インライン要素に並ぶインライン要素。
<div><h2></h2><p></p></div> -- for </p> <p> <div><a href="#"></a><span></span></div> - - vs</p> <p> <div><h2></h2><span></span></div> -- Wrong
関連
-
html 模倣百科事典ナビゲーションドロップダウンメニュー機能
-
フォームタグを使用した登録ページのHTMLサンプルコード
-
Iframeページの内部ナビゲーションウィンドウについて簡単にご紹介します。
-
HTMLでフォームコントロールを無効にする2つの方法 readonly と disabled
-
ボタンで送信の種類が指定されておらず、ボタンをクリックしても指定されたURLにジャンプしない
-
HTMLドロップダウンボックスのSELECTオプションを変更するさまざまな方法
-
htmlのテーブルの行と列を結合する問題を解決する。
-
タグをよく見て、どのように使うかを定義したことがありますか?
-
HTML DOCTYPE の略。
-
ウェブサイトにファビコンを追加するためのヒント ウェブサイトの前に小さなアイコンを設置する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン