HTML のブロックレベル要素と行レベル要素、特殊文字、ネスト規則

基本的な HTML Web ページタグのネストルールを紹介する場合、最初に説明する必要があるのは要素の分類です。要素はブロックレベル要素と行レベル要素に分けられます。ブロックレベル要素とは何ですか? 1 行を占めることができ、幅と高さを設定できます。デフォルトは 100% です。行レベルの要素はその逆で、その内容によって幅と高さが決まり、特殊文字はテキストとして扱われます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>HTML ブロックレベル、行レベル要素、特殊文字、ネストルール</title>
</head>
<本文>
    <!-- ブロック要素: 1 行を占め、幅と高さを設定できます。デフォルトの幅は 100% です -->
    ブロック要素はテキストとコンテナタイプに分かれています。テキストブロック要素: p、h1-h6
    コンテナ ブロック要素: div、table、tr、td、frame、ul>li、ol、dl、dt、dd (シーケンス)
    <!-- 行要素: 1 行を占有せず、幅と高さはコンテンツによって異なります -->
    行要素: a img input strong em del span
    特殊文字: リテラル br &nbsp hr
</本文>
</html>

ネストルールは次のようにまとめられます。

1. ブロック要素は行要素内にネストできる

2. 行要素は行要素内にネストできる

3. 行要素はブロック要素内にネストできない

4. テキストブロック要素はブロック要素内にネストできません

5. コンテナブロック要素はブロック要素をネストできる

以下のブログ投稿では、HTML Web ページの基本概念、HTML Web ページの基本構造、HTML 基本タグ、画像、テキスト、ハイパーリンク、リスト、表の紹介、HTML 基本タグのインタラクティブ原則、ラジオボタン、チェックボックス、ドロップダウンボックス、Web ページの DIV + CSS レイアウトと ifame の従来のレイアウトの比較など、すべて HTML の一部について説明しています。HTML を学ぶ主な目的は、ページを構築するためのセマンティックネストルールを理解することです。ページの CSS とインタラクティブロジック JS については、以下で実践する内容です。

<<: MySQL でパーセンテージと最初の数パーセントを表示する方法

>>: ウィンドウの中央にブロック要素の位置を設定する方法