基本的なレビュー（4）| HTML5＆CSS3のリファクタリング

HTML5＆CSS3をリファクタリング

H5

前書き

• コア言語H5それはH5と呼ばれているように、ワールド・ワイド・ウェブ、標準のユニバーサルのマークアップ言語でアプリケーションのハイパーテキストマークアップ言語は、H4とXHTMLの標準バージョンの新世代を置き換えるために使用されます

• XHTML Extensible Hypertext Markup Language、拡張HTML、アプリケーションのより多くのニーズに適応

• 設計の目的は、モバイルデバイスでマルチメディアをサポートし、セマンティック機能、ローカルストレージ機能、デバイス互換性機能、接続機能、ネットワークマルチメディア機能、3次元、グラフィックスおよび特殊効果機能、パフォーマンスおよび統合機能、CSS3機能を追加することです。

• フォント、中央...要素または属性は破棄されます

利点

• 使いやすさとユーザーフレンドリーなエクスペリエンスの向上、セマンティックタグの向上

• より多くのマルチメディア要素をサイトに持ち込みます。これは、FLASHやSilverlightの優れた代替手段です。

• ウェブサイトのクロールとインデックス作成に関しては、SEOに非常に対応しており、モバイルプログラムやゲームで広く使用されており、移植性に優れています。

不利益

• IE9以下との互換性がありません

セマンティックタグを追加する

ヘッダー：ヘッドタグナビゲーション：ナビゲーションタグメイン：ボディタグフッター：テールタグ

記事：独立したコンテンツラベルセクション：セクションラベル脇：サイドバーラベル

予防：

• セマンティック標準は主に検索エンジン用であり、新しいタブページで複数回使用できます。
• ブロックレベルの要素に変換されたIE9の互換性の問題、モバイル開発者は好む

header,nav,article,aside,section,main,footer{display:block}

マルチメディアタグを追加する

古いフラッシュや他のブラウザプラグインを使用する代わりに、オーディオとビデオをページに簡単に埋め込むことができます

オーディオ

• プラグインなしでオーディオフォーマットファイルをネイティブにサポートすることもできます

<audio src="地址" controls="controls"></audio>

H5では、属性名と属性値が同じ場合は、属性値しか書き込めないと規定しています。

• オーディオ共通タグ
  

  グーグル無効自動再生

• 複数のオーディオ形式と互換性のある書き込み方法。一度に2つのリソースを直接ロードしますが、そうでない場合は、バージョンが低すぎることをユーザーに直接促します。

ビデオ

• プラグインを使用せずにビデオ再生を実現

<video src="地址" controls="controls"></video>

• ビデオタグの一般的な属性

Googleの動画の自動再生は、ミュートされている場合にのみ許可されます

• 複数のビデオ互換の書き込み方法、さらにビデオファイル形式を追加

フォームラベルを追加

学習したラベルタイプ：

新しいフォームタイプ：

• 数値を設定できますmax / min = ""、step = "ステップ数" value = "デフォルトの表示値"

新しい入力フォーム

<input type="text" list="list01">
<datalist class="list01">
  <option value="广州">gz</option>
  <option value="上海">
</datalist>

datalistタグは、オプション要素のセットを含む、入力要素の可能なオプションリストを指定します。これは、事前定義された、入力プロセス中の要素の値に自動的に対応します。

新しいフォーム属性

---

CSS3

前書き

• CSS2の7つのセレクターと比較して、より多くの選択方法を実現するために、より多くの他のセレクターが追加されました。
• 新しいセレクター：子セレクター、兄弟セレクター、構造疑似クラスセレクター、疑似要素セレクター、属性セレクター

子セレクター

親セレクター>子セレクター

特定の親要素を持つ要素を選択するために使用されます。直接の子要素でない場合は選択されません。

ブラザーセレクター

隣接する兄弟はE1 + E2を選択します

• 別の要素の直後に兄弟要素を選択するために使用され、両方とも同じ親要素を持ちます
• E1の直後の最初のE2が選択されます（ただし、E1は複数持つことができます）

他の兄弟セレクターE1〜E2

• 選択したE1の後の同じ父親のすべてのE2

構造的な疑似クラスセレクター

• n番目の子（n）nは、数値、偶数（偶数）、奇数（奇数）、または式（5n）にすることができます。
• nth-of-type（n）は、他の不均一な要素を無視し、Eでのみ検索します

疑似要素セレクター

.box::before{ content:"";}

• 疑似要素はインライン要素であり、表示によってブロック要素に変更できます
• この要素はDOMに表示されないため、疑似要素と呼ばれます。

属性セレクター

指定された属性を含むタグを選択するために使用されます

• 特定の属性に従って選択してください

セレクターの重量

• IDセレクター>クラスセレクター>タグセレクター> *
• 疑似クラスセレクターと属性セレクターの重みは、クラスセレクターと同じです。
• 疑似要素セレクターの重みは、ラベルセレクターと同じです。

ボックスモデル

ボックスモデルを指定するためのボックスサイズ設定

丸い角

border-radiusは、境界線の丸い角を設定します

• 半径は単一の属性で設定できます

• Border-radiusは省略可能、3値、2値、1値

