Day02 HTML

次の30日は好きでも嫌いでも过ごしなければならないのに、どうしてやりたいことをしないのですか.

無秩序リストUnordered List:

...

ラベルを使用して作成します.

  

    
Apple
    
    
Mi
    
Meizu
    ...
  

同様に、順序付きシーケンスOrder List: ...ラベルを使用して作成されます.

  

    
Apple
    
    
Mi
    
Meizu
    ...
  

...

ラベルはフォームを作成することができ、フォームのaction属性によってフォームとサーバを対話させることができ、actionの値はフォームデータサーバを受け入れるアドレスを指定する.

...

フォームのテキスト入力ボックス(Text Input):ユーザーが入力したテキストボックスを取得します.

注意:inputは、終了フラグを必要としない自己閉鎖ラベルです.プレースホルダ(Placeholder Text):input入力ボックスで、ユーザーが入力する前にデフォルトで表示された内容.inputラベルのplaceholderプロパティを使用して、デフォルトのコンテンツを指定します.

必須属性(required):テキストボックスに記入する必要があります.記入しないと、提出をクリックすると内容を入力するように要求されます.そうしないと提出できません.

提出ボタン(Submit Button):提出ボタンをクリックすると、フォームのデータはformラベルaction属性指定アドレスのサーバに送信されます.

ラジオボタン(Radio):入力ボックスの1つで、type = radioだけです.各ラジオ・オプションは、ボタンの内容を表示するために独自のlabelラベルにネストする必要があります.

  Rice
  Noodle
  Bread

注意:関連するラジオ・オプションのセットには、同じnameプロパティが必要です.

チェックボタン(Checkbox):入力ボックスの別のタイプで、各チェックオプションは、ボタンの内容を表示するために独自のlabelラベルにネストする必要があります.

  Rice
  Noodle
  Bread

注意:同様に、関連するチェックボタンには同じname属性が必要です.

RadioとCheckboxのデフォルト選択:checkedプロパティ.

  Rice
  Noodle
  Bread

注意:デフォルトではNoodleが選択されています.div元素
division(層)元素を指し、他の元素を盛るための汎用容器であり、PS中層の概念に似ている.各div要素の内容は互いに独立している.
CSS継承関係を使用して、div上のCSSをすべてのサブエレメントに渡すことができます.

classクラスセレクタを使用してdiv要素の背景を設定:

  
    .green-background {background-color: green;}

背景スタイルを呼び出します.

  
...

HTML要素のid属性id属性はclass属性と同様であり、セレクタを宣言することができ、クラスセレクタよりも優先度が高い.HTML要素のid属性は一意です!

   #cat-photo-app {background-color: gray;}

クラスセレクタは.プレフィックス宣言を使用し、idセレクタは#プレフィックス宣言を使用します.idセレクタの呼び出しはクラスセレクタと同様であり、HTMLタグでは属性idの値がidセレクタの名前であるが、#を除く.

  
...

レイアウト
HTML要素は本質的にhtmlページ上の小さなブロックの矩形であり、ページ上の小さなブロック領域を表す.HTML要素のレイアウトに影響を与える3つの重要な属性:marginの外側、paddingの内側、borderの枠線.

paddingプロパティ:エレメントの内容とエレメントの枠線との距離を制御します.周囲の余白は同じで、CSSのスタイルの説明:

    .red-box {padding: 10px;}     /*     */

周囲の余白が等しくありません:

    .red-box {padding-top: 10px;   /*   */
              padding-right:20px;       /*   */
              padding-bottom:30px;   /*   */
              padding-left: 40px;}       /*   */

注:上記の書き方は簡単に書くことができます.

    .red-box {padding: 10px 20px 30px 40px;}   /*   、 、 、      */

marginプロパティ:エレメントの枠線とエレメントが実際の空間に占める距離を制御します.周囲の余白が等しい、CSSスタイルの説明:

    .red-box {margin: 10px;}     /*     */

周囲の余白が等しくありません:

    .red-box {margin-top: 10px;   /*   */
              margin-right:20px;       /*   */
              margin-bottom:30px;   /*   */
              margin-left: 40px;}       /*   */

注:上記の書き方は簡単に書くことができます.

    .red-box {margin: 10px 20px 30px 40px;}   /*   、 、 、      */

注意:marginが負の値の場合、要素が占める領域は大きくなります.
CSSの継承
各htmlページには一意の...要素があり、残りのすべてのHTML要素はbody要素のサブ要素です.body要素はCSSスタイルを適用することができ、その内のすべてのサブ要素はbody要素のスタイルを継承します.セレクタを使用してサブエレメントにCSSスタイルを再付与すると、body要素が継承するスタイルが上書きされます.
セレクタの優先度:!important > id > class > element注:bodyから継承された4つのスタイルが上書きされます.

同じカテゴリのセレクタで、優先度は近接原則に従います.スタイル宣言の位置が下にあるほど、スタイルを適用するHTML要素が近くなり、優先度が高くなります.

    
...

注:h2要素が適用されるスタイルはred-textで、原則に近い.