今日內容：

1. HTML標籤：表單標籤
2. CSS
   HTML標籤：表單標籤
   • 表單項標籤：

     • input：可以通過type屬性值，改變元素展示的樣式

       • type屬性：

         • text：文字輸入框，預設值

           • placeholder：指定輸入框的提示資訊，當輸入框的內容發生變化，會自動清空提示資訊

         • password：密碼輸入框

         • radio:單選框

           • 注意：
             1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
             2. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
             3. checked屬性，可以指定預設值

         • checkbox：複選框

           • 注意：
             1. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
             2. checked屬性，可以指定預設值

         • file：檔案選擇框

         • hidden：隱藏域，用於提交一些資訊。

         • 按鈕：

           • submit：提交按鈕。可以提交表單
           • button：普通按鈕
           • image：圖片提交按鈕
             • src屬性指定圖片的路徑

       • label：指定輸入項的文字描述資訊

         • 注意：
           • label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點選label區域，會讓input輸入框獲取焦點。

     • select: 下拉列表

       • 子元素：option，指定列表項

     • textarea：文字域

       • cols：指定列數，每一行有多少個字元
       • rows：預設多少行。

CSS：頁面美化和佈局控制

1. 概念： Cascading Style Sheets 層疊樣式表

   • 層疊：多個樣式可以作用在同一個html的元素上，同時生效

2. 好處：

   1. 功能強大
   2. 將內容展示和樣式控制分離
      • 降低耦合度。解耦
      • 讓分工協作更容易
      • 提高開發效率

3. CSS的使用：CSS與html結合方式

   1. 內聯樣式
      • 在標籤內使用style屬性指定css程式碼
      • 如：

<div style="color:red;">hello css</div>

2. 內部樣式
	* 在head標籤內，定義style標籤，style標籤的標籤體內容就是css程式碼
	* 如：
		<style>
	        div{
	            color:blue;
	        }
	
	    </style>
		<div>hello css</div>
3. 外部樣式
	1. 定義css資原始檔。
	2. 在head標籤內，定義link標籤，引入外部的資原始檔
	* 如：
		* a.css檔案：
			div{
			    color:green;
			}
		<link rel="stylesheet" href="css/a.css">
		<div>hello css</div>
		<div>hello css</div>

* 注意：
	* 1,2,3種方式 css作用範圍越來越大
	* 1方式不常用，後期常用2,3
	* 3種格式可以寫為：
		<style>
	        @import "css/a.css";
	    </style>
 

4. css語法：
   • 格式：
     選擇器 {
     屬性名1:屬性值1;
     屬性名2:屬性值2;
     ...
     }
   • 選擇器:篩選具有相似特徵的元素
   • 注意：
     • 每一對屬性需要使用；隔開，最後一對屬性可以不加；
5. 選擇器：篩選具有相似特徵的元素
   • 分類：
   1. 基礎選擇器
      1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
         • 語法：#id屬性值{}
         2. 元素選擇器：選擇具有相同標籤名稱的元素
            • 語法： 標籤名稱{}
      • 注意：id選擇器優先順序高於元素選擇器
        3. 類選擇器：選擇具有相同的class屬性值的元素。
      • 語法：.class屬性值{}
      • 注意：類選擇器選擇器優先順序高於元素選擇器
   2. 擴充套件選擇器：

      1. 選擇所有元素：

         • 語法： *{}

      2. 並集選擇器：

         • 選擇器1,選擇器2{}

      3. 子選擇器：篩選選擇器1元素下的選擇器2元素

         • 語法： 選擇器1 選擇器2{}

      4. 父選擇器：篩選選擇器2的父元素選擇器1

         • 語法： 選擇器1 > 選擇器2{}

      5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素

         • 語法： 元素名稱[屬性名="屬性值"]{}

      6. 偽類選擇器：選擇一些元素具有的狀態

         • 語法： 元素:狀態{}
         • 如： a
           狀態：
           link：初始化的狀態
           visited：被訪問過的狀態
           active：正在訪問狀態
           hover：滑鼠懸浮狀態
6. 屬性
   1. 字型、文字
      • font-size：字型大小
      • color：文字顏色
      • text-align：對其方式
      • line-height：行高
   2. 背景
      • background：
   3. 邊框
      • border：設定邊框，符合屬性
   4. 尺寸
      • width：寬度
      • height：高度
   5. 盒子模型：控制佈局

      • margin：外邊距

      • padding：內邊距

        • 預設情況下內邊距會影響整個盒子的大小
        • box-sizing: border-box; 設定盒子的屬性，讓width和height就是最終盒子的大小

      • float：浮動

        • left
        • right