• IE8以下のブラウザはborder-radius属性をサポートしていませんが、他のブラウザはサポートしています

テキストシャドウ

text-shadowはテキストに影を適用でき、水平および垂直の影、ぼかし距離、色を指定できます

• 多層シャドウ、コンマは複数のシャドウの属性値を区切り、後で書き込まれるシャドウをカバーするために最初に書き込みます

ボックスシャドウ

box-shadowは、ボックスの境界に影を追加するために使用されます

• 外側の境界線の影を設定する必要はありません

• 複数の影も必要です。複数の属性値をコンマで区切るだけです

過剰な属性

CSS3の出現前に、フラッシュアニメーションやJSは、一般的にアニメーションを作成するために使用された。フレーム毎の実現を通じて、CSS3ができトゥイーンアニメーションのトランジション効果実感を介して遷移する。現在の要素の変更は、（A二つの状態が存在することになる場合B））、スイッチにはスムーズなアニメーション遷移効果があります。

transition:过度属性、过渡时间、运动曲线、延时时间；

• 遷移プロパティ遷移プロパティ

  なし：属性の移行なしすべて：変更されたすべての属性が移行されます

• 遷移-期間遷移時間

  単位はs、デフォルトは0で、単位sを記述する必要があります

• 遷移-タイミング-関数の時間曲線

  

• ベジェ曲線はカスタマイズによって変更できます

• ブラウザの互換性の問題：IE9以前のバージョンはtransition属性をサポートしていません。Safariでは、プレフィックス-webkit-transitionを使用する必要があります。

2D変換

変換

要素を移動、ズーム、回転、延長、またはストレッチし、トランジションとアニメーションを使用して、Kawaiiは、以前はFlashでしか実現できなかった多くの効果を置き換えます。

属性値

Translate（）

• 属性値（x、y）は、水平および垂直変位の距離、pxまたはパーセンテージ（移動ボックスのサイズを参照）を表し、正と負を区別します
• （X）1つの値のみが水平方向の変位を表します
• センタリング効果が得られます

規模（）

• 属性値

回転rotate（）

数deg、degは度を意味し、正の数は正の方向を意味し、負の数は負の方向を意味します

• 要素を回転させると、その座標軸も変化します
• 複数の属性値が同時に変換するように設定されている場合、異なる書き込み順序は異なる効果をもたらします

チルトスキュー（）

transform:skew(数字deg，数字deg)

• 2つの属性は、それぞれ水平および垂直傾斜角を表します

変換元

• 調整要素の水平および垂直原点の位置を設定し、要素の基準点を調整します
• 可能な値、左、中央、右、ピクセル値、パーセンテージ

カードパッケージ特殊効果ケース

• 6枚の写真はすべて、息子と父親の画像を使用して1か所に配置されています。左：0右：0
• 写真ごとに異なる変形回転角を設定する
• すべての写真のアニメーション遷移を設定します

3D変換

通常のx軸とy軸よりも1つ多いz軸属性

展望

• 画像の3D効果の表現は、実際には視覚効果であり、遠近法によって実現されます。
• パースペクティブ機能：大小に近い
• パースペクティブプロパティに値を設定します

3D回転

• 属性値は、2D回転よりも1つ多いrotateZ（角度）です。

3D変位

• 変位は、それぞれX、Y、Z軸に従って実行できます。
• 位置を実行すると、回転軸も変化します

トランスフォームスタイル

• 内部のネストされた子要素を3D空間に表示するように設定すると、子要素は独自の3D変換軸を保持します

• 属性値：フラット：すべての子要素が2D平面でレンダリングされます

  保持-3d：3D空間を保持

• 3D要素の構成では、特定のグラフィックが複数の要素で構成されます。これらの要素にこの属性を設定して、通常は親要素に設定される実際の3Dグラフィックにすることができます。

• ブラウザの互換性の問題、ChromeとSafariにはプレフィックス-webkit-が必要、IE9にはプレフィックス-ms-が必要

アニメーション

アニメーションの作成->アニメーションのバインド

アニメーション@keyframesを作成する

@keyframes{
 0%{transform:translateY(0);}
 100%{transform:translateY(150px)}
}

@keyframesはCSSスタイルを指定できます。これは、あるスタイルから別のスタイルに徐々に変更する効果です。スタイルはいくつでも、何度でも変更できます。

• パーセンテージを使用して変更のイベントを指定するか、キーワード「from」「to」を使用して0％から100％に相当します

• パーセンテージを使用すると、アニメーション効果をより柔軟にすることができます

アニメーションアニメーションのバインド

div{
  animation：动画名称、过渡时间、速度曲线、动画次数、延时时间;
}

• @keyframesで作成されたアニメーションをセレクターにバインドして、アニメーション効果を生成します
• 属性を1つの属性として設定してから追加することができます。アニメーション名と遷移時間を設定する必要があり、その他の属性は必要に応じて設定できます。
  
• バージョンの互換性の問題、IE10、Firefox、Operaはすべて@keyframes属性をサポートし、ChromeとSafariはプレフィックス-webkit-プレフィックスが必要です。IE9以前のバージョンはサポートしていません