前端之路 day1 html和css

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 （固定在屏幕的某個位置) 失去原來的位置