****
2。252日目のWebフロントエンド学習の概要
HTMLの基本について
1.タグでは大文字と小文字は区別されません
2.属性はすべてタグ内にあり、値があります。
3.ラベルは自動閉鎖ラベルです。属性は次のとおりです。src-対応する画像を見つけるためのパスを設定する責任があります。これは、相対パスまたは絶対パスの場合があります。一般的に、相対パスの方が適しています。
alt ------画像の読み込みに失敗したときにテキストを表示する責任があります。
4.ラベルは通常、エンコーディングを決定するため、または検索してリダイレクトするために使用されます。属性：
http-equiv = refresh ----ページの更新を担当、コンテンツ----コンテンツまたは更新時間の表示、
url --------
5にジャンプするページパス。タグはインライン化に使用されます外部ページですが、通常はハイパーリンクがありません。
6.ラベルは、サブタイトル、属性をスクロールできます：ループ-----サイクル数
------------ハイパーリンク。属性：href：リンクのパスを指定します。target ------ドキュメントを開く場所を指定します。オプション値：_selef-現在のウィンドウが開いています。_black-新しいウィンドウが開きます。
7。
8.各タグは、一意のIDとしてid属性を持つことができます。
align属性は、中央または中央のテキストの位置を設定できます。
9. href = "＃"の場合、ウィンドウの上部に自動的にジャンプします。「#id」の場合は指定位置にジャンプします。「mailto：ownmailbox」の場合、システム内のメールボックスを呼び出して、指定したメールボックスに何かを送信できます。
****
cssの紹介
1. HTMLタグは要素であり、要素はタグです。
2. CSSのスタイルは、要素のstyle属性に書き込むことができます。このメソッドは、構造とパフォーマンスの結合度が高いため、後のメンテナンスには不便です。
**スタイルがstyle属性で記述されているため、インラインスタイルと呼びます。このメソッドは、現在の要素内のコンテンツにのみ影響します。インラインスタイルは再利用には便利ではありません。
3.ヘッダータグにスタイルタグを書き込むことをお勧めします。これは内部スタイルと呼ばれ
ます。4。要素のスタイルを変更するには、最初にセレクターを検討します。そうしないと、どの要素を装飾するかがわかりません。例：p {color：red} ----すべてのp要素の内容を赤に設定します。
5.外部スタイル（最も推奨）
cssファイルを作成し、リンクして、必要なときにいつでも呼び出すことができます。
コードは次のとおりです。Linkrel= "stylesheet" type = "text / css" href = "..."-これは自動終了タグです。最初の2つのパラメーターは固定されており、URLパスには次の情報を入力できます。相対的なcssファイルパス。接続を完了できるようにします。外部スタイル。
このように書くと、構造とパフォーマンスを完全に分離できるため、複数のページでこのスタイルを同時に使用できます。また、ユーザーアクセスを高速化し、ユーザーエクスペリエンスを向上させます。
CSSコメント：/ ... /
ブロック要素
1.ブロック要素とは何ですか？
行の要素はブロック要素です。例：div、p、h1、h2 ...;
div要素-セマンティクスがなく、通常はページのレイアウトを担当します。独自の行にあり、内部の要素にデフォルトのスタイルを設定しません。 。
インライン要素
インライン要素は、インライン要素とも呼ばれます。
1.インライン要素とは何ですか？
それはそれ自身の要素のサイズを占めるだけであり、要素の行を占めません。例：span、img、iframe、a
span要素-セマンティクスもありません。主にテキストにスタイルを提供する役割を果たします。
ブロック要素は、ブロック要素内に配置できます。
要素は任意の要素にすることができますが、それ自体はできません。
ブロック要素にはインライン要素を含めることができ、インライン要素にブロック要素を含めることはできません。
p要素をブロック要素にネストすることはできません。
各要素は一意のIDまたは同じグループで設定できます。クラスはクラスセレクターとも呼ばれ
ます。複数のグループを設定できます。例： "p class =" a1 a2 a3 "" nihao "/ p"
6
idセレクター＃id
{}
クラスselector.class
{}
/セレクターグループ化/ユニオンセレクターとも呼ばれる
h1、＃p1、.a3 { background-color：chartreuse; } ----同じセレクターを両方作成スタイルを組み合わせることができます。複合セレクター（交差セレクターとも呼ばれます）------複数の条件を満たす要素を選択します。構文：a1a2a3 {}子要素セレクター-----息子である限り、孫は気にしません。構文：div> span { background-color：darkmagenta; }子孫セレクターdiv span {}その他の子要素セレクター構文：first-child -----最初の子タグを選択-----これはすべての子要素の配置：最後の子------最後の子タグを選択：------- n番目の子（N）を指定された位置に子タグを選択：----- n番目の子（偶数）- -偶数の位置のサブタグ：n番目の子（奇数）-------奇数の位置のサブタグ：最初のタイプ----現在のタイプの最初のサブタグを選択-----これは配置です現在のタイプのサブ要素の：last-of-type ----現在のタイプの最後のサブタグを選択します
：nth-of-type ----現在のタイプの指定された位置にあるサブタグを選択します。
兄弟要素セレクター。
構文span + p {} ---- span要素の後ろの要素（兄弟要素）を表し、そのためのスタイル。
span〜p {} ---- span要素の背後にあるすべてのp要素（兄弟要素）を表し、そのスタイルを設定します
。7。
疑似クラス
は要素の特別な状態を表します。これらの特別な状態要素の状態を設定する必要がある場合は、疑似クラスが使用されます。
構文：a：Link {}
パラメーター:: Link-通常の接続を示します。（
訪問されていないリンク）：visited -------訪問されたリンクを意味します----ここで設定できるのはフォントの色のみで、他の設定は使用できません
：ホバー-------マウスin
：アクティブ-------クリックされた状態
：フォーカス------フォーカスが取得
されたときの状態::選択-----要素が選択されたときの状態（これはできません） Firefoxで実現されるため、変更する必要があります。書き込み:::-moz-selection）
<input type = "text"》 -----テキストボックスの取得に使用される自己終了タグ
8.
疑似要素
要素の特別な位置を示します。
パラメータ:: first-letter --------最初の要素を表します。
：First-line ------最初の行を表します
：before ------要素の前の位置を表します。通常はコンテンツで使用されます。テキスト段落などの前に単語を追加するために使用されます。
：After --------要素の後の位置を表します。また、一般的にコンテンツと組み合わせて使用されます。
属性セレクター
は、属性または属性値に基づいて要素を選択します。
構文p [title]またはp [title =“ hello”]
p [title ^ =“ ab”] ------
p要素p [title $ =“ cで、タイトル属性値がabで始まる要素を検索します。”] ------- p要素でtitle属性がcで終わる要素を検索します。
p [title * = "c"] ------- title属性のp要素にcが含まれている要素を検索します。
タイトル属性：タイトルを取得するだけでなく、マウスを動かしたときに表示されるテキストプロンプトとしても使用できます。
9.9。
スタイルの継承
スタイルを祖先要素に設定して、子孫要素が自動的に継承されるようにすることができます。
ただし、すべての要素が継承されるわけではありません。たとえば、背景スタイルは子要素に継承されません。
優先ルール
：インラインスタイル> idセレクター>クラスおよび疑似クラス>要素セレクター>ワイルドカード>
セレクターに含まれる場合の継承複数のセレクターの場合、比較のために複数のセレクターの優先順位を合計する必要があります。注：加算の最大優先順位は、それ自体のX数を超えることはありません。
セレクターの優先度が同じ場合は、低い方のスタイルが選択されます。
ユニオンセレクターの優先度は個別に計算されます。
スタイルの最後に！importantを追加すると、スタイルの優先度が最も高くなります