構造タグ
記事: タグは記事を定義します
header: タグはページ上の領域のヘッダーを定義します
nav: タグはナビゲーション リンクを定義します
セクション: マーカーは領域を定義します
余談: ページのコンテンツ部分を定義するサイドバーにマークを付けます
hgroup: マーク定義ファイル内のブロックの関連情報
図: タグは一連のメディア コンテンツとそのタイトルを定義します
figcaption: label は図要素のタイトルを定義します
フッター: ページまたは領域の下部を定義するマーカー
Dialog: タグは WeChat に似たダイアログ ボックス (会話ボックス) を定義します。
最初の補足: ヘッダー/セクション/余談/記事/フッター
2 番目の追加: header/section/footer >aside/article/figure/htroup/nav
マルチメディアタグ
ビデオ: タグはビデオを定義します
audio: タグはオーディオ コンテンツを定義します
ソース: タグはメディア リソースを定義します
Canvas: Canvas は非常に強力な API
embed: マークアップは外部のインタラクティブなコンテンツまたはプラグインを定義します
マルチメディア タグの重要性: マルチメディア タグの出現により、リッチ メディアの開発も促進され、プラグインなしでのメディア ファイルの操作がサポートされるため、ユーザー エクスペリエンスが大幅に向上します。
Webアプリケーションタグ
ステータスラベル
メーター：ステータスラベル（リアルタイムステータス表示：気圧と温度）（Chrome Opera）
進行状況: ステータス ラベル (タスク プロセス: インストールとロード) (Chrome Firefox Opera)
リストタグ
datalist: オプションを使用して、入力タグのドロップダウン リストを定義します (Firefox Opera)
詳細: タグは要素の詳細なコンテンツを定義し、概要と組み合わせます (Chrome)
メニュータグ
メニュー: コマンド リスト (現在、すべての主要なブラウザでサポートされていません)
menuitem: メニューコマンドのリスト(FireFox8.0のみ対応)
command:menu タグはコマンド ボタンを定義します (IE9 でのみサポート)
注釈タグ
ルビ：タグ定義の注釈または発音表記
rt: ルビの実際のコメント内容テキストのタグ定義
rp: Ruby 要素をサポートしていないブラウザにそれらを表示する方法を指示します
rp:rtタグ内には入れないでください
その他のタグ
マーク: マークはマークを含むテキストを定義します
出力: タグはいくつかの入力タイプを定義し、フォームの結果を計算し、入力時に照合します。
keygen: タグ定義フォームで生成された値
time: タグは日付/時刻を定義します。現在、すべての主要なブラウザーではサポートされていません。
削除されたタグ
純粋に表現力豊かな要素
Basefont 大きなセンター フォント s ストライク tt u
ユーザビリティに悪影響を与える要素
フレーム フレームセット noframes
混乱を招く要素
acribym アプレット isindex dir
ラベルを再定義する
b: インライン テキストは通常太字であり、重要な意味を伝えていないことを示します。
i: インライン テキストを表し、通常は斜体で表示されますが、重要な意味は伝えられません。
dd:は詳細や図と組み合わせて使用でき、テキストダイアログを含む定義も使用できます。
dt: 詳細や図と組み合わせて詳細を要約することができ、ダイアログも使用できます。
hr: 表示は同じですが、水平線ではなくトピックの終わりを示します。
menu: ユーザー インターフェイスのメニューを再定義し、commond または menuitem で使用します。
small: メモや法的条項の印刷など、小さいフォントを示します。
強い: 強調ではなく重要性を示します。
入力
日付ピッカーの入力タイプ
日付—日、月、年を選択します
月—月と年を選択します
週 - 週と年を選択します
時間 - 時間を選択します (時と分)
Datetime—時間、日、月、年 (UTC 時間) を選択します
Datetime-local—時刻、日、月、年 (現地時間) を選択します
新しいレイアウトの意味
セマンティック
HTML5 では、多数の意味のない URL タグを、より多くの意味論的に構造化されたコード タグに置き換えることができます。
1: このセマンティクス機能により、Web ページの品質とセマンティクスが向上します。
2: 以前に CSS 呼び出しに使用されていた class 属性と id 属性を減らす
検索エンジンに優しい
新しい構造タグにより Web ページのレイアウトが変更され、検索エンジンの使いやすさが向上します。
HTML5属性の変更
入力
電子メール /url/番号/範囲 /日付ピッカー /検索 /色/電話
フォームのプロパティ
autocomplete/ autofocus /multiple/ プレースホルダー /required
リンクプロパティ
<link rel='icon' href= 'icon.git' type='images/gif' sezes = '16*16' />
目標
<base href = " http://localhost/ " target = "_blank" >
a:メディア「」（ハンドヘルプテレビ）
a:hreflang="zh" (ここでの言語を中国語に設定します)
a:rel = "external" (ハイパーリンクの参照を設定します。このハイパーリンクは外部リンクを保護します)
その他のプロパティ
脚本
defer: スクリプトはロード後に実行されませんが、ページ全体がロードされた後に実行されます。
<スクリプト遅延 src="URL"></script>
async: ページ全体がロードされるのを待たずに、スクリプトをロードした直後に実行します。非同期実行
OL 順序付きリスト
開始 - 開始値
逆 - フラッシュバックソート
html
マニフェスト = "cache.manifest" (ページのオフライン アプリケーション ファイルを定義)
<html マニフェスト = 'cache.manifest'>
APIの簡単な説明
Canvas の簡単な紹介
モバイルアプリ
*CSS3* ****
基本的なセレクター
ワイルドカード セレクター、要素セレクター、クラス セレクター、ID セレクター、子孫セレクター
新しく追加されたセレクター
子要素セレクター、隣接兄弟セレクター、ユニバーサル兄弟セレクター、グループ セレクター
属性セレクター
指定された属性を持つ HTML 要素のスタイルを設定する
CSS3 属性セレクターを使用すると、要素の属性を指定したり、要素の属性とそれに対応する属性値を同時に指定したりできます。
a[htrf]{} は、attribute 属性を使用して Element 要素のスタイルを設定します。
a[href=""]{} は、attribute="value" 属性を持つ Element 要素のスタイルを設定します。
a[href~=""]{} には値が含まれています
a[href^=""]{} value で始まるすべての Element 要素のスタイル
a[href$=""]{} value で終わるすべての Element 要素のスタイル
a[href*=""]{} 値を含むすべての Element 要素のスタイル
a[href|=""]{} セレクター属性の属性値は 'value-' または 'value' で始まる要素です
疑似クラスセレクター
動的疑似クラス
アンカー擬似クラス::リンク:訪問済み
ユーザー動作疑似クラス: :hover :active :focus
UI要素のステータス疑似クラス: 入力: 有効: 無効: チェック済み (オペラ)
CSS3 構造クラス:
:first-child は、親要素の最初の子である各要素を選択します
:last-child は、親要素の最後の子要素である要素要素のスタイルを選択します。
:nth-child() は、要素のタイプに関係なく、親要素に属する N 番目の子要素と一致します。
:n 番目の子(n) :n 番目の子(2n+1) :n 番目の子(奇数):n 番目の子(偶数)
:nth-last-child() は、最後の要素からの型に関係なく、その n 番目の要素に属するすべての要素と一致します。
子要素がカウントを開始します
:nth-of-type(N) セレクターは、親要素の特定のタイプに属する各 N 番目の子要素と一致します。
要素
:nth-last-of-type(n) は要素のタイプを指定します
nth-last-child(n) は要素の型を制限しません
:first-of-type は、親要素の特定の型の最初の子であるすべての要素に一致します。
:last-of-type は、親要素の特定のタイプの最後の子要素であるすべての要素に一致します
:only-child は、親要素の唯一の子であるすべての要素に一致します
:only-of-type は、親要素である特定のタイプの唯一の子要素であるすべての要素に一致します
:empty は、子要素を持たないすべての要素 (テキスト ノードを含む) に一致します。
ネガティブセレクター
:not(Element/selector) セレクターは、指定された要素/セレクターではないすべての要素と一致します。
親要素: not (子要素/子セレクター) (父: not (子要素/子セレクター))
a:not(:最後の型)
重み
体重レベルと体重
インライン スタイル (1000) > ID セレクター > クラス属性セレクターと疑似クラス セレクター (10) > 要素と疑似要素 (1) > * (0)
より重み付けされたセレクターを含むルールは、より高い重み付けを持ちます。
ID セレクター (#idValue) は属性セレクター [id='idValue'] よりも重みが高くなります。
コンテキスト関係を持つセレクターは、単純な要素セレクターよりも重みが高くなります。
セレクターを構成する要素の数に関係なく、重みが大きいクラス セレクターはありません。
ワイルドカード セレクターの重みは 0 で、継承された CSS プロパティにも重みがあり、重みも 0 です。
擬似要素
css 擬似要素は、特定のセレクターに特殊効果を設定するために使用されます。
構文形式
要素::擬似要素
Element::first-line スタイルは、要素のテキストの最初の行を書式設定します (ブロックレベルの要素にのみ使用できます)。
Element::first-letter は、最初の文字の特別なスタイルを設定します (ブロックレベル要素のみ)
Element::before は、要素のコンテンツの前に新しいコンテンツの行レベルの要素を挿入します。
Elementn::after は要素コンテンツの後に新しいコンテンツを挿入します
Element::selection は、ブラウザでテキストが選択された後に背景色と前景色を設定するために使用されます。
角丸理論:
境界半径
1 つの値: 4 つのフィレット値は同じです
2 つの値: 最初の値は左上隅と右下隅、2 番目の値は右上隅と左下隅です。
3 つの値: 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。
4 番目の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。
境界線の左上半径
境界線の右上の半径
境界線の左下半径
境界線-右下-半径
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;ボックスシャドウ
box-shadow プロパティ
box-shadow:h-shadow v-shadow ブラー スプレッド カラー インセット;
枠線画像
border-image プロパティ
ボーダーイメージ:ソーススライス幅アウトセットリピート;
背景-クリップ: 境界ボックス: 背景は境界ボックスにクリップされます
背景-clip:padding-box: 背景はパディングボックスにクリップされます
Background-clip:content-box: 背景がコンテンツ ボックスにクリップされます。
背景元のプロパティ
background-origin 属性は、backg-position 属性が相対位置であることを指定します。
背景-原点：パディングボックス ボーダーボックス コンテンツボックス
背景サイズ：長さ|パーセンテージ|カバー|含む
値が 1 つだけ設定されている場合、2 番目の値はイメージの幅に応じて比例的に拡大縮小されます。
両方の値が存在する場合、設定された値のサイズに従って画像が表示されます。
カバーは、コンテナ全体を埋めるように背景画像を比例的に拡大縮小します。
背景画像：url（"bg2.png"）,url("bg1.jpg"):
背景全体
背景：色 位置 サイズ リピート元 クリップ添付画像;
背景サイズ: 90%;
背景元: コンテンツ ボックス;
背景クリップ: コンテンツボックス;
背景添付: 修正されました。
勾配
線形勾配線形勾配
背景：線形グラデーション（方向、カラースティップ1、カラーストップ2）
背景：-o-linear-gradient（方向,color-stip1, color-stop2）
背景:linear-gradient(angle.color-stop1.stop2,...)
放射状グラデーション
始点から終点まで内側から外側に向かって円形のグラデーションを作ります（中央から外側に引く）
背景:放射状グラデーション(形状,カラーストップ1,カラーストップ2,...)
形状の説明
サークル - サークル
楕円 - 楕円 (デフォルト)
放射状グラデーション サイズのキーワード
文法
背景:radial-gradient(サイズ,カラーストップ1,カラーストップ2,...)
キーワードの説明
最も近い側: 最も近い側 最も遠い側: 最も遠い側
close-corner: 最も近いコーナー farthest-corner: 最も遠いコーナー
背景: -webkit-repeat-radial-gradient(30% 70%、最も近い側の円、赤、黄、青、緑);
CSS3変換
css3のrotate()変換
指定された角度パラメータを使用して、元の要素の 2D 回転を指定します (2D 回転)
文法
変換: 回転(<角度>) 角度は正または負にすることができます
css3 translation() 翻訳
move translation() メソッドは、X 軸と上部の Y 軸の位置によって指定されたパラメーターに基づいて、現在の要素の位置から移動します。
translationX(x) は水平方向のみの移動（X 軸の移動）
translationY(Y) は垂直方向のみの移動（Y 軸の移動）
translation(x,y) は水平方向と垂直方向に移動します (同時に移動します)。
変換:translateX(200px);
css3scale()スケーリング
スケールスケール
scale() メソッドは、オブジェクトの 2D スケール (2D スケーリング) を指定します。
3つの条件
scaleX(x) 要素は水平方向のみにスケーリングされます (X 軸スケーリング)。
scaleY( y) 要素は方向にのみスケーリングします (Y 軸スケーリング)。
scale(x,y) は要素の水平方向と垂直方向の同時スケーリングです。
文法
変換:scaleX(<数値>)
変換:scaleY(<数値>)
css3 skew() ツイストまたはベベル
css3 math() マトリックスまたはミックス
マトリックスマトリックス
6 値 (a、b、c、d、e、f) の変換行列の形式で 2D 変換を指定します。
[a, b, c, d, e, f] 変換行列を直接飲むのと同じです
文法
変換：行列(a,b,c,d,tx,ty);
パラメータの説明
tx,ty は、X 座標と Y 座標に基づいて要素を再配置します。
これは、回転、平行移動、平行移動、拡大縮小、および傾斜を組み合わせたものです。
css3 回転 3d()
css3 翻訳 3d()
css3スケール3d()
css3行列3d()
css3 パースペクティブ()
回転 回転 X
rotateX メソッドは、X 軸上のオブジェクトの回転角度を指定します。
文法
変換:ratoteX(角度)
パラメータの説明
角度は回転角度を表します
回転回転3D
rotate3d メソッドは、オブジェクトの 3D 回転角度を指定します。
文法
変換:rotate3d(x,y,z,angle);
パラメータの説明
最初の 3 つのパラメータは回転方向 x、y、z を表し、4 番目のパラメータは回転角度を表します。
パラメータは無視できません
移動移動Z
translationZ メソッドは、オブジェクトの Z 軸の平行移動を指定します。
文法
変換:translateZ(z);
パラメータの説明
Z軸に相当するパラメータであり、省略できません。
移動translate3d()
trans;ate3d(x,y,z)
パラメータの説明
X、Y、Z にそれぞれ対応し、軸パラメータは省略できません。
スケールスケールZ
scaleZ メソッドは、オブジェクトの Z 軸スケーリングを指定します。
文法
変換:スケール Z(z);
パラメータの説明
パラメータ オブジェクトの Z 軸、省略できません
スケールスケール3D
scale3d メソッドは、オブジェクトの 3D スケーリングを指定します。
文法
変換:scale3d(x,y,z)；
パラメータの説明
オブジェクト x、y、z それぞれ、パラメータは省略できません
変換元のプロパティ
文法
変換原点:x 軸 y 軸 z 軸;
css3の行列
css3の行列とは、matrixやmatrix3dと書かれたメソッドを指します。
行列は要素の移動変換 trasform 2D 変換行列は 3*3
matrix3d は要素の移動変換であり、3D 変換ルールは 4*4 の行列です。
変換スタイルのプロパティ
transform-style 属性は、ネストされた要素を 3 次元空間でレンダリングする方法を指定します。
文法
変換スタイル:フラット/保持-3D
perspective 属性
観察者 [z=0] 平面からの距離を指定すると、3 次元の位置変換を使用して要素に遠近効果が作成されます。
文法
パースペクティブ:数値 | なし
デフォルト値
視点:なし:
perspective-origin属性
視点の位置を指定する
文法
視点の原点:x 軸、y 軸
backface-visibility属性
要素の裏側をユーザーに表示するかどうかを指定します
文法
背面の可視性:可視 | 隠れた;
css3 トランジション トランジション
互換性 IE10+ FireFox16+ CHrome26+ Safari6.1 Opera12.1
遷移プロパティプロパティ
遷移に参加しているオブジェクトのプロパティを検出または設定します (その遷移の名前を指定します)。
文法
遷移プロパティ ：none /all / property
transition-duration 属性
オブジェクト遷移の順序時間を検出または設定します
文法
移行期間：時間；
css3トランジションプロパティ
transition-timing-function 属性
オブジェクト内のトランジションのアニメーション タイプを取得または設定します。
transition-property はプロパティ名を指定します
移行期間 移行時間
遷移タイミング関数遷移メソッド
遷移遅延遅延
css3アニメーション
アニメーション アニメーション アニマ ソウル アニメーション 命を与える
視覚持続の原理
人間には「視覚の持続性」という特性があり、絵画や物体を見た後、0.34秒以内は目は消えません。
アニメーションの原則
課題の表情や動きの変化を段階的に評価し、それを多くの瞬間ごとの絵に描くことで、視覚の持続の原理が利用されます。1 つの絵が消える前に次の絵を再生すると、スムーズな視覚的変化効果が得られます。
css3アニメーション
アニメーション名プロパティ
オブジェクトに適用されるアニメーションの名前を検出または設定します
文法
アニメ名 : キーフレーム名 | なし
animation-duration 属性
オブジェクトのアニメーションの継続時間を取得または設定します
文法
アニメーション期間:時間
パラメータの説明
time は、アニメーションが完了するまでにかかる時間を指定します。デフォルト値は 0 です。
アニメーションタイミング関数
タイミング タイミング調整 時間選択
アニメーション遅延プロパティ
取得またはこれはオブジェクトアニメーションの遅延時間です
文法
アニメ遅延: 時間;
定義されているのはアニメーション以外のものです
animation-iteration-count 属性
反復 反復 何度も繰り返す
アニメーションの反復回数:無限 | <数値>;
animation-direction 属性
オブジェクトアニメーションがループ内で逆方向に移動するかどうかを検出または設定します
アニメーション方向: 通常 | 逆 | アクテルベート | 交互反転
イニシャル | 継承する
通常の法線方向
逆方向 逆方向
代替アニメーションは、最初は通常通りに実行され、次に逆方向に実行され、交互に実行され続けます。
alter-reverse: アニメーションは最初に逆方向に実行され、次に順方向に実行され、交互に実行され続けます。
(ループ再生を機能させるには、上記のプロパティを設定する必要があります)
animaiton-fill-node プロパティ
アニメーションが再生されていないとき（アニメーションが完了したとき、またはアニメーションに遅延があったとき）に適用する要素スタイルを指定します。
文法
アニメーション フィル モード:;
パラメータの説明
none デフォルト値はアニメーション以外のオブジェクトの状態を設定しません。
forwards は、アニメーションの終了時のオブジェクトの状態を設定します。
アニメーション開始時のオブジェクトの状態を逆方向に設定します。
どちらもオブジェクトの状態をアニメーションの終了状態または開始状態に設定します。
naimation-play-state 属性
アニメーションが通常に実行されているか、一時停止されているかを指定します
文法
アニメーション再生状態 : 一時停止中 | ランニング ;
パラメータの説明
一時停止: アニメーションを一時停止することを指定します。
running: デフォルト値は、実行中のアニメーションを指定します。
アニメーションプロパティ
プロパティの取得またはオブジェクトに適用されるアニメーション効果の設定に準拠します
文法
アニメーション名 継続時間 タイミング関数 遅延 反復回数 方向 フィルモード 再生状態;
css3 @キーフレーム {
keyframes-selector {
css-styles ; }
}
パラメータの説明
アニメーション名: 定義アニメーションの名前を記述する必要があります
keyframes-selector は、アニメーション期間のパーセンテージ 0 ～ 100% を形式 (0%) で書き込む必要があります。
に(100%)
css-styles: 1 つ以上の有効な CSS スタイル属性を記述する必要があります
css3 は変更されます
1:position-fixed は、background-attachment を置き換えます
2: 擬似要素に絵が描かれた要素を配置する
3：will-changeを上手に使う
目標
ページレンダリングのパフォーマンスを強化する
CPU 和GPU
CPU、中央処理装置は、コンピューターの命令を解釈し、コンピューター ソフトウェアのデータを処理します。
GPU は、グラフィックス関連ハードウェアの処理と描画に特化したグラフィックス プロセッサであり、複雑な処理を実行するように設計されています。
数学的および幾何学的計算用に設計されており、CPU をグラフィック処理タスクから解放します。
他のシステムタスクを実行できます
現状
CSS アニメーションの変形グラデーションは、GPU アクセラレーションを自動的にトリガーしませんが、ブラウザの少し遅いソフトウェア レンダリング エンジンを使用します。トランジション変換とアニメーションの世界では、GPU アクセラレーションへの進行中に記述される必要があります。3D 変形のみが独自のレイヤーを持ちます。 2D変形が合わない
translationZ() (またはtranslate3D) ハック
要素に変更を加えずに 3D 変形すると、ブラウザがハードウェア アクセラレーションをトリガーするように仕向けられます。
料金
この場合、要素を独自のレイヤーにオーバーレイすることにより、RAM と GPU のストレージ スペースが占有されます。
変化を望む
どのようなアニメーションが一定の速度で実行されるかを事前にブラウザーに通知し、ブラウザーが設定をいつ最適化するかを事前に準備できるようにします。
文法
will-change ：自動スクロール位置の内容
auto このキーワードは、彼が通常行っているヒューリスティックな最適化を使用するという特定の意図を示していません。
スクロール位置は、要素のスクロール位置が変更されることを示します
Custom-ident は、指定された名前で変更される名前を明示的に指定します
animateable-feature は、left to[ margin などの特定の値をアニメーション化できます。
知らせ
アドバンスライフリムーブを乱用しないでください
/* ** /