ログイン
サインイン

HTML5関連知識まとめマインドマップ

HTML5とは何ですか?勉強方法は？ HTML5 は、Web コンテンツを構造化するための言語記述方法です。 HTML5 はインターネットの次世代標準であり、インターネットコンテンツを構築および表示するための言語方式です。インターネットの中核技術の 1 つと考えられています。 HTML は 1990 年に作成され、HTML4 は 1997 年にインターネット標準となり、インターネットアプリケーションの開発に広く使用されています。次のマップは、参照および学習のために HTML5 関連の知識をまとめたものです。

2018-12-19 12:05:18 に編集されました

WSUJfrxa

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

HTML5関連知識まとめマインドマップ

WSUJfrxa

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

おすすめ
アウトライン

HTMLの基本タグ
- 14
WSUJfrxa
htmlの基本構造
- 14
WSUJfrxa
HTML5 CSS3のWebデザイン・制作
- 5
WSUJfrxa
HTMLの概要
- 12
WSUJfrxa
HTMLの初歩的なマインドマップ
- 7
WSUJfrxa
HTML
- 6
WSUJfrxa
ウェブマインドマップ
- 24
WSUJfrxa

HTML5

<body>URL コンテンツ

ボディのプロパティ:

bgcolor: 背景色背景: 背景画像テキスト: フォントの色 onload: ロード時に呼び出されます

水平線

<時間>

フォントの操作

太字フォント

<b>

斜体フォント

<i>

下線

<u>

取り消し線

<デル>

フォント

<font>: 色: フォントの色サイズ：1～7のフォントサイズ

<マーク>ハイライト</マーク>

タイトルタグ

<h1>～<h6> フォントを太字にして大きくし、単独の行に配置します

段落タグ

<p> 段落間を区切る

改行

<br>

空間

ハイパーリンク

通常のリンク

アンカーリンク

まず、場所タグを定義します: <a name="ding"></a> 次に、ハイパーリンクを使用して、事前定義された場所にジャンプします: <a href="#ding">トップに戻る</a>

機能的な接続

QQ ポップアップウィンドウ: Tencent のリモートチャットインターフェイスと呼ばれるもの <a href="tencent://message/?uin=10001&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:10"/></a>

画像タグ

リスト

順序付きリスト:

<ol type="値"> <li>バナナ</li> <li>ジャガイモ</li> <li>ヤリ</li> </ol>

順序なしリスト:

クイック作成

ul>li*4 タブキー

シート

テーブルのプロパティ

border: 表の境界線、値は int 型、値が大きいほど線が太くなり、0 はなしを意味します bordercolor: テーブルフレームの色セル間隔: セル間の距離 width: テーブルの幅、ピクセルまたはパーセンテージ高さ: テーブルの高さ、ピクセルまたはパーセンテージ bgcolor: テーブルまたはセルの背景色 (table、tr、td に適用) 背景: 背景画像

クイック作成

テーブル>tr*2>td*3

<テーブル> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </テーブル>

tr は行を表します tdは列を表します

セルを結合します

Colspan: 水平と平行をマージ(水平/左右方向) rowspan: 行を結合（垂直方向/上下方向）垂直方向に結合注: 結合とは複数の項目が 1 つになることを意味するため、余分な項目は削除する必要があります。

形状

<フォーム></フォーム>

フォーム属性:

- アクション: フォーム送信先 - メソッド: フォーム送信のメソッド平文取得 (デフォルト)/暗号文投稿 - enctype: エンコード方式 (形式には特別な要素があります: 画像をアップロードする場合にのみ使用されます) onsubmit: イベントの送信

入力

<input type="x" name="y" placeholder="" disabled="disabled"> タイプ: タイプ name: 入力ボックスの名前プレースホルダー; プロンプト入力ボックス無効: 無効

