ログイン
サインイン

HTML5

新しいタグ、新しいフォーム属性、H5 互換性ソリューション、レスポンシブレイアウト、CSS プリプロセッサを含む HTML5 マインドマップ。

2023-05-27 23:45:56 に編集されました

WSUJfrxa

最近の作品その他の作品を表示>>

細菌
これはバクテリアに関するマインドマップであり、その主な内容には、概要、形態、種類、構造、生殖、分布、アプリケーション、および拡張が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
植物無性生殖
これは、植物の無性生殖に関するマインドマップであり、その主な内容には、概念、胞子の生殖、栄養生殖、組織培養、芽が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
動物の生殖発達
これは、動物の生殖発達に関するマインドマップであり、その主な内容には、昆虫、カエル、鳥、性的生殖、無性生殖が含まれます。概要は包括的で綿密で、レビュー資料として適しています。

HTML5

WSUJfrxa

最近の作品その他の作品を表示>>

おすすめ
アウトライン

HTML
- 11
WSUJfrxa
受注型インテリジェントハードウェア製品開発プロセス
- 9
WSUJfrxa
外気換気装置の製品開発プロセスと関連情報
- 8
WSUJfrxa
新製品開発のプロセス
- 27
WSUJfrxa
アジャイル開発プロセス
- 13
JackTyler·881

HTML5

キャンバス

要素のドラッグ

オーディオビデオ

新しいタグを追加

セマンティック構造タグ

ヘッダ

フッター

ナビ

メインナビゲーション

主要

ドキュメントの主なコンテンツ (whatwg にはセマンティクスがなく、IE ではサポートされていません)

セクション

ページのセクションまたは記事のセクション。通常はタイトルが付いています。

記事

記事、ブログ、投稿、コメントなどを定義します。

脇に

サイドバーを定義する

hグループ

記事のメインタイトルとサブタイトルの組み合わせなど、連続したタイトルをラップします (w3c によって削除されます)。

その他の新しいタグ

州

メーター

意味

ステータス、バッテリー、温度を表示

属性

価値

値、デフォルトの最大値は 1 です

最大

最高値

分

最低値

高い

より高い警告しきい値

低い

下限警告しきい値

最適

最適値、デフォルトは中間、最適値は緑、最適値に近い値は黄色、最適値から遠い値は赤です。

スタイル

メートル{ 幅:400px; 高さ:30px; }

