HTML標籤的分類：
1. 塊兒級標籤 預設獨佔一行（整個瀏覽器的寬度） 可以設定長和高
2. 行內標籤（內聯標籤） 長度由自己的內容來決定的。無法設定長和高

HTML巢狀的規則：
1. 塊兒級標籤可以巢狀行內標籤 （div標籤可以巢狀div標籤）
2. p標籤不能巢狀div標籤




form表單系列：
注意事項：
1. form 不是 from
2. input標籤 必須要帶一個name屬性
3. 如果form裡面有檔案提交的話 必須加一個屬性：enctype="multipart/form-data"， 同時使用post方式提交
4. 提交按鈕必須是 <input type="submit">

input標籤
1. text
2. password
3. submit
4. radio
5. checkbox
6. file

select下拉框
1. 普通下拉框
2. 多選下拉框 multiple
3. 分組的下拉框 optgroup

textarea (大段文字)

2. CSS（改變網頁的外觀效果）
0. 前提
如何在HTML檔案中使用（引入）CSS？
三種方式
1. 直接在標籤裡通過style屬性來定義CSS樣式
2. 在head標籤中通過 style來定義
3. 把樣式（CSS）檔案單獨寫在一個.css檔案中，然後通過 link標籤來與HTML檔案建立聯絡

CSS語法：
選擇器 {
樣式1：值1;
樣式2：值2;
...
}

1. 找標籤
CSS選擇器
1. 基本查詢
1. 標籤選擇器 （改所有/設定預設樣式）
2. ID選擇器 （針對某一個特定的標籤修改樣式）
3. 類選擇器 (根據需求修改某一類標籤的樣式)
2. 通用（全選）
1. *
3. 組合選擇器(HTML標籤的層級關係)
1. 後代選擇器 （從x的子子孫孫找y標籤）--> x y
2. 兒子選擇器 (x的兒子y標籤) --> x>y
3. 毗鄰選擇器 (緊挨在x下面的y標籤) --> x+y
4. 弟弟選擇器 (下面所有的xx標籤) --> x~y

↑上面常用

4. 屬性選擇器
更多用於找input[type="text"]
5. 分組和巢狀
1. 分組 （減少重複的CSS樣式程式碼） 逗號分隔的兩個選擇器
2. 上面的選擇器都支援混搭使用

6. 偽類選擇器
1. div:hover { color: red;}

7. 偽元素選擇器
1. p:before {} 在內容前面加
2. p:after {} 在內容後面加

CSS選擇器的優先順序：
0. 繼承的優先順序最低
1. 當選擇器相同的時候，誰靠近標籤誰樣式生效
2. 當選擇器不同的時候，我們按照權重計算公式來判斷哪個樣式生效
（內聯樣式1000>ID選擇器100>類選擇器10>元素選擇器1）

不常用也不推薦使用的 !import

2. 改樣式(CSS屬性)

1. 字型相關
1. color 修改字型顏色
2. font-size 字型大小

2. 文字
1. color 字型顏色
2. text-align 對齊方式
3. text-decoration 文字裝飾 (去掉a標籤的下劃線 text-decoration: none;)

3. 背景相關屬性
1. background-color
2. bakground-image
1. 把很多小圖片合併成一張大圖片
2. 滑鼠滾動 背景不動（姑娘一直在看著你）

4. 邊框
1. border: 1px solid red;
2. 畫圓：border-radius=寬/高的一半

5. display
1. block 顯示成塊級標籤
2. inline 顯示成行內標籤
3. inline-block 既有塊兒標籤右有行內標籤的特點
4. none 隱藏

6. CSS盒子模型
由內到外：
1. content 內容
2. padding 內填充 （用於調整內容和邊框之間的距離，撐大標籤）
3. border 邊框
4. margin 外邊距 （用於調整標籤和標籤之間的距離）

7. float 浮動（失去原來的位置）

1. left 往左浮
2. right 往右浮
3. none 不浮（預設值）

浮動的規則：
1. 無論什麼標籤 一旦浮動就變成了塊兒級標籤（可以設定寬高）
2. 浮動的標籤總是浮向前一個浮動的標籤，如果擺不下就挪到下一行開始

8. 清除浮動 clear --> 指的是清除浮動帶來的負面效果
1. left 我的左邊不能有浮動元素
2. right 我的右邊不能有浮動元素
3. both 我的兩邊不能有浮動元素

最常見應用：
.clearfix {
content: "";
display: "block";
clear："both"
}


9. 定位
1. 相對定位 relative （相當於標籤原來所在的位置來定位）
2. 絕對定位 absolute (相對於已經定位過的祖先標籤來定位) 失去原來的位置
3. 固定定位 fixed （固定在螢幕的某個位置) 失去原來的位置