HTMLインライン要素とブロックレベル要素の基本概念と使用例_HTML/Xhtml_Webページ制作

HTML タグは、インライン要素とブロックレベル要素の 2 つのタイプに分類されます。まず、インライン要素とブロックレベル要素の概念を理解しましょう。

ブロックレベル要素: は通常、インライン要素を収容できる他の要素のコンテナであり、他のブロックレベル要素は同じ行にある他の要素を除外します。幅と高さは ( height) 属性で設定でき、通常のフローのブロックレベルの要素は垂直に配置されます。共通のブロック要素は「div」

インライン要素 (インライン要素): インライン要素は、テキストまたは他のインライン要素のみを収容できます。これらは、他のインライン要素を同じ行に配置できます。高さと幅は設定できません。一般的なインライン要素は「a」です。

ブロックレベル要素の概念によれば、ブロックレベル要素の前後に改行があることがわかります。これは、要素の前後に
タグを追加するのと同じです。ブロックレベルの要素はブロックまたは長方形として考えることができるため、ブロックレベルの要素は高さと幅の属性を設定できます

例:

css ファイル:

コードをコピーコードは次のとおりです:

#div1{
幅:200px;
高さ:200px;
背景:#666
}
div2{
幅:200px; 200px;
背景:#F00
}

コードをコピー

コードは次のとおりです:

div1

ブロックレベルの要素は、同じ行にある他の要素を除外します。 it

div2
ブロックレベル要素はそれと同じ行にある他の要素を除外します

;


表示効果:


2 つの div 要素が同じ行にありません

インライン要素の概念によれば、インライン要素の前後に改行がないことがわかります。インライン要素は線と考えることができるため、高さと幅の属性を設定することはできません。

ブロック要素タグ

address - アドレス

blockquote - ブロック引用符 center - 中央揃え dir - ディレクトリリスト

div - 一般的に使用されるブロックレベルは CSS レイアウトのメインタグでもあります

dl - 定義リスト
フィールドセット - フォーム コントロール グループ
フォーム - インタラクティブ フォーム
h1 - 見出し
h2 - サブタイトル
h3 - レベル 3 タイトル
h4 - レベル 4 タイトル
h5 - 5レベル タイトル
h6 - レベル 6 タイトル
hr - 水平区切り線
isindex - 入力プロンプト
menu - メニュー リスト
noframes - フレームのオプションのコンテンツ (フレームをサポートしていないブラウザの場合) this block content
noscript - オプションのスクリプト コンテンツ (スクリプトをサポートしていないブラウザーにこのコンテンツを表示します)
ol - ソート フォーム
p - 段落
事前にフォーマットされたテキスト
table - table
ul - 未分類のリスト


インライン要素

a - アンカー

abbr - 略語頭字語 - 最初の単語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 - タイプライターのテキストを定義
var - 変数を定義