HTML (HTML5 を含む) のブロックレベル要素と行レベル (インライン) 要素の研究ノートの概要

1. まず、ブロックレベルの要素と行レベルの(inline)要素とは何なのかを知る必要があります?

ブロック要素の特徴:

①常に新しい行から始めてください。

②高さ、行の高さ、余白、パディングはすべて制御可能です。

③幅が設定されていない限り、デフォルトの幅はコンテナの 100% です。

④ インライン要素やその他のブロック要素を保持できます。

インライン要素の特徴:

① と他の要素は同じ行にあります。

② 高さ、行の高さ、外側のマージン、内側のマージンは変更できません。


③ 幅はそのテキストまたはその幅です。画像 (変更できません)

④ インライン要素にはテキストまたはその他のインライン要素のみを含めることができます。

2. それでは、

ブロックレベル

要素を見てみましょう:

div: ドキュメントセクション section: ドキュメントセクション nav: ナビゲーション header: ヘッダー

article: 記事

aside: 記事サイドバー footer: フッター
details: 要素の詳細
summary: 詳細 要素の表示タイトル
ダイアログ: ダイアログウィンドウ
h1, h2, h3, h4, h5, h6: タイトル
p: 段落
ul: 順序なしリスト
ol: 順序付きリスト
dir: ディレクトリリスト
li: プロジェクト
dl: リスト
dt : リスト項目
dd: 項目の説明
menu: コマンドのメニュー、リスト
menuiitem: メニュー項目
command: コマンド ボタン
form: フォーム
fieldset: 要素の周囲の境界線 (フォーム内の要素をグループ化するために使用できます)
legend: border のタイトル
select: 選択リスト (インライン要素)
optgroup: 結合された選択リスト オプション
option: 選択リスト オプション (データリスト オプションとしても使用可能)
datalist: ドロップダウン リスト (ID はリストにバインドされる必要があります)入力の属性値)
table: テーブル
caption: テーブルのタイトル
thead: 結合されたヘッダーのコンテンツ (th)
tbody: 結合された本文のコンテンツ (td)
tfoot: 結合されたテーブルのメモのコンテンツ (td)
tr: テーブルの行
th : ヘッダーセル
td: テーブルの単位
col: テーブルの列属性; (空のラベル)
colgroup: テーブルの書式設定列グループ
figure: メディアコンテンツのグループ化
figcaption: 図のタイトル
map: 画像のマッピング
area : 画像領域
canvas: グラフィックコンテナ(グラフィックを描画するスクリプト)
video: ビデオ
source: メディアソース
track: テキストトラック
audio: 音声コンテンツ
br: 改行(空のラベル)
hr: 水平分割線(空のラベル) )
pre: 書式設定されたテキスト
blockquote: ブロック引用符
address: 文書の連絡先情報
center: 中央揃えのテキスト (非推奨)
spacer: 水平方向と垂直方向にスペース (空の要素) を挿入

3. 次に、

行レベル

(

inline

) 要素を見てみましょう:

span: インラインコンテナ abbr: 略語 em: 強調 strong: 太字の強調 mark: ハイライトされたテキスト

b: 太字

i: 斜体 bdi: テキストの方向
bdo: テキストの方向
big: 大きなフォント
small:小さいフォント
sup: 上付き文字
sub: 下付き文字
del: 削除された文字列
strike: 取り消し線
s: 取り消し線
ins: 挿入された文字列
u: 下線
nobr: 改行禁止
wbr: ワードラップのタイミング(空タグ)
tt : タイプライターテキスト
kbd: キーボードテキスト
time: 日付/時刻
cite: 引用符
q: 短い引用符 ("")
font: フォント設定 (一般的には使用されません)
頭字語: 略語 (html5 ではサポートされていません)
dfn:フィールド (一般的には使用されません)
a: アンカー
img: 画像
embed: 埋め込み (空のラベル)
label: 入力タグ (テキストをクリックしてコントロールをトリガーします)
input: 入力ボックス
button: ボタン
keygen: 生成key (空のラベル)
textarea: 複数行のテキスト入力ボックス
output: 出力結果
ruby: 中国語のふりがな
rt: ふりがな
rp: ブラウザはルビ要素によって表示されるコンテンツをサポートしていません
progress : プログレスバー
meter: 測定
var: 変数の定義
code: コンピューター コードのテキスト
samp: コンピューター コードのサンプル
select: ドロップダウン リスト





間違いや漏れがあれば修正してください、ありがとうございます！