meter::-webkit-meter-bar{ /* 全体の枠線や空白部分の背景などを設定できます。 */ backgroud:#fff; border:1px Solid #ccc; >}

meter::-webkit-meter-optimum-value{ /* 最適な値の範囲内でスタイルを設定します */ }

meter::-webkit-meter-suboptimum-value{ /* 範囲内のスタイルで対応します */ }

meter::-webkit-meter-even-less-good-value{ /* 不正な範囲スタイル */ }

進捗

意味

プログレスバー

属性

価値

値、デフォルトの最大値は 1 です

最大

最大値

スタイル

進行状況{ 幅:400px; 高さ:30px; ボーダー:1px 実線 #ccc; }

progress::-webkit-progress-bar{ 背景: #fff; }

progress::-webkit-progress-value{ 背景: 緑; }

リスト

データリスト

Baidu 検索ボックス、以下の入力プロンプト

詳細

コンテンツを展開する

<詳細を開く> <summary>大規模なフロントエンド</summary> HTML5 CSS3 JavaScript </詳細>

属性

開ける

ルビー

ピンイン付きのテキスト

<ruby>魑 <rt>チー</rt></ruby> <ruby>エンチャント <rt>メイ</rt></ruby>

マーク

テキストの色付け、キーワードでマークされた検索結果

Lorem ipsum dolor sit アメット、

スタイル

背景色、フォント

マーク { 背景: 赤; }

画像

形

記事内のイラスト、独立したコンテンツ

<figure>  <img src="images/trump.jpg" alt=""> <figcaption>アメリカ合衆国大統領</figcaption> <!--絵説明- -> </figure>

新しいフォームのプロパティ

フォームフォームコントロール (入力、テキストエリア、選択...)

プレースホルダー

プロンプト表示

必須

必須、値を設定する必要はありません

オートフォーカス

フォーカスが点滅する入力ボックス、値を設定する必要はありません

オートコンプリート

オートコンプリート、以前に入力した内容をプロンプト表示、値はオフ/オンに設定可能

パターン

正規表現の作成、フォーム検証

フォーム要素

検証する

検証や値を入力する必要はありません

入力タイプの新しい値

Eメール

@を含む必要があり、@の前後にコンテンツが必要です

URL

http で始まる必要があります

番号

パラメータ

分

最小値、閉区間

最大

最大値、閉区間

ステップ

刻み幅

検索

検索ボックス、特別な機能なし

電話番号

電話番号。PC 版には特別な機能はありません。モバイル版には数字キーボードが表示されます。

範囲

範囲、デフォルトは 0 ～ 100

パラメータ

分

最大

ステップ

色

カラー、bgrフォーマット

日付

月

年

週

週、週: 2019-W25

時間

時間: 23:20

日時ローカル

日付時刻

H5互換性ソリューション

メタを設定する

<meta http-equiv="X-UA-Support" content="IE=Edge">  <meta name="renderer" content="webkit">

要素の作成

前のjs

header,footer,nav,article,aside,section,main { 表示: ブロック; }

html5shiv.jsを直接呼び出す

レスポンシブレイアウト

意味

Ethan Marcotte は 2010 年に初めてレスポンシブ Web デザイン (RWD) という用語を提案しました。彼の記事の 1 つである「レスポンシブ Web デザイン · 別のリストの記事」では、3 つの既存の開発テクニック (弾性イメージ、弾性グリッドレイアウト、メディアおよびメディアクエリ) を統合し、それをレスポンシブ Web デザインと名付けました。 では、真のレスポンシブデザインとは何でしょうか?マルコット氏は、真のレスポンシブデザイン手法とは、表示領域のサイズに応じて Web ページのレイアウトを変更するだけでなく、現在の Web デザイン手法全体を覆すことであり、どのような環境でも Web コンテンツに最適なレイアウトであると述べました。表示機構。

アドバンテージ

・開発・保守・運用コストのメリット：ページは1つですが、解像度や機器環境ごとに異なる設計を行っているため、複数バージョンに比べて開発・保守・運用コストを抑えることができます。。 - 互換性の利点: 新しいサイズのモバイルデバイスが次々に登場しており、カスタマイズされたバージョンは通常、特定の仕様のデバイスにのみ適しています。新しいデバイスの解像度が大幅に変更されると、互換性がなくなることが多く、対応に時間がかかります。新しいバージョンを開発すると、この間のアクセスが問題になりますが、レスポンシブ Web デザインを使用すると、この問題を事前に防ぐことができます。 - 柔軟な操作: レスポンシブデザインはページ固有であり、必要なページのみを変更でき、他のページには影響しません。

メディアからのお問い合わせ

メディアタイプ

メインコンテンツ

全て

すべてのデバイス

画面

コンピュータの画面、タブレット、携帯電話などに使用されます。

印刷する

プリンターと印刷プレビュー用

書き方

/*メディアクエリは特定の条件を満たしています*/ @media print { h1 { font-size: 100px; color: red; } }

メディアのプロパティ

メインコンテンツ

オリエンテーション

機器の使用方向

風景

水平方向

肖像画

垂直方向

幅

ビューポートの幅

/*特定の幅を指定します*/ /*ビューポートの幅は 800px ピクセルです*/ @media (width:800px) { h1 { color: red; background: # 54ABD4; } }

/*範囲を設定します。600px 未満に設定します*/ /* 最大幅は 600px、600px 以下*/ @media (max-width: 600px) { h1 { フォントサイズ: 100px ; カラー: 赤; } }

/*設定範囲は1000px以上です*/ @media (min-width: 1000px) { h1 { font-size: 200px; color: yellow; } }

オペレーター

そして

/* 600 以上 1000px 以下*/ @media (min-width: 600px) and (max-width:1000px) { h1 { font-size: 100 ピクセル; カラー : 赤; 背景: #333333; } }

または

、

/*400 以下、または 1100 以上*/ @media (max-width: 400px),(min-width: 1100px) { body { background: yellow; } h1 { } ul { } }

いいえ

ない

/*メディアタイプと一致しません*/ /*画面ではありません*/ @media 画面ではありません { }

メディアクエリの使用法

<link rel="stylesheet" href="normal.css"> <link rel="stylesheet" href = "mobile.css" メディア="(最大幅:640px)">

ブレークポイントの設定

よく使用される設定 1、3 ブレークポイント

768ピクセル

768px未満、超小型画面、携帯電話

992ピクセル

768 ピクセルを超え 992 ピクセル未満、小さな画面、タブレット

1200ピクセル

992 ピクセルを超え、1200 ピクセル未満、中程度の画面

1200ピクセルを超える画面

よく使用される設定 2、4 つのブレークポイント

576ピクセル

572未満、超小型画面

768ピクセル

577-768、小さい画面

992ピクセル

769-992、中画面

1200ピクセル

993-1200、大画面

>1200、超大画面

3 つまたは 2 つのブレークポイントを設定することをお勧めします

640ピクセル

<=640px、小さい画面

1024ピクセル

641-1024、中画面

>1024、大画面

先に終わる

モバイルファースト

* { margin:0; padding:0; } /*デフォルトのスタイルはモバイルスタイルです*/ .container { margin: 0 auto; width: 100%; /*モバイルデバイスの幅は 100% < 768px*/ height: 300px; 背景: #54ABD4; } /*width>= の場合768px*/ /*F の範囲は 768~991*/ @media screen and (min-width: 768px){ .container { width: 750px; } } /*width>=992の場合*/ /* 992 ~ 1199*/ @media screen and (min-width: 992px) { . > width: 970px; } } /*画面の場合》= 1200px*/ /*スコープ: >= 1200*/ @media screen and (min -width: 1200px) { .container { width: 1170px; } }

まずはパソコン

* { margin:0; padding:0; } /*サイレント最大ビューポート幅のデモ> 1200*/ .container { margin: 0 auto ; width: 1170px; height: 300px; background: #54ABD4; } /*width <= 1200の場合*/ /* 993～1200での機能*/ @media screen and (max-width: 1200px) { .container { width: 970px; } } /*When width <= 992*/ /* 769 ~ 992 */ @media screen and (max-width: 992px) { .container { width: 750px; > } /*幅<= 768の場合*/ @media screen and (max-width: 768px) { .container { width: 100%; } }

CSSプリプロセッサ

なぜそれを使うのでしょうか？

CSS 構文は十分強力ではなく、ネストできないため、モジュール開発では多数の繰り返しセレクターを記述する必要があります。

変数と合理的なスタイル再利用メカニズムがなければ、論理的に関連する属性値をリテラルの形式で繰り返し出力する必要があり、保守が困難になります。

CSS プリプロセッサは、CSS にはないスタイルレイヤーの再利用メカニズムを提供し、冗長なコードを削減し、スタイルコードの保守性を向上させます。

主流の CSS プリプロセッサ

少ない

コンパイル

jsコンパイル

コアラコアラコンピレーション

Index.less 書き込み

// 変数を定義します @width: 500px; @height: 300px; @color: #f90; #box { 位置: 絶対; 左: 50%; 上: 50%; 幅: @width; 高さ: @height; マージン左: -@width/2; マージン上: -@height/2; ボーダー: 2px ソリッド @color; }

コマンドラインのコンパイル

インストール

npm installless -g

使用

lessc bootstrap.less bootstrap.css

/*css コメントを css に変換しても、このコメントは残ります*/

// CSS にコンパイルすると、less のコメントが消えます。

変数

使用

cssプロパティ値が

//less変数をcss属性の値として扱います width: @len;

属性名の場合

// 属性名としてless変数を使用する場合 @{変数名} @{bg}: @basecolor;

セレクター時

//less 変数をセレクターとして使用する場合 @{variable} #@{activeclass} { width: 100px; height: 100px; }

変数スコープ

/* 変数スコープが少ない ステップ 1: 変数を使用し、このスコープで検索し、見つけて、最後の定義を使用します ステップ 2: このスコープで見つからない場合は、上位スコープの検索に進みます */

//less のスコープ @var: 100px; #box { @var:20px; .inner { @var: 50px; width: @var; /*60*/ 背景色: #ccc; @var: 60px; li { 背景: 赤; } } 幅: /*20*/ } .list { 高さ: /*100*/ }

ミックスミックスイン

意味

繰り返し呼び出すことができる JavaScript のような関数

カテゴリー

ノーマルミックス

// 通常のブレンドはクラスセレクターと同じです .center-box01 { 位置: 絶対; 左: 50%; 上: 50%; 幅: 400px; 高さ: 300px; マージン左: -200ピクセル; マージン上: -150ピクセル; 背景色: #ccc; } .box01 { border: 1px Solid #999; text-align:center; // ブレンドを呼び出します .center-box01(); }

出力せずにミキシングする

//出力なしの混合コンパイル後、CSS は出力されません .center-box02() { 位置: 絶対; 左: 50%; 上: 50%; 幅: 400px; 高さ: 300px; 左マージン: -200ピクセル; マージン上: -150ピクセル; 背景色: #ccc; } .box02 { // mix を呼び出します .center-box02(); border:1px Solid #ccc; } .list { // パラメータなしで呼び出します Forブレンディング、()は省略可能 .center-box02; }

パラメーターを使用したミキシング

// パラメータとの混合 .center-box03(@width, @height, @bgcolor) { 位置: 絶対; 左: 50%; 上: 50%; 幅: @width; 高さ: @height; マージン左: -@width/2; マージン上: -@height/2; 背景色: @bgcolor; } .box03 { //.center-box03(600px, 200px, red); .center-box03(1000px, 500px, #369); }

デフォルトのパラメータ値と混合する

//混合パラメータのデフォルト値。デフォルト値を持つパラメータは後ろに配置されます。 .center-box04(@width, @height:100px, @bgcolor: grey) { position:absolute; 左: 50% ; 上: 50%; 幅: @width; 高さ: @height; マージン左: -@width/2; マージン-トップ: -@height/2 ; 背景色: @bgcolor; } .box04 { .center-box04(200px, 100px); //。 center-box04(200px, 100px , red); //.center-box04(800px); }

//デフォルトのパラメータ値、 .center-box05(@width:1000px, @height, @bgcolor) { 位置: 絶対; 左: 50%; 上: 50%; 幅: @width; 高さ: @height; マージン左: -@width/2; マージン上: -@height/2; 背景色: @bgcolor ; } .box05 { //.center-box05(400px, 300px, green); // ミックスを呼び出すときに、どの値が割り当てられるかを指定しますどのパラメータ順序は関係ありません。すべて指定してください //.center-box05(@height:500px, @bgcolor:red); .center-box05(@bgcolor:blue, @height :500px、@width:400px) ; }

@arguments すべての実パラメータを取得します

/* transition: 幅 1 秒、高さ直線 1 秒 */ // @arguments すべての実パラメータを取得します .transition(@duration, @property:all, @timing-function:linear , @遅延:0s) { -webkit-transition: @arguments; -moz-transition: @arguments; トランジション: @arguments; } .box06 { //.transition(2s); //.transition(2s, width); .transition(2s, width, easy, 1s); } .box06 { // カンマに加えて、セミコロンもパラメータの区切りに使用できます。 // 通常、パラメータの値にカンマが含まれる場合は、セミコロンを使用してパラメータを区切ります。 .transition( 2秒;幅、高さ; }

条件判断

ミックスインで使用する

// 条件判定 .arrow-set(@width:5px) { width: 0; height: 0; overflow: hidden; border-style: Solid ; border-width: @width; } .arrow(@direction, @width:5px, @color:#000) when (@direction=up){ . arrow-set(@width); border-color: 透明透明 @color 透明; } .arrow(@direction, @width:5px, @color:#000) when ( @direction=down){ .arrow-set(@width); border-color:@color 透明透明透明; } .arrow(@direction, @width: 5px, @color:#000) when (@direction=left){ .arrow-set(@width); border-color:transparent @color 透明透明; } .arrow(@direction, @width:5px, @color:#000) when (@direction=right){ .arrow-set(@width); border-color:transparent 透明透明 @color ; } // mix を呼び出します .box { //.arrow(up, 100px); //.arrow(down, 100px); //.arrow(left, 100px); .arrow(right, 100px, red); }

輸入

// ミックスをインポートします。less ファイルをインポートする場合は、サフィックスを省略できます。 @import "mixins/mixins"; @import "variables"; @import "base";

// css 構文、css に直接出力 @import "style.css";

入れ子になった

オペレーター

組み込み関数が少ない

地図

サス

スタイラス