『webフロントエンド開発技術——html、css、javascript』ノートその2
5007 ワード
CSS(Cascading Style Sheet、積層スタイルシート)は、ウェブページをフォーマットする標準的な方法であり、ウェブページのスタイルを制御し、スタイル情報とウェブページの内容を分離させる技術である.
基本セレクタにはhtmlタグセレクタ、クラスセレクタ、IDセレクタがあります.
複合セレクタには、交差セレクタ(最初のセレクタはタグセレクタ、2番目はクラスセレクタまたはIDセレクタでなければなりません.div.a 1{})、パラレルセレクタ(h 1,h 2,div{})、子孫セレクタ(div p{})など)があります.
背景画像と背景色を同時に設定すると、背景色は背景画像を上書きします.
CSSの適用方法:インライン、インライン、リンク、インポート(@import url(mystyle.css))
CSS競合ルールの解決:
1.インライン>インライン>外部スタイル
2.複数の外部スタイルのうち、後に表示されるスタイルの優先度は、前に表示されるスタイルよりも高い
3.スタイルで、セレクタの優先順位:IDスタイル>classスタイル>タグスタイル.
Webレイアウトは、Webページに表示されるすべての要素を配置し、ページをまず全体的にタグでブロック化し、各ブロックをCSS配置して表示効果を設定し、最後に各ブロックに対応する内容を追加します.ボックスモデルでは、すべてのページの要素がボックスと見なされ、一定のページ空間を占め、特定の内容が置かれています.ページの2つの行の要素が隣接している場合、彼らの間の距離は最初の要素のmargin-rightと2番目の要素のmargin-leftです.垂直に配列されたブロックレベルの要素間の距離は、最初の要素のmargin-bottomと2番目の要素のmargin-topの両方の中で大きく、marginの「陥没」現象と呼ばれています.
divはブロックコンテナタグで、段落、タイトル、表、画像などの各種HTML要素を収容することができ、div内の要素は自動的に改行される.spanは行間要素で、彼の前後で自動的に改行することはなく、構造的な意味がありません.
Javascriptは、ダイナミックなWebページ作成のニーズに応じて誕生した新しいプログラミング言語です.特徴は、解釈性、ダイナミック性、プラットフォーム間性、セキュリティ、オブジェクトベース、CGI(Common Gateway Interface)のインタラクティブな時間を節約することです.javascriptはアルファベットの大文字と小文字に敏感で、文の終わりにセミコロンがない場合、javascriptは自動的に行コードの終わりを文の終わりとします.
変数に値が割り当てられていないと宣言した場合、その値はデフォルトでundefinedです.
すべての数値は浮動小数点で表され、数値フォーマットは、−900719925474092および90071992525474092およびそれらの間のすべての整数を正確に表すことができる.一部の数値演算は、-2114748648から2147483647までの32ビット整数に対して実行する.
document.writeln();文でエスケープ文字を使用する場合は、フォーマットされたテキストブロックに配置するだけで機能するため、スクリプトは
undefinedは、変数がまだ付与されていないか、存在しない属性値が付与されていることを示します.NaNは非数値を表す.nullは空の値を表し、空または存在しない参照を定義します.
==:等しい、表面値のみで判断され、データ型には関係ありません.「17」==17の戻り値がtrueの場合.
===:絶対的に等しく、表面値とデータ型が同時に判断され、「17」==17はfalseの値を返します.
&&:両方のオペランドが論理値である場合、同時にtrueの場合、結果はtrueとなります.2つのオペランドのうち1つが論理値でない場合、最初のオペランドの値がfalseの場合、結果はfalseになります.そうでない場合、2番目のオペランドの値が返されます.
|:両方のオペランドが論理値であれば、1つがtrueであれば、結果はtrueである.2つのオペランドのうち1つが論理値でない場合、最初のオペランドの値がtrue、文字列、または数値である限り、最初のオペランドの値が返されます.そうでない場合、2番目のオペランドの値が返されます.
typeofの戻り値は、number、string、boolean、object、function、undefinedの文字列形式です.
switch文の式の値は任意のデータ型であってもよく、caseの後の値は定数、変数、または式であってもよい.
do...while文末の括弧の後ろにセミコロンがあります.
continue文はwhile、for、dowhile文にのみ適用できます.
with文:プログラムのセットのデフォルトオブジェクトを作成するオブジェクト実行文です.
JAvascriptは、タグの前に挿入する必要があるフレームワークページに表示されます.そうしないと実行できません.
navigatorオブジェクトには、使用中のブラウザを記述するブラウザに関する情報が含まれます.
Windowsオブジェクトはブラウザウィンドウまたはフレームワークを表し、navigator以外のすべてのオブジェクトの最上位オブジェクトであり、Windowsオブジェクトは表示されるたびに自動的に作成されます.グローバル変数です.settimeoutは、特定の時間に1回のみ操作を実行し、setIntervalは、ウィンドウが閉じるかclearInterval()メソッドがIntervalを閉じるまで操作を繰り返し実行することができます.locationオブジェクトには、現在のURLに関する情報が含まれており、windowオブジェクトのlocationプロパティに格納され、そのウィンドウに現在表示されているドキュメントのwebアドレスを表します.historyオブジェクトが唯一使用している機能はback()、forward()、go()メソッドのみです.JAvascript実行エンジンは、HTMLファイルごとにdocumentオブジェクトを自動的に作成します.
HTML5:
2004年にWHATWG(Web Hypertext ApplicationTechnology Working Group,Webハイパーテキスト応用技術ワークグループ)が設立され、「存在は合理的である」という観点から指定された「妥協式」の規範である.非常にゆとりがあり、開発者が何らかの意味規範に従わなければならないことを要求しない.HTML 5の利点:ブラウザの互換性の問題を解決し、HTMLページの開発を簡素化し、意味の明確なドキュメント構造を提供し、webアプリケーションの機能を強化する.
html 5の構文の変化:
1.DOCTYPEの簡略化声明:規範要求は必須ではなく、使用可能
2.文字セットの簡略化宣言
3.一部の要素は終了マークを省略可能
4.タグと属性は大文字と小文字を区別しない
5.ブールタイプの属性値は省略可能
6.属性値は引用符を省略できます
HTML 5の文書構造:
head:ページ内の1つのコンテンツ領域またはページ全体を表すタイトル
article:ページ内のコンテキストに関連しない独立したコンテンツを表します.
section:ページのあるブロックの内容を分け、そのブロックの内容をさらに章のタイトル、内容、フッターなどのいくつかの部分に分ける
nav:ページ全体または異なる部分のナビゲーションとして複数のnav要素を持つページ上の様々なナビゲーションバーを定義します.
aside:現在のページまたは現在の文章の補助情報を定義し、現在のページまたは主な内容に関連する参照、サイドバー、広告、ナビゲーションバーなどの内容を含み、通常はサイドバーの内容として使用できます.
footer:ページまたは計画記事の脚注内容を定義します.1つのページに複数のfooter要素を含めることができます.
フォームの新規プロパティ:
form:フォーム要素とフォーム間の隷属関係を定義します.
formaction:複数のコミットボタンは処理ロジックを指定します.
Autofocus:ページのロードが完了すると、要素は自動的にフォーカスを取得します.
pattern:属性値は正規表現で、入力内容の有効性を検証します.
placeholder:テキストボックスまたはテキストフィールドに入力プロンプト情報を提供し、フォーム要素がフォーカスを取得すると、プロンプト情報は自動的に消えます.
required:フォーム要素の内容が空であることを確認します.
新しいinput要素タイプ:
tel:電話番号のテキストボックスしか入力できません
Email:email入力ボックス、自動チェック、カンマで区切られた複数のemailを許可
url:urlアドレス入力ボックスは、アクセスプロトコルの完全なurlパスを含む必要があります.自動的に検出されます.
number:特定の取値範囲の数値を入力する入力ボックスで、微調整コントロールとして表示され、ステップ長を調整するにはstep属性を使用し、取値範囲はmin、max属性で設定されます.
range:ユーザーに特定の範囲の数値を入力できるデジタルスライドバーを生成します.min、max、step.
search:検索キーワードを入力するためのテキストボックスです.
color:カラーセレクタを生成する
date:日付セレクタを生成します.
time:タイムセレクタを生成します.
datetime:utc日付と時間セレクタを生成する
datetime-local:ローカル日付と時間セレクタを生成する
week:曜日セレクタの生成
month:月セレクタの生成
新規フォーム要素:
Datalist:補助フォームテキストボックスの内容入力.非表示のドロップダウンメニューを生成するために使用され、含まれるオプションの生成方法はタグを使用して生成され、表示されるテキストはvalue属性値です.テキストボックスと組み合わせて使用する必要があります.テキストボックスのlist属性値をdatalistのidに設定します.
output:フォーム要素の内容またはスクリプトの実行結果が表示されます.フォームに属する必要があります.
新しいクライアント検証方式:
自動検査:required、pattern、min、max、step、input
明示的検査:checkValidity
チェックアウト解除:要素にnovalidateを設定し、コミットボタンにformnovalidateを設定します.
カスタム検証エラーメッセージ:setCustomValidity(String msg)
基本セレクタにはhtmlタグセレクタ、クラスセレクタ、IDセレクタがあります.
複合セレクタには、交差セレクタ(最初のセレクタはタグセレクタ、2番目はクラスセレクタまたはIDセレクタでなければなりません.div.a 1{})、パラレルセレクタ(h 1,h 2,div{})、子孫セレクタ(div p{})など)があります.
背景画像と背景色を同時に設定すると、背景色は背景画像を上書きします.
CSSの適用方法:インライン、インライン、リンク、インポート(@import url(mystyle.css))
CSS競合ルールの解決:
1.インライン>インライン>外部スタイル
2.複数の外部スタイルのうち、後に表示されるスタイルの優先度は、前に表示されるスタイルよりも高い
3.スタイルで、セレクタの優先順位:IDスタイル>classスタイル>タグスタイル.
Webレイアウトは、Webページに表示されるすべての要素を配置し、ページをまず全体的にタグでブロック化し、各ブロックをCSS配置して表示効果を設定し、最後に各ブロックに対応する内容を追加します.ボックスモデルでは、すべてのページの要素がボックスと見なされ、一定のページ空間を占め、特定の内容が置かれています.ページの2つの行の要素が隣接している場合、彼らの間の距離は最初の要素のmargin-rightと2番目の要素のmargin-leftです.垂直に配列されたブロックレベルの要素間の距離は、最初の要素のmargin-bottomと2番目の要素のmargin-topの両方の中で大きく、marginの「陥没」現象と呼ばれています.
divはブロックコンテナタグで、段落、タイトル、表、画像などの各種HTML要素を収容することができ、div内の要素は自動的に改行される.spanは行間要素で、彼の前後で自動的に改行することはなく、構造的な意味がありません.
Javascriptは、ダイナミックなWebページ作成のニーズに応じて誕生した新しいプログラミング言語です.特徴は、解釈性、ダイナミック性、プラットフォーム間性、セキュリティ、オブジェクトベース、CGI(Common Gateway Interface)のインタラクティブな時間を節約することです.javascriptはアルファベットの大文字と小文字に敏感で、文の終わりにセミコロンがない場合、javascriptは自動的に行コードの終わりを文の終わりとします.
変数に値が割り当てられていないと宣言した場合、その値はデフォルトでundefinedです.
すべての数値は浮動小数点で表され、数値フォーマットは、−900719925474092および90071992525474092およびそれらの間のすべての整数を正確に表すことができる.一部の数値演算は、-2114748648から2147483647までの32ビット整数に対して実行する.
document.writeln();文でエスケープ文字を使用する場合は、フォーマットされたテキストブロックに配置するだけで機能するため、スクリプトは
undefinedは、変数がまだ付与されていないか、存在しない属性値が付与されていることを示します.NaNは非数値を表す.nullは空の値を表し、空または存在しない参照を定義します.
==:等しい、表面値のみで判断され、データ型には関係ありません.「17」==17の戻り値がtrueの場合.
===:絶対的に等しく、表面値とデータ型が同時に判断され、「17」==17はfalseの値を返します.
&&:両方のオペランドが論理値である場合、同時にtrueの場合、結果はtrueとなります.2つのオペランドのうち1つが論理値でない場合、最初のオペランドの値がfalseの場合、結果はfalseになります.そうでない場合、2番目のオペランドの値が返されます.
|:両方のオペランドが論理値であれば、1つがtrueであれば、結果はtrueである.2つのオペランドのうち1つが論理値でない場合、最初のオペランドの値がtrue、文字列、または数値である限り、最初のオペランドの値が返されます.そうでない場合、2番目のオペランドの値が返されます.
typeofの戻り値は、number、string、boolean、object、function、undefinedの文字列形式です.
switch文の式の値は任意のデータ型であってもよく、caseの後の値は定数、変数、または式であってもよい.
do...while文末の括弧の後ろにセミコロンがあります.
continue文はwhile、for、dowhile文にのみ適用できます.
with文:プログラムのセットのデフォルトオブジェクトを作成するオブジェクト実行文です.
JAvascriptは、タグの前に挿入する必要があるフレームワークページに表示されます.そうしないと実行できません.
navigatorオブジェクトには、使用中のブラウザを記述するブラウザに関する情報が含まれます.
Windowsオブジェクトはブラウザウィンドウまたはフレームワークを表し、navigator以外のすべてのオブジェクトの最上位オブジェクトであり、Windowsオブジェクトは表示されるたびに自動的に作成されます.グローバル変数です.settimeoutは、特定の時間に1回のみ操作を実行し、setIntervalは、ウィンドウが閉じるかclearInterval()メソッドがIntervalを閉じるまで操作を繰り返し実行することができます.locationオブジェクトには、現在のURLに関する情報が含まれており、windowオブジェクトのlocationプロパティに格納され、そのウィンドウに現在表示されているドキュメントのwebアドレスを表します.historyオブジェクトが唯一使用している機能はback()、forward()、go()メソッドのみです.JAvascript実行エンジンは、HTMLファイルごとにdocumentオブジェクトを自動的に作成します.
HTML5:
2004年にWHATWG(Web Hypertext ApplicationTechnology Working Group,Webハイパーテキスト応用技術ワークグループ)が設立され、「存在は合理的である」という観点から指定された「妥協式」の規範である.非常にゆとりがあり、開発者が何らかの意味規範に従わなければならないことを要求しない.HTML 5の利点:ブラウザの互換性の問題を解決し、HTMLページの開発を簡素化し、意味の明確なドキュメント構造を提供し、webアプリケーションの機能を強化する.
html 5の構文の変化:
1.DOCTYPEの簡略化声明:規範要求は必須ではなく、使用可能
2.文字セットの簡略化宣言
3.一部の要素は終了マークを省略可能
4.タグと属性は大文字と小文字を区別しない
5.ブールタイプの属性値は省略可能
6.属性値は引用符を省略できます
HTML 5の文書構造:
head:ページ内の1つのコンテンツ領域またはページ全体を表すタイトル
article:ページ内のコンテキストに関連しない独立したコンテンツを表します.
section:ページのあるブロックの内容を分け、そのブロックの内容をさらに章のタイトル、内容、フッターなどのいくつかの部分に分ける
nav:ページ全体または異なる部分のナビゲーションとして複数のnav要素を持つページ上の様々なナビゲーションバーを定義します.
aside:現在のページまたは現在の文章の補助情報を定義し、現在のページまたは主な内容に関連する参照、サイドバー、広告、ナビゲーションバーなどの内容を含み、通常はサイドバーの内容として使用できます.
footer:ページまたは計画記事の脚注内容を定義します.1つのページに複数のfooter要素を含めることができます.
フォームの新規プロパティ:
form:フォーム要素とフォーム間の隷属関係を定義します.
formaction:複数のコミットボタンは処理ロジックを指定します.
Autofocus:ページのロードが完了すると、要素は自動的にフォーカスを取得します.
pattern:属性値は正規表現で、入力内容の有効性を検証します.
placeholder:テキストボックスまたはテキストフィールドに入力プロンプト情報を提供し、フォーム要素がフォーカスを取得すると、プロンプト情報は自動的に消えます.
required:フォーム要素の内容が空であることを確認します.
新しいinput要素タイプ:
tel:電話番号のテキストボックスしか入力できません
Email:email入力ボックス、自動チェック、カンマで区切られた複数のemailを許可
url:urlアドレス入力ボックスは、アクセスプロトコルの完全なurlパスを含む必要があります.自動的に検出されます.
number:特定の取値範囲の数値を入力する入力ボックスで、微調整コントロールとして表示され、ステップ長を調整するにはstep属性を使用し、取値範囲はmin、max属性で設定されます.
range:ユーザーに特定の範囲の数値を入力できるデジタルスライドバーを生成します.min、max、step.
search:検索キーワードを入力するためのテキストボックスです.
color:カラーセレクタを生成する
date:日付セレクタを生成します.
time:タイムセレクタを生成します.
datetime:utc日付と時間セレクタを生成する
datetime-local:ローカル日付と時間セレクタを生成する
week:曜日セレクタの生成
month:月セレクタの生成
新規フォーム要素:
Datalist:補助フォームテキストボックスの内容入力.非表示のドロップダウンメニューを生成するために使用され、含まれるオプションの生成方法はタグを使用して生成され、表示されるテキストはvalue属性値です.テキストボックスと組み合わせて使用する必要があります.テキストボックスのlist属性値をdatalistのidに設定します.
output:フォーム要素の内容またはスクリプトの実行結果が表示されます.フォームに属する必要があります.
新しいクライアント検証方式:
自動検査:required、pattern、min、max、step、input
明示的検査:checkValidity
チェックアウト解除:要素にnovalidateを設定し、コミットボタンにformnovalidateを設定します.
カスタム検証エラーメッセージ:setCustomValidity(String msg)