Wondershare EdrawMind
Galerie de cartes mentales HTML5
- 13
HTML5
新しいタグ、新しいフォーム属性、H5 互換性ソリューション、レスポンシブ レイアウト、CSS プリプロセッサを含む HTML5 マインド マップ。
Modifié à 2023-05-27 23:45:56
- Recommandé pour vous
- Contour
HTML5
キャンバス
要素のドラッグ
オーディオビデオ
新しいタグを追加
セマンティック構造タグ
ヘッダ
ヘッダ
フッター
フッター
ナビ
メインナビゲーション
主要
ドキュメントの主なコンテンツ (whatwg にはセマンティクスがなく、IE ではサポートされていません)
セクション
ページのセクションまたは記事のセクション。通常はタイトルが付いています。
記事
記事、ブログ、投稿、コメントなどを定義します。
脇に
サイドバーを定義する
hグループ
記事のメインタイトルとサブタイトルの組み合わせなど、連続したタイトルをラップします (w3c によって削除されます)。
その他の新しいタグ
州
メーター
意味
ステータス、バッテリー、温度を表示
属性
価値
値、デフォルトの最大値は 1 です
最大
最高値
分
最低値
高い
より高い警告しきい値
低い
下限警告しきい値
最適
最適値、デフォルトは中間、最適値は緑、最適値に近い値は黄色、最適値から遠い値は赤です。
スタイル
メートル{<br> 幅:400px;<br> 高さ:30px;<br>}
meter::-webkit-meter-bar{<br> /* 全体の枠線や空白部分の背景などを設定できます。 */<br> backgroud:#fff;<br> border:1px Solid #ccc;<br> >}
meter::-webkit-meter-optimum-value{<br> /* 最適な値の範囲内でスタイルを設定します */<br>}
meter::-webkit-meter-suboptimum-value{<br> /* 範囲内のスタイルで対応します */<br>}
meter::-webkit-meter-even-less-good-value{<br> /* 不正な範囲スタイル */<br>}
進捗
意味
プログレスバー
属性
価値
値、デフォルトの最大値は 1 です
最大
最大値
スタイル
進行状況{<br> 幅:400px;<br> 高さ:30px;<br> ボーダー:1px 実線 #ccc;<br>}
progress::-webkit-progress-bar{<br>背景: #fff;<br>}
progress::-webkit-progress-value{<br> 背景: 緑;<br>}
リスト
データリスト
Baidu 検索ボックス、以下の入力プロンプト
<input type="text" list="searchOption"><br><datalist id="searchOption"><br> <option value="a"></option><br> <option value="ab"> </option><br> <option value="abc"></option><br> <option value="abcd"></option><br> <option value="aaa"></option>< br> <option value="acc"></option><br> <option value="bcc"></option><br> <option value="cdd"></option><br></datalist >
詳細
コンテンツを展開する
<詳細を開く><br> <summary>大規模なフロントエンド</summary><br> <p>HTML5</p><br> <p>CSS3</p><br> <p>JavaScript</p> < br> </詳細>
属性
開ける
コメント
ルビー
ピンイン付きのテキスト
<ruby>魑 <rt>チー</rt></ruby><br> <ruby>エンチャント <rt>メイ</rt></ruby>
マーク
マーク
テキストの色付け、キーワードでマークされた検索結果
Lorem ipsum <mark>dolor sit</mark> アメット、
スタイル
背景色、フォント
マーク {<br> 背景: 赤;<br> }
画像
形
記事内のイラスト、独立したコンテンツ<br>
<figure> <!--イラスト--><br> <img src="images/trump.jpg" alt=""><br> <figcaption>アメリカ合衆国大統領</figcaption> <!--絵説明- -><br> </figure>
新しいフォームのプロパティ
フォーム フォーム コントロール (入力、テキストエリア、選択...)
プレースホルダー
プロンプト表示
必須
必須、値を設定する必要はありません
オートフォーカス
フォーカスが点滅する入力ボックス、値を設定する必要はありません
オートコンプリート
オートコンプリート、以前に入力した内容をプロンプト表示、値はオフ/オンに設定可能
パターン
正規表現の作成、フォーム検証
フォーム要素
検証する
検証や値を入力する必要はありません
入力タイプの新しい値
Eメール
@を含む必要があり、@の前後にコンテンツが必要です
URL
http で始まる必要があります
番号
パラメータ
分
最小値、閉区間
最大
最大値、閉区間
ステップ
刻み幅
検索
検索ボックス、特別な機能なし
電話番号
電話番号。PC 版には特別な機能はありません。モバイル版には数字キーボードが表示されます。
範囲
範囲、デフォルトは 0 ～ 100
パラメータ
分
最大
ステップ
色
カラー、bgrフォーマット
日付
日付
月
年
週
週、週: 2019-W25
時間
時間: 23:20
日時ローカル
日付時刻
H5互換性ソリューション
メタを設定する
<!-- レンダリングに常に最新のドキュメント モードを使用するように IE を設定します --><br> <meta http-equiv="X-UA-Support" content="IE=Edge"><br> <!--Priority 360 およびその他のシェル ブラウザのレンダリングには Webkit (Chromium) カーネルを使用します --><br> <meta name="renderer" content="webkit">
要素の作成
<script><br> (function () {<br> document.createElement('header');<br> document.createElement('footer');<br> document.createElement('nav');<br> document.createElement('article');<br> document.createElement('aside');<br> document.createElement('section');<br> document.createElement('main');<br> ドキュメント。 createElement('figure');<br><br> })();<br> </script>
前のjs
header,footer,nav,article,aside,section,main {<br> 表示: ブロック;<br> }
html5shiv.jsを直接呼び出す
<!--[IE 9 の場合]><br> <script src="js/html5shiv.min.js"></script><br> <![endif]--><br>
レスポンシブレイアウト
意味
Ethan Marcotte は 2010 年に初めてレスポンシブ Web デザイン (RWD) という用語を提案しました。彼の記事の 1 つである「レスポンシブ Web デザイン · 別のリストの記事」では、3 つの既存の開発テクニック (弾性イメージ、弾性グリッド レイアウト、メディアおよびメディア クエリ) を統合し、それをレスポンシブ Web デザインと名付けました。 <br><br>では、真のレスポンシブ デザインとは何でしょうか?マルコット氏は、真のレスポンシブ デザイン手法とは、表示領域のサイズに応じて Web ページのレイアウトを変更するだけでなく、現在の Web デザイン手法全体を覆すことであり、どのような環境でも Web コンテンツに最適なレイアウトであると述べました。表示機構。
アドバンテージ
・開発・保守・運用コストのメリット：ページは1つですが、解像度や機器環境ごとに異なる設計を行っているため、複数バージョンに比べて開発・保守・運用コストを抑えることができます。 。 <br>- 互換性の利点: 新しいサイズのモバイル デバイスが次々に登場しており、カスタマイズされたバージョンは通常、特定の仕様のデバイスにのみ適しています。新しいデバイスの解像度が大幅に変更されると、互換性がなくなることが多く、対応に時間がかかります。新しいバージョンを開発すると、この間のアクセスが問題になりますが、レスポンシブ Web デザインを使用すると、この問題を事前に防ぐことができます。 <br>- 柔軟な操作: レスポンシブ デザインはページ固有であり、必要なページのみを変更でき、他のページには影響しません。 <br>
メディアからのお問い合わせ
メディアタイプ
メインコンテンツ
全て
すべてのデバイス
画面
コンピュータの画面、タブレット、携帯電話などに使用されます。
印刷する
プリンターと印刷プレビュー用
書き方
/*メディア クエリは特定の条件を満たしています*/<br> @media print {<br> h1 {<br> font-size: 100px;<br> color: red;<br> }<br> }
メディアのプロパティ
メインコンテンツ
オリエンテーション
機器の使用方向
風景
水平方向
肖像画
垂直方向
幅
ビューポートの幅
/*特定の幅を指定します*/<br> /*ビューポートの幅は 800px ピクセルです*/<br> @media (width:800px) {<br> h1 {<br> color: red;<br> background: # 54ABD4;<br> }<br> }<br>
/*範囲を設定します。600px 未満に設定します*/<br> /* 最大幅は 600px、600px 以下*/<br> @media (max-width: 600px) {<br> h1 {< br> フォントサイズ: 100px ;<br> カラー: 赤;<br> }<br> }
/*設定範囲は1000px以上です*/<br> @media (min-width: 1000px) {<br> h1 {<br> font-size: 200px;<br> color: yellow;<br > }<br> }
オペレーター
そして
そして
/* 600 以上 1000px 以下*/<br> @media (min-width: 600px) and (max-width:1000px) {<br> h1 {<br> font-size: 100 ピクセル;<br> カラー : 赤;<br> 背景: #333333;<br> }<br> }<br>
または
、
/*400 以下、または 1100 以上*/<br> @media (max-width: 400px),(min-width: 1100px) {<br> body {<br> background: yellow; <br> }<br> h1 {<br><br> }<br> ul {<br><br> }<br> }
いいえ
ない
/*メディア タイプと一致しません*/<br> /*画面ではありません*/<br> @media 画面ではありません {<br><br> }
メディアクエリの使用法
<!-- 最初の使用方法リンクでは、メディア属性を指定し、別の CSS を読み込むことができます--><br> <link rel="stylesheet" href="normal.css"><br> <link rel="stylesheet" href = "mobile.css" メディア="(最大幅:640px)">
<style><br> /*imort で CSS をインポートし、続いてメディア タイプをインポートする 2 番目の方法は推奨されません*/<br> /*import url('style.css') print;*/<br><br> <br> /*3 番目のタイプをお勧めします @media*/<br> @media screen and (max-width: 640px) {<br><br> }<br><br> </style>
ブレークポイントの設定
よく使用される設定 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、大画面
先に終わる
モバイルファースト
* {<br> margin:0;<br>padding:0;<br> }<br> /*デフォルトのスタイルはモバイル スタイルです*/<br> .container {<br> margin: 0 auto;< br > width: 100%; /*モバイルデバイスの幅は 100% < 768px*/<br> height: 300px;<br> 背景: #54ABD4;<br> }<br><br> /*width>= の場合768px*/<br> /*F の範囲は 768~991*/<br> @media screen and (min-width: 768px){<br> .container {<br> width: 750px;<br> } <br > }<br><br> /*width>=992の場合*/<br> /* 992 ~ 1199*/<br> @media screen and (min-width: 992px) {<br> . > width: 970px;<br> }<br> }<br><br> /*画面の場合》= 1200px*/<br> /*スコープ: >= 1200*/<br> @media screen and (min -width: 1200px) {<br> .container {<br> width: 1170px;<br> }<br> }
まずはパソコン
* {<br> margin:0;<br>padding:0;<br> }<br> /*サイレント最大ビューポート幅のデモ> 1200*/<br> .container {<br> margin: 0 auto ;< br> width: 1170px;<br> height: 300px;<br> background: #54ABD4;<br> }<br><br> /*width <= 1200の場合*/<br> /* 993～1200での機能*/<br> @media screen and (max-width: 1200px) {<br> .container {<br> width: 970px;<br> }<br> }<br><br><br > /*When width <= 992*/<br> /* 769 ~ 992 */<br> @media screen and (max-width: 992px) {<br> .container {<br> width: 750px; > }<br><br><br> /*幅<= 768の場合*/<br> @media screen and (max-width: 768px) {<br> .container {< br> width: 100%;< br> }<br> }
CSSプリプロセッサ
なぜそれを使うのでしょうか？
CSS 構文は十分強力ではなく、ネストできないため、モジュール開発では多数の繰り返しセレクターを記述する必要があります。
変数と合理的なスタイル再利用メカニズムがなければ、論理的に関連する属性値をリテラルの形式で繰り返し出力する必要があり、保守が困難になります。
CSS プリプロセッサは、CSS にはないスタイル レイヤーの再利用メカニズムを提供し、冗長なコードを削減し、スタイル コードの保守性を向上させます。
主流の CSS プリプロセッサ
少ない
コンパイル
jsコンパイル
<style type="text/less"><br> // 変数を定義<br> @width: 400px;<br> @height: 300px;<br> @color: #888;<br><br> #box {<br> 位置: 絶対;<br> 左: 50%;<br> 上: 50%;<br> 幅: @width;<br> 高さ: @height;<br> マージン左: -@width /2;<br> margin-top: -@height/2;<br> border: 2px ソリッド @color;<br> }<br><br> </style><br> <script src="js/ less.js"></script>
コアラ コアラ コンピレーション
Index.less 書き込み
// 変数を定義します<br>@width: 500px;<br>@height: 300px;<br>@color: #f90;<br><br><br>#box {<br> 位置: 絶対;<br > 左: 50%;<br> 上: 50%;<br> 幅: @width;<br> 高さ: @height;<br> マージン左: -@width/2;<br> マージン上: -@height/2;<br> ボーダー: 2px ソリッド @color;<br>}
コマンドラインのコンパイル
インストール
npm installless -g
使用
lessc bootstrap.less bootstrap.css
コメント
/*css コメントを css に変換しても、このコメントは残ります*/
// CSS にコンパイルすると、less のコメントが消えます。
変数
使用
cssプロパティ値が
//less変数をcss属性の値として扱います<br> width: @len;
属性名の場合
// 属性名としてless変数を使用する場合 @{変数名}<br> @{bg}: @basecolor;
セレクター時
//less 変数をセレクターとして使用する場合 @{variable}<br>#@{activeclass} {<br> width: 100px;<br> height: 100px;<br>}
変数スコープ
/*<br>変数スコープが少ない<br>ステップ 1: 変数を使用し、このスコープで検索し、見つけて、最後の定義を使用します<br>ステップ 2: このスコープで見つからない場合は、上位スコープの検索に進みます<br>*/
//less のスコープ<br>@var: 100px;<br>#box {<br> @var:20px;<br><br> .inner {<br> @var: 50px;<br> width: @var; /*60*/<br> 背景色: #ccc;<br> @var: 60px;<br><br> li {<br> 背景: 赤;<br> }<br> }< br><br> 幅: /*20*/<br>}<br><br>.list {<br> 高さ: /*100*/<br>}
ミックスミックスイン
意味
繰り返し呼び出すことができる JavaScript のような関数
カテゴリー
ノーマルミックス
// 通常のブレンドはクラス セレクターと同じです<br>.center-box01 {<br> 位置: 絶対;<br> 左: 50%;<br> 上: 50%;<br> 幅: 400px;<br > 高さ: 300px;<br> マージン左: -200ピクセル;<br> マージン上: -150ピクセル;<br> 背景色: #ccc;<br>}<br><br>.box01 {<br > border: 1px Solid #999;<br> text-align:center;<br><br> // ブレンドを呼び出します<br> .center-box01();<br>}<br>
出力せずにミキシングする
//出力なしの混合コンパイル後、CSS は出力されません<br>.center-box02() {<br> 位置: 絶対;<br> 左: 50%;<br> 上: 50%;<br>幅: 400px;<br> 高さ: 300px;<br> 左マージン: -200ピクセル;<br> マージン上: -150ピクセル;<br> 背景色: #ccc;<br>}<br>.box02 {<br> // mix を呼び出します<br> .center-box02();<br><br> border:1px Solid #ccc;<br>}<br>.list {<br> // パラメータなしで呼び出します Forブレンディング、()は省略可能<br> .center-box02;<br>}
パラメーターを使用したミキシング
// パラメータとの混合<br>.center-box03(@width, @height, @bgcolor) {<br> 位置: 絶対;<br> 左: 50%;<br> 上: 50%;<br> 幅: @width;<br> 高さ: @height;<br> マージン左: -@width/2;<br> マージン上: -@height/2;<br> 背景色: @bgcolor;< br >}<br><br>.box03 {<br> //.center-box03(600px, 200px, red);<br> .center-box03(1000px, 500px, #369);<br>}
デフォルトのパラメータ値と混合する
//混合パラメータのデフォルト値。デフォルト値を持つパラメータは後ろに配置されます。<br>.center-box04(@width, @height:100px, @bgcolor: grey) {<br>position:absolute; <br> 左: 50% ;<br> 上: 50%;<br> 幅: @width;<br> 高さ: @height;<br> マージン左: -@width/2;<br> マージン-トップ: -@height/2 ;<br> 背景色: @bgcolor;<br>}<br><br>.box04 {<br> .center-box04(200px, 100px);<br> //。 center-box04(200px, 100px , red);<br> //.center-box04(800px);<br>}
//デフォルトのパラメータ値、<br>.center-box05(@width:1000px, @height, @bgcolor) {<br> 位置: 絶対;<br> 左: 50%;<br> 上: 50%;< br> 幅: @width;<br> 高さ: @height;<br> マージン左: -@width/2;<br> マージン上: -@height/2;<br> 背景色: @bgcolor ;<br>}<br><br>.box05 {<br> //.center-box05(400px, 300px, green);<br><br> // ミックスを呼び出すときに、どの値が割り当てられるかを指定しますどのパラメータ 順序は関係ありません。すべて指定してください<br> //.center-box05(@height:500px, @bgcolor:red);<br> .center-box05(@bgcolor:blue, @height :500px、@width:400px) ;<br>}
@arguments すべての実パラメータを取得します
/*<br>transition: 幅 1 秒、高さ直線 1 秒<br>*/<br>// @arguments すべての実パラメータを取得します<br>.transition(@duration, @property:all, @timing-function:linear , @遅延:0s) {<br> -webkit-transition: @arguments;<br> -moz-transition: @arguments;<br> トランジション: @arguments;<br>}<br><br>.box06 { < br> //.transition(2s);<br> //.transition(2s, width);<br> .transition(2s, width, easy, 1s);<br>}<br>.box06 {< br > // カンマに加えて、セミコロンもパラメータの区切りに使用できます。<br> // 通常、パラメータの値にカンマが含まれる場合は、セミコロンを使用してパラメータを区切ります。<br> .transition( 2秒;幅、高さ;<br>}
条件判断
ミックスインで使用する
// 条件判定<br><br>.arrow-set(@width:5px) {<br> width: 0;<br> height: 0;<br> overflow: hidden;<br> border-style: Solid ;<br> border-width: @width;<br>}<br><br>.arrow(@direction, @width:5px, @color:#000) when (@direction=up){<br> . arrow-set(@width);<br> border-color: 透明 透明 @color 透明;<br>}<br><br>.arrow(@direction, @width:5px, @color:#000) when ( @direction=down){<br> .arrow-set(@width);<br> border-color:@color 透明 透明 透明;<br>}<br><br>.arrow(@direction, @width: 5px, @color:#000) when (@direction=left){<br> .arrow-set(@width);<br> border-color:transparent @color 透明 透明;<br>}<br><br >.arrow(@direction, @width:5px, @color:#000) when (@direction=right){<br> .arrow-set(@width);<br> border-color:transparent 透明 透明 @color ;<br>}<br><br><br>// mix を呼び出します<br>.box {<br> //.arrow(up, 100px);<br> //.arrow(down, 100px); <br> //.arrow(left, 100px);<br> .arrow(right, 100px, red);<br>}
輸入
// ミックスをインポートします。less ファイルをインポートする場合は、サフィックスを省略できます。<br>@import "mixins/mixins";<br>@import "variables";<br>@import "base";
// css 構文、css に直接出力<br>@import "style.css";
入れ子になった
オペレーター
組み込み関数が少ない
地図
サス
スタイラス