タイプの値: text: テキスト入力ボックス (デフォルト値) パスワード: パスワード入力ボックス checkbox: チェックボックス/複数選択ボックス <-checked は選択された要素を選択しますラジオ：ラジオボタン submit: 送信ボタン (値を使用してデフォルトのボタン名をオーバーライドできます) リセット: リセットボタン (値を使用してデフォルトのボタン名をオーバーライドできます) ボタン: ボタン -フォーム内：送信ボタンに相当 - フォーム外：通常のボタン色: カラーパレット日付:カレンダー月:月間カレンダー週間週間カレンダー数値:数値フィールド -min 最小値 -max 最大値 -step 入力の倍数でジャンプします範囲: スライド検索検索ボックス

<選択> <オプション>ドロップダウンメニュー</オプション> ... </選択>

スクロール・バー

<進行状況></進行>

レノボ入力ボックス

一貫性を保つ

拡張可能なコンテンツ領域

フレーム

他のページへの参照 (ハイパーリンク付き)

target: Web ページを開くターゲットは xy 位置です

メディアレーベル

<ビデオ>ビデオ

<オーディオ>音楽

再生コントロールを表示する

コントロール

自動再生

自動サイクル

ループ

パス

送信元

構造タグ div

div に基づいて多くの div 子要素を派生し、それらを div として使用できます。各子要素には、div の「意味論的」記述を完成させるための独自の名前があります。意味化：Javaの変数名の仕様における「名前を見れば意味が分かる」に似ています。

<セクション>

Web ページのコンテンツ領域

<記事>

記事

<余談>

記事外のコンテンツ

<hグループ>

内容とタイトルの組み合わせ

<ナビ>

ナビゲーション

<図>

写真とテキスト

<ヘッダー>

Webページのヘッダー

<フッター>

ページの一番下

クリアフロート:両側

クリア:両方;

次の 3 つの方法を使用します。

インラインスタイル

開始タグ内に書かれている

内部スタイル

</head><body> の間に記述

<スタイル></スタイル>

外部スタイルシート

.css ファイルを作成してそこに書き込みます

定義:<link href="css/01.css" rel="stylesheet"/>

CSSの優先度

近接性の原理

セレクタ

要素セレクター

形式:h2{}

タグ名を変更対象として使用します

クラスセレクタークラス

形式: .クラス名{}

要素セレクターをさらにフィルタリングします

IDセレクターID

形式: #id 名{}

クラスセレクターをさらに一歩進めます

セレクターグループ

形式:h1、h2、h3{}

派生セレクター

子孫セレクター (すべて選択)

形式:div p{}

子孫セレクター(セレクター)

形式:div>p{}

疑似クラスセレクター

クリックされていません

形式: a:リンク{}

クリック後

形式:a:訪問済み{}

ホバリング

形式: a:ホバー{}

クリックしたままにします

形式:a:アクティブ{}

4 つの疑似クラスは特定の順序でなければなりません。そうしないと、無効な lvha になります。

背景

背景色

背景色:赤;

背景画像

背景画像:url(img/1.jpg);

背景のタイリング

デフォルトでは、背景画像は x 軸と y 軸上に「並べて」表示されます。タイル表示の動作を制御するには、background-repeat を使用します。

繰り返し: デフォルト値、x 方向と y 方向のタイリング

repeat-x:x 方向のタイリング

repeat-y:y 方向のタイリング

no-repeat: タイリングなし

背景パン

背景スクロール

背景添付: 背景スクロール (デフォルト値)

背景添付: 背景が動かない問題を修正しました。

背景サイズ

含む: 背景領域のサイズにズームします (背景画像が完全に表示されます)。 cover: 背景領域を完全にカバーするように拡大縮小します (空白を残さない)

背景の位置

背景の原点:

ボーダーボックス;

パディングボックス：（デフォルト）

コンテンツボックス:

背景のトリミング

背景クリップ:

ボーダーボックス;

パディングボックス：（デフォルト）

コンテンツボックス:

四辺をカットする

フレーム

4 つの辺を同時に設定: border:3px 赤一色;

テキストオーバーフローの処理

auto: 適応型。制限を超えた場合はスクロールバーが追加され、それ以外の場合はスクロールバーは追加されません。

非表示: 超過した場合は非表示になります

RGBカラー

http://tool.oschina.net/commons?type=3

ボックスモデル

マージンマージン

上に

パディングパディング

左左

テキストスタイル

フォント

font-family:"Microsoft Yahei";

フォントサイズ

フォントサイズ:50px;

フォントの色

色:オレンジ色;

テキストの配置 (左、中央、右)

テキスト整列: 中央;

太字フォント

フォントの太さ: 太字;

中心線（線削除）

テキスト装飾: ラインスルー;

上線

テキスト装飾: 上線;

背景色

背景: 茶色;

高さ（家の高さ）

高さ: 150ピクセル;

テキストの行の高さ（人間の高さ）

行の高さ:150ピクセル;

インデント

テキストインデント: 30px;

テーブルスタイル

セルの境界線を結合する

境界崩壊: 崩壊;

リストスタイル

取り除く

リストスタイルタイプ: なし;

番号

リストスタイルタイプ: 10 進数;

小文字のローマ字

リストスタイルタイプ: 小ローマ字;

キャピタルローマン

リストスタイルタイプ: アッパーローマン;

黒斑

リストスタイルタイプ: ディスク;

ブロック

リストスタイルタイプ: 正方形;

丸

リストスタイルタイプ: 円;

リスト項目タグを画像に置き換えます

リストスタイル画像: url(img/1.png);

フロート配置による横向きへの変更

マウススタイル

カーソル：

デフォルト: ポインタ

ポインター: 指

クロスヘア: 十字

テキスト: フォーカス

待って待って

位置決めスタイル

要素の分類

すべての要素タグには、ブロックレベルまたは行レベルの独自の分類があります。

ブロックレベルの要素:

h1~h6、p、divなど...

トップダウン、垂直方向（ワードラップ）：幅と高さを変更できます

インライン要素

a、b、スパンなど...

左から右、水平方向 (行の折り返しなし): 幅と高さは変更できません

インラインブロック要素:

入力、画像など...

左から右、横方向（ワードラップ）：幅と高さを変更可能

デフォルトのターゲティング

ブロックレベル要素の表示

表示ブロック;

デフォルトの表示

インライン要素の表示

表示:インライン;

幅と高さは変更できません

インラインブロック要素の表示

表示:インラインブロック;

幅と高さを変更できます

フローティングポジショニング

フローティング要素は、その外端が親要素に接触するまで左右に移動できます。ピクセルまたは別のフローティングボックスの境界線フロート要素は依然として親要素内に位置します

左にフロートします

フロート:左

右に浮く

フロート:右

相対的な位置決め

この要素と隣接する要素の間の距離

位置: 相対

絶対位置決め

この要素と祖父要素の間の距離

位置:絶対

固定位置

要素の位置を変更しないでください

位置:固定;

z軸（オーバーレイ表示）

値が大きいほど顔に近づきます（顔に近づきます）

z-index: 数値

隠しテキスト

ディスプレイ:なし;

隠しテキスト

関数

ハイパーリンクから下線を削除する

テキスト装飾:なし;

丸い角

border-radius:50%;/*ボーダーの角丸 50%*/(circle)

境界半径: 左上 px、右上 px、右下 px、左下 px;

border-radius: 左上 (右上) px 右上 (左下) px;

影

ボックスシャドウ

box-shadow: 水平オフセット px 垂直オフセット px ぼかしサイズ px 影のサイズ px 影の色;

テキストシャドウ

text-shadow: 影の色、水平方向 px、垂直方向 px、ぼかしサイズ px;

勾配

線形勾配

背景:linear-gradient([方向へ]カラーリスト);

放射状グラデーション

背景:放射状グラデーション(カラーリスト);

カラーリストにはN個の数値を含めることができます

アニメーション

トランジションアニメーション

制御できるのは始まりと終わりだけであり、その間のプロセスは制御できません。

トランジション: トランジションまたはアニメーションシミュレーションの CSS 属性、トランジションの完了に使用される時間、トランジション関数 [トランジション開始の遅延時間];

すべての属性が遷移をサポートしているわけではありません。CSS3 は一部の属性のみを開発します

トランジション機能:

容易に

デフォルト。速いから遅い

線形

均一速度

イーズイン

加速する

イーズアウト

減速する

イージーインアウト

最初に加速してから減速する

アニメーション

ある状態から別の状態まで、プロセスのあらゆる時点を制御できます。

アニメーションを定義します。

@keyframes アニメーション名{ {色、形、距離...} から開始 {色、形、距離...} の終点まで }

@keyframes アニメーション名{ 0%{色、形、距離...} ... 100%{色、形、距離...} }

バインドアニメーション

要素セレクター { アニメーション: アニメーション名、実行時間、遷移関数、実行回数 [交互往復実行]; }

無限

ワイヤレス実行時間

JS は、追加するために使用される Web プログラミングテクノロジです。インタラクティブな動作

js はインタープリター (スクリプト) 言語であり、ブラウザーは前処理なしでコードを解釈して実行します。コンパイル。

3つの方法を使用する

業界内

<input type="button" value="兄弟クリックしてください" onclick="alert('嘤嘤嘤')";

クリック時

バインドイベント

アラート()

ポップアップ

内部

<スクリプト> アラート("ハローワールド!") </script>

外部の

接尾辞「.js」が付いたファイルを作成します

定義:<script src="01.js"></script>

優先順位: 誰が一番上ですか? 誰が最初に処刑されるべきですか?

変数

JavaScript は型指定が弱い言語であるため、変数を定義する場合、すべてのデータ型は var を使用して宣言されます。

数値型: 数値

文字列: 文字列は二重引用符または一重引用符を使用します

ブール型：true=1 | false=0（動作時に1と0に変換されます）

自動型変換

数値文字列 = 文字列

ブール値 = 数値

ブール文字列 = 文字列

ブール値ブール値 = 数値

変換関数

任意の型を文字列に変換します

x.toSring();

文字列を整数に変換する

parseInt(x)

文字列を 10 進数に変換する

parseFloat(x)

現在の値の種類を問い合わせる（判断する）

typeof(x)

変換できない場合は NaN が返されます

プロンプト出力ボックス

プロンプト（）

プロンプト入力ボックス

アラート()

ポップアップ

コンソール.info()

コンソール出力

document.write()

ページのコンテンツを出力する

オペレータ/フロー制御

算術演算

関係演算

厳密に等しい

===同じ型と値

厳密には等しくありません

!==

論理演算

三項算術

ループ構造

条件判断

共通オブジェクト

弦

文字列オブジェクトを作成する

var str="helloworld";

var str=new String("helloworld");

一般的に使用される方法:

配列配列

データ型に関係なく、それは配列です

配列を初期化する 3 つの方法

var arr1 = 新しい配列(); arr1[0] = 10; arr1[1] = 20; arr1[2] = 30; console.info( arr1 );

var arr2 = 新しい配列(10,'a',true); console.info( arr2 );

var arr3 = [5,'b',false]; console.info( arr3 );

二次元配列

配列内の要素は配列です。

配列によく使用されるメソッド:

数値計算

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

Math.round(x)

整数に丸める

数学の床(x)

丸め

Math.random();

0 ～ 1 の間の乱数を返します。

max(x,y) は、x と y の間の最大値を返します。 min(x,y) は、x と y の間の最小値を返します。

数値カプセル化クラス

var データ = 23.56789; alert(data.toFixed(2));//23.57

数値を文字列に変換し、小数点以下の特定の桁数を保持します。

日付日付

RegExp 正規表現

一般的な方法

RegExp.test(文字列)

文字列 string に RegExp に一致するテキストが含まれている場合に true を返します。、それ以外の場合は false を返します

null および未定義

定義済み

物はあるが価値がない

ヌル

ターゲットがありません

関数 (Java メソッドなど)

関数定義

キーワード関数で定義

関数名の定義規則は識別子と一致しており、大文字と小文字が区別されます。

変数、定数、または式を関数呼び出しの引数として使用できます。

戻り値には return を使用する必要があります

function 関数名(パラメータ) { 関数本体。戻り値を返します。 }

パラメータのない関数

関数 abc(){ for(var i = 1;i<=5;i){ コンソール.info(i); } }

パラメータ付き関数

関数 he(a,b){ アラート(a b); }

パラメーターを含む関数の場合は、関数を定義するときにデータ型を追加しないでください。

戻り値のある関数

引数パラメータオブジェクト

関数 he(a,b){ アラート(a b); console.info( argument.length ); //パラメータの数 console.info( argument[0] ) ;// b の値 }

argument.length はパラメータリストの数を取得します argument[subscript] は、特定の位置のパラメータを取得します

無名関数

名前のない関数は今回のみ実行可能です (Java の匿名内部クラスと同様)

グローバル関数

これらはすべて事前定義されており、js がそれらを準備します。メソッド名を使用して直接参照するだけです。

一般

parseInt() | パースフロート()

isNaN() は文字が含まれているかどうかを判断します

eval(): 文字列内の演算を変換するために使用されます。

encodeURI()

コーディング

デコードURI()

デコード

DOMオブジェクト

要素は、HTML ページ内のすべての要素をオブジェクトに変換する JavaScript 内のメカニズムです。この仕組みが「DOM」です各ドキュメントはドキュメントオブジェクトです。

要素ノードを見つける方法:

ID 値を通じて一意のオブジェクトを取得します

document.getElementById(id 値)

name 属性値を通じて複数の一致するオブジェクトを取得します

document.getElementsByName( 名前値 )

タグ名を通じて複数の一致するオブジェクトを取得する

document.getElementsByTagName(タグ名)

ケース: ログイン認証

ケース: インターレース色変更

例: すべてのエフェクトを選択する

ノードのスタイルを変更します。

形式: 要素 object.style.css 属性名 = "属性値";

例えば：ノード.スタイル.カラー = "赤"; ノード.スタイル.フォントサイズ = "10em"; 複数のスタイルを同時に変更します。 className = "クラス名";

ケース: クラス属性

階層型検索ノード

解析対象の div タグと p タグの間には空白ノードがあるため、text ノードに属する #text が表示されます。空白を削除する

ノードタイプ:

要素の選択操作

テーブルテーブル要素オブジェクト

ノードの作成

削除して置き換える

消去

交換する

BOM ブラウザオブジェクト

ウィンドウウィンドウオブジェクト

アラート(プロンプトメッセージ)

プロンプトダイアログボックス

確認（プロンプトメッセージ）

ダイアログボックスがブール型を返すかどうか

プロンプト(プロンプトメッセージ,[コンテンツ])

入力ダイアログ

window.close()

現在のブラウザウィンドウを閉じる

window.open (Web ページアドレス、ウィンドウ名、[パラメータ]を開く)

新しいブラウザウィンドウを開く

パラメータ:

ウィンドウタイマー

setTinterval(1,2); 1: 繰り返される動作（機能） 2: 時間間隔 (ミリ秒)

定期タイマー

clearInterval(タイマーオブジェクト)

スケジュールされたタスクを停止する

setTimeout(1,2) 1. 実行された機能 2、間隔（ミリ秒）

ディレイエフェクトに似たワンタイムタイマー

画面オブジェクト

画面の幅画面の高さ

画面解像度を取得する

歴史的痕跡オブジェクト

歴史.go(番号)

前に戻る

num が正の場合、前進することを意味します num が負の場合、戻ることを意味します

履歴.back()

前のページに戻ります

位置オブジェクト

location.href=ページジャンプ先

症例ページへのジャンプ

イベントイベント

マウスイベント

マウスクリックイベント

クリック時

マウスのダブルクリックイベント

オンドブルクリック

マウスオーバーイベント

マウスオーバーで

マウス放置イベント

オンマウスアウト

キーボードイベント

キーボードを押すイベント

オンキーダウン

キーボード発売イベント

オンキーアップ

ステータスイベント

オンフォーカス

集中力を得る

オンブラー

集中力を失う

変更中

変化によってトリガーされる

事例: 州および地方自治体の連鎖的影響

イベントのデフォルトのメカニズム

イベントのトリガーとなるシーケンスは内部から外部へであり、これがバブリングメカニズムです。

2 つのボタンが重なった場合、デフォルトでは両方のクリックがトリガーされます。

バブリングメカニズムをキャンセルします。

イベント.stopPropagation();

マウスの電気ショックの x および y 座標

イベント.chintX

イベント.chintY

イベント.ターゲット.ノード名

発生ターゲット

オブジェクト指向の基本

オブジェクトを作成する 3 つの方法

オブジェクトを使用する

コンストラクターを使用する

リテラル (JSNO オブジェクト) を使用する

JSNOオブジェクト

jsnoオブジェクトを作成する

jsno配列を作成する

json複合オブジェクト

JQueryフレームワーク

導入

1. jqueryはjsで開発されているため、jquery自体はjavascriptです

jquery-3.3.1.js 開発環境本番環境用の jquery-3.3.1.min.js

シンプルなインターレースカラー変更

強力なセレクター

基本的なセレクター

タグセレクター

$("p")

IDセレクター

$("#er")

クラスセレクター

$(".si")

セレクター 1、セレクター 2。。。

$("#er,.si")

レベルセレクター

子孫セレクター

$("#d2p")

p1 p2

子孫セレクター

$("#d2>p")

近所の兄弟

$("#d2p")

後ろの兄弟全員

$("#d2~p")

その後のすべての p

基本的なフィルターセレクター

最初の要素

$("p:first")

最後の要素

$("p:最後")

not に要素が含まれていない (フィルタリング)

$("p:not(.si)")

奇数の添字を持つ要素

$("p:奇数")

偶数の添字を持つ要素

$("p:偶数")

等しい添字を持つ要素

$("p:eq(2)")

添字より大きい要素

$("p:gt(2)")

下付き文字より小さい要素

$("p:lt(2)")

コンテンツフィルターセレクター

ファジークエリの内容要素コンテンツには、is のすべての p 要素が含まれます

$("p:contains(is)")

内容が空の要素を選択する

$(":空")

可視性セレクター

(秒) p要素の隠しテキストを表示

$("p:hidden").show(1000);

フォームセレクター

:input すべての入力ボックスを選択します :text すべてのテキストボックスを選択します : パスワードはすべてのパスワードボックスを選択します : ラジオはすべてのラジオボタンを選択します : チェックボックスすべてのチェックボックスを選択します :submit すべての送信ボタンを選択します : リセットはすべてのリセットボタンを選択します : ボタンはすべてのボタンを選択します : ファイルはすべてのファイルフィールドを選択します : hidden はすべての非表示フィールドを選択します

属性セレクター

属性に xx が含まれ始めます

$("a[href^=xx]")

属性の末尾にxxが含まれています

$("a[href$=xx]")

属性にはxxが含まれています

$("a[href*=xx]")

フォームフィルター

無効になっている要素をすべて選択します

：無効

使用可能な要素をすべて選択します

:有効

選択した要素を選択します

:チェック済み

属性関数:

得る

$("img").attr("タイトル");

imgのtitle属性値を取得する

$("入力").val();

入力ボックスの値を取得します

$("div").text();

div内のプレーンテキストコンテンツを取得します

$("div").html();

div内のすべてのコンテンツ(htmlタグのテキスト値)を取得します

設定

$("img").attr("タイトル","xxx");

imgのtitle属性値を設定する

$("入力").val("xxxx");

入力ボックスの値を設定します

$("div").text("xxxx");

div内にプレーンテキストコンテンツを設定します

$("div").html("xxxx");

div内のすべてのコンテンツ(htmlタグのテキスト値)を設定します

取り除く

$("img").removeAttr("タイトル");

imgのtitle属性値を削除する

スタイル関数

$("p").addClass("クラススタイル");

クラススタイルを要素に追加する

$("p").removeClass("クラススタイル");

要素からクラススタイルを削除する

$("p").toggleClass("クラススタイル");

スタイルの切り替え (はい->いいえ、いいえ->はい)

$("p").css("css属性")

p要素のcss属性の値を取得します。

$("p").css("プロパティ","値")

p要素のcss属性の値を設定します。

$("p").css({"幅": "150px",...});

p要素(jsno)の複数のcss属性の値を設定する

$("div").width()

要素の幅を取得する

$("div").height()

要素の高さを取得する

$("div").width(value)

要素の幅を設定する

$("div").height(value)

要素の高さを設定する

h5とh4の違い

ドキュメントに関する声明

文字エンコーディングの設計

大文字小文字を区別しません

ブール属性

引用符は省略されました

終了タグが省略されている