HTML ブロック要素とインライン要素の詳細な紹介

原文はこちら

ブロックレベル要素の分類
ブロックレベル要素は、構造体に適用されるか内容に適用されるかに応じて、構造化ブロック要素、端子ブロック要素、マルチターゲットブロック要素の3種類に分類されます。
1. 構造化ブロック要素
このタイプの要素は、ドキュメントを構造化するために使用されます。優れたドキュメント構造は、検索エンジンや他のテクノロジー (JavaScript など) にとって非常に有益です。これらには意味的な意味はなく、文書の構成を定義するだけであり、文書の内容は反映されません。
主な構造化ブロック要素
*

*

* li>
*

;
*

*
*
* 2. このような要素は、構造からコンテンツに移動するために使用されます。意味的な意味を持ち、コンテンツの性質を示すことができます。端子台要素は構造の終端に属し、他のブロック レベルの要素を含めることはできません。テキストまたは行レベルの要素のみを含めることができます。 serminalブロック要素 *＆h1＆gt;＆lt; gt;自由に拡張または入れ子にすることができ、ターミナルの形式で表示されます。多目的ブロック要素は、構造化された方法で使用される場合には構造的な意味を持ち、終端形式で使用される場合には意味的な意味を持ちます。
マルチターゲット ブロック要素には、ブロック要素またはコンテンツ (テキストと行レベル要素の組み合わせがコンテンツ) のいずれかを含めることができますが、同時に両方を含めることはできません。コンテンツはブロック要素内に配置する必要があります。ブロック要素は、行レベルの要素およびテキストの兄弟として使用しないでください。HTML バリデーターの制限のため、現時点ではこの状況を検出する方法はありませんが、回避する必要があります。
マルチターゲットブロック要素
*


*

• 
  *
  
  CSS レイアウトについて話す場合事前に知っておくべきことがいくつかあります。さまざまな HTML タグ/要素について、ブロック (ブロック要素) またはインライン (
  インライン要素
  ) のいずれかのブロック レベルから分類できます。
  ブロック要素の特徴:
  * 常に新しい行で開始します
  * 高さ、行の高さと上下の余白はすべて制御できます
  * 幅が設定されていない限り、デフォルトの幅は、それが配置されているコンテナーの 100% です。
  inline 要素の特徴:
  * と他の要素は同じ行にあります。
  * 高さ、行の高さ、上下の余白は変更できません。
  * 幅は、それに対応するテキストまたは画像の幅です。かわった。
  それらのプロパティと用途については、以下でさらに説明します:
  ◎ブロック要素 (ブロック要素) は、通常、他の要素のコンテナとして使用され、インライン要素や他のブロック要素を収容できます。
  デフォルトでは、ブロック要素は一度に新しい行に下方向に配置されることがわかっています。CSS でスタイルを制御することで、このデフォルトのレイアウト モードを変更して、必要な場所にブロック要素を配置できます。 tableタグもブロック要素の一種であることに注意してください。ページの読み込み速度の違いは別として、tabletableとCSS+pに基づいたレイアウトに基づいています(結局テーブルが表示されます)。 content 要素がロードされます))、その他の違いはありません。しかし、ページのソースコードから判断すると、その違いは非常に大きいです。優れた構造の概念に基づいて設計された CSS レイアウトのソース コードにより、少なくとも Web 開発の経験のないユーザーでも連続したページ コンテンツを簡単に見つけることができます。この観点から、CSS レイアウト コードはより優れた審美性を備えている必要があります。
  モジュール p をボックスとして想像し、それを自分の希望に従って配置して、同じパターンに従う完全なコンテンツを形成することができます。 Block要素（ブロック要素）HTMLタグ
  CATECTORY詳細 * P-一般的に使用されるブロックレベルは簡単です。CSSレイアウトのメインタグ* フォーム - インタラクティブ フォーム (他のブロック要素を収容するためにのみ使用できます) * h1 - 見出し
  * h2 - サブタイトル
  - メニューリスト * noframes - フレームのオプションのコンテンツ (サポートされていないブラウザーにはこのブロックのコンテンツを表示します)フレーム ) * noscript - オプションのスクリプト コンテンツ (スクリプトをサポートしていないブラウザーにはこのコンテンツを表示します)
  * ol - ソート フォーム
  * p - 段落 * 事前にフォーマットされたテキスト * table - テーブル
  * ul - ソートされていないリスト
  ◎インライン要素 (インライン要素) は、一般に意味レベル (セマンティック) に基づいた基本要素であり、テキストまたは他のインライン要素のみを収容できます。
  ブロックとインラインの違いを明確に示すために、それらのデモンストレーションを使用できます。それぞれの代表的な要素 p と span を説明します: XXXXXXXXX これは p レイアウトです
  XXXXXXXXX
  p新しい行を開始します、その形状は内部のテキストの影響を受けません
  XXXXXXXこれはスパンレイアウトですXXXXXXX すべての要素は 1 行にあり、スパンには含まれているだけですテキスト
  インライン要素 (インライン要素) HTML タグ分類の詳細
  * a -
  アンカー
  
  * abbr - 略語
  * 頭字語 - 最初の単語
  * b - 太字 (非推奨) * bdo - bidi オーバーライド * big - 大きなフォント * br - 改行 * cite - 引用 * code - コンピューターコード (ソースコードを引用する場合に必要) * df n - フィールドを定義します
  * em - 強調
  *
  font
  - フォント設定 (推奨されません)
  * i - イタリック
  * img - 画像
  * input - 入力ボックス
  * kbd - キーボード テキストを定義
  * label - テーブル ラベル
  * q - 短い引用符
  * s - ダッシュ (非推奨)
  * samp - サンプル コンピューター コードを定義
  * select - 項目の選択 * small - 小さいフォントのテキスト * span - 一般的に使用されるインライン コンテナ、テキスト内のブロックを定義 * ストライク - 下線
  * 強 - 太字の強調
  * sub - 下付き文字
  * sup - 上付き文字
  * textarea - 複数行テキスト入力ボックス
  * tt - テレックス テキスト
  * u - 下線
  * var -
  変数の定義
  
  ◎変数要素は、環境による上記 2 つの変化に基づいており、その 基本的な概念 は、要素がその要素であるかどうかを決定することですコンテキストに基づくブロック要素またはインライン要素です。カテゴリが決定されると、ブロック要素またはインライン要素のルールに従います。
  可変要素 HTML タグ分類の詳細 * アプレット - Java アプレット * ボタン -
  ボタン
  
  * del - 削除 テキスト
  * iframe - インライン フレーム * ins - 挿入されたテキスト *
  map
  - 画像エリア ブロック ( map)
  * object -
  object object * script - クライアント スクリプト しかし、CSS を通じて、上記の表の HTML タグ分類の制限を取り除き、さまざまなタグ/要素のプロパティに必要なものを自由に適用できます。 。たとえば、display:inline 属性をブロック要素 [ul] タグに追加して、本来は垂直方向のリストを水平方向に表示することができます。これは、ブログナビゲーション
  バーを設定するときに広く使用されており、完全にインラインにすることもできます。 element [ cite ] display:block のような属性を追加して、毎回改行する属性も持たせます。
  

以上がHTML ブロック要素とインライン要素の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。