HTMLセクション
概要:
ハイパーテキストタグ言語タグラベル開始終了部分タグ自閉とタグ属性名を使用して典型的なhtmlドキュメントを記述することができます.

全体的にdomツリーを構築する
構文:

ラベルと属性は大文字と小文字を区別しない推奨小文字

空のラベルは、

を閉じなくてもよい.

属性値

を二重引用符で囲む

は、required readonly

などの属性値を無視することができる.

タイトルh 1~h 6

リストol無秩序ul秩序dl定義リスト

リンクa

メディアオブジェクトimg audioビデオ

入力input[placeholder],type:[range,number,text,data]]textarea

複数選択ラジオドロップダウンリスト検索プロンプト(input listバインド)

を選択

テキストラベルblockquote p cite q code preem strong

意味に基づいてコンテンツを区分するラベルheader nav main article aside footer

ブロックレベルと行レベルのラベル
意味化
意味に従ってhtmlを記述する意味でコンテンツを表す場所をラベルでスタイル付けしない方法
CSS部
Cascading Style Sheets積層スタイルシートページ要素のスタイルを定義する
cssワークフロー
ブラウザはhtml cssファイルを取得し、htmlをdomツリーに解析した後、解析したcssをdomノードにスタイルを追加して表示ページを形成します.
cssのバインドプロセスは次のとおりです.
セレクタ

ラベル名クラス名id

通配セレクタ

タグセレクタ

idセレクタ

クラスセレクタ

属性セレクタ

擬似クラスセレクタ

状態擬似クラス

構造擬似クラス

コンポジタ
名前
構文
説明
ダイレクトコンビネーション
AB
同時にABを満たす
子孫の組合せ
A B
BがAの子孫なら
親子グループ
Ａ>B
Bを選択BがAのサブエレメントである場合
複数の同じスタイルでは、セレクタグループを使用して重複符号化を回避できます.
優先度
レイアウトスタイル(フォントと色を設定)
色

RGBモード

USLモード

keywords選択

alphaチャネル不透明度

フォント
font-family汎用フォントファミリーSans-serif等幅Monospace(中国語では一般的に等幅フォント)使用推奨に汎用フォントファミリー英語フォントファミリーを加えて中国語前web Fonts url関数font-sizefont-weightに書く
行の高さ
各行のテキスト間のベースラインの高さの差
文字組み
text-align文字整列spacing文字の前の単語間のスペース数text-indent最初の行のインデントtext-decoration文字修飾write-space htmlの元のスペースに対する扱い方
レイアウトスタイル(位置とサイズの設定)
ラベルの表示方法はdisplayで変更できます(ブロックレベル行レベルinline-block none)
せいきながれ
ボックスモデルborder-box padding margin設定順序上下左borderで三角形marginを水平に中央に描く実際には左右marginを同じにするつまりauto上下marginを設定してoverflowをマージする
|レイアウトコンテキスト名|作成条件|-|-|-||||||Inline Formatting Context(IFC)|行ボックスのみを含むコンテナはIFCを作成します|Block Formatting Context(BFC)|一部の要素はBFCを作成します|
flex box 1次元のレイアウト方法display:flexflexボックス内で、整列収縮と拡大折り返し行ソートgrid 2次元へのレイアウト方法を指定display:grid分割グリッドgrid-template fr単位指定サブエレメントグリッド領域をグリッド線で終了する位置で表す
フローティング
位置
义齿
ルール＃ルール＃
static
デフォルトのドキュメントフロー
relative
元の位置オフセットは他の要素に影響しません
absolute
最近の非static祖先は、他の要素レイアウトが存在しない場合に配置されます.
fixed
ページウィンドウに対して
アニメーション(Animation)
####変形transformは他の要素レイアウトに影響しません
|メソッド|関数|-|-|||平行移動|translate||回転|rorate||スケーリング|scale||Twist|skew||3 D変形|perspective(実は人の目の位置を設定する)|transformで前後順で変化する座標系は要素座標系
####transitionある状態から別の状態への遷移効果proptyリスニングの属性durationイベントtime-functionの速度と速度の均一性のようなdelay遅延
####animation定義キーフレーム(@keyframes名{パーセント/from to})要素にバインド(要素にanimationプロパティを設定)
おうとうしき

viewport

ピクチャimg max-width

背景画像適配background-size contain cover

@mediaメディアクエリー

は、異なるサイズに対して異なるピクチャ(解像度)

を用いる.

rem単位