一、HTML部分

1.表單標(biāo)簽 form標(biāo)簽

表單標(biāo)簽是用來收集用戶信息的，是一個容器，用來獲取這個標(biāo)簽中相應(yīng)的其他標(biāo)簽(input標(biāo)簽)的數(shù)據(jù)
可以將收集到的數(shù)據(jù)，通過method對應(yīng)的方式去發(fā)送請求（發(fā)送給action對應(yīng)的接口）

<form action='' method=''>

    <input type='submit' name='' id='' value='提交'>
</form>

2.input標(biāo)簽

單標(biāo)簽
a.type屬性:決定input標(biāo)簽的樣式
-text(默認(rèn)值):對應(yīng)的是文本框
-password:密碼輸入框
-file:文件域，文件選擇器
-radio:單選按鈕，1、單選按鈕中的value值設(shè)置為這個按鈕選擇后提交對應(yīng)的值
2、多個單選按鈕只能選中一個，那么這些按鈕對應(yīng)的
name值必須一致
3、一組（name值一樣）單選按鈕提交的時候只提交被選中的按鈕的name值和value值
4、按鈕要默認(rèn)選擇的時候設(shè)置checked='checked'
checked屬性設(shè)置默認(rèn)選中
-checkbox:復(fù)選按鈕
1.同一組對應(yīng)的name值一樣
2.value值是選中后對應(yīng)的值
-button:普通按鈕，value值是按鈕上顯示的內(nèi)容
-submit:提交按鈕，自動將當(dāng)前form標(biāo)簽中設(shè)置了name屬性的input標(biāo)簽對應(yīng)的值
通過method對應(yīng)的方式提交給action對應(yīng)的接口，放在form標(biāo)簽里面有效
-reset:重置按鈕，將當(dāng)前form標(biāo)簽里面input標(biāo)簽的值設(shè)置為初始狀態(tài)，放在form標(biāo)簽里面有效
b.name屬性:區(qū)分不同的input對應(yīng)的值
c.value屬性:input標(biāo)簽中的值，相當(dāng)于內(nèi)容
d.placeholder屬性:(占位符)input作為文本輸入框的屬性，輸入框中的提示信息
e.maxlength屬性:約束輸入框能輸入的字符的最大個數(shù)
提交input中的數(shù)據(jù)給服務(wù)器的時候，是以name值=value值來提交的

        <form>
            <span>賬號:</span>
            <input type='text' name='num' />
            <span>手機(jī)號:</span>
            <input type='text' name='phonenum' />
            <input type="submit" value='提交' />
        </form>

注意:input標(biāo)簽放在form外邊同樣可以使用，只是不能直接使用重置和提交功能

3.下拉菜單和多行文本域

a.select標(biāo)簽，option標(biāo)簽
一個select標(biāo)簽對應(yīng)一個下拉菜單，菜單中的選項(xiàng)要通過option來列舉

            <select name='address'>
                <optgroup label="四川省">
                    <option value='cd'>成都市</option>
                    <option value='nj'>內(nèi)江市</option>
                    <option value='zy'>資陽市</option>
                    <option value='zg'>自貢市</option>
                </optgroup>
                <optgroup label="山西省">
                    <option value="ty">太原市</option>
                    <option value='yc'>運(yùn)城市</option>
                    <option value='dt'>大同市</option>
                </optgroup>
            </select>

select分組，optgroup實(shí)現(xiàn)分組，通過selected屬性設(shè)置默認(rèn)被選中狀態(tài),默認(rèn)情況下是第一個被選中

4.按鈕，button標(biāo)簽

<button>注冊</button>

5.div標(biāo)簽和span標(biāo)簽

div標(biāo)簽和span標(biāo)簽是空白標(biāo)簽，沒有語義。一般用來做分組（將網(wǎng)頁分塊）
div默認(rèn)會換行，span是在一行顯示多個
div:塊級標(biāo)簽（一行只能放一個標(biāo)簽）

6.塊級標(biāo)簽和行內(nèi)標(biāo)簽

塊級標(biāo)簽：一個標(biāo)簽占一行
h1~h6,p,ul,ol,li,dl,dd,table,tr,hr等
行內(nèi)標(biāo)簽：一行可以放多個行內(nèi)標(biāo)簽
a,img,input,select,button,textarea等

二、CSS部分

CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，用來規(guī)定網(wǎng)頁上內(nèi)容的樣式（CSS又叫樣式表）
目前廣泛使用的是CSS3

1.怎么來寫樣式表（CSS）,寫在哪兒？

a.內(nèi)聯(lián)樣式表:整個網(wǎng)頁只有這個標(biāo)簽有這個樣式用內(nèi)聯(lián)樣式
將樣式寫在標(biāo)簽的style屬性中(每個標(biāo)簽都有style屬性),內(nèi)部中不需要使用選擇器

<p style="background-color:red;">樣式表</p>
<p style=""></p>
b.內(nèi)部樣式表:將樣式表寫在head標(biāo)簽中的style標(biāo)簽中
<style type='text/css'>
    選擇器{
        屬性1:屬性值1;
        屬性2:屬性值2;
    }
</style>

c.外部樣式表
將樣式表寫在css文件中，然后再head中通過link標(biāo)簽導(dǎo)入

<link rel="stylesheet" type="text/css" href='./css/css_basic.css' />

注意三種樣式的優(yōu)先級:
不管是什么情況下，內(nèi)聯(lián)的樣式表的優(yōu)先級更高，內(nèi)部和外聯(lián)樣式的優(yōu)先級沒有確切的，誰后寫誰更高

2.固定語法

選擇器{
    屬性:屬性值；
    屬性2:屬性值2
}

說明:
a.選擇器:選擇器的作用是用來確定后面的樣式到底是給哪個/哪幾個標(biāo)簽寫的
b.屬性:屬性是css中本來就支持和擁有的屬性，屬性的順序可以隨便寫
屬性和屬性值之間使用冒號連接，
屬性后面必須寫分號，不管是不是最后一個
c.屬性值:
(1)數(shù)值:如果數(shù)值是用來表示大小，后面必須跟單位px(像素)或者%(占比,父標(biāo)簽寬高是確定的才能使用)
px --像素
%---百分比(前提是父標(biāo)簽對應(yīng)的寬度或者高度是確定的)
(2)顏色:顏色對應(yīng)的英語單詞
#加rgb對應(yīng)的16進(jìn)制值(一個顏色值對應(yīng)兩個十六進(jìn)制) #FF0000 紅
直接用rgb值：rgb(0,255,0),rgb(R,G,B), R,G,B的取值范圍是0~255
rgba(R,G,B,A) -a代表透明度，范圍是0~100

3.常見的屬性：

color:設(shè)置字體的顏色
background-color:背景顏色
width:寬度
height:高度
font-size:字體大小

4.常用的選擇器

注意，在標(biāo)簽中寫的代碼注釋是/注釋內(nèi)容/
1.標(biāo)簽選擇器（元素選擇器）：將標(biāo)簽名作為選擇器，同時選中界面中或者網(wǎng)頁中所有同類型的標(biāo)簽
a{} --選中所有的a標(biāo)簽
2.id選擇器，通過#+id屬性值，就構(gòu)成了id選擇器。選中id等于對應(yīng)的值的標(biāo)簽
id屬性:所有的標(biāo)簽都有id屬性

p1{} --選中id值是p1的標(biāo)簽

3.class選擇器:通過在class屬性值前加.，就構(gòu)成了類選擇器。選中class等于對應(yīng)值的標(biāo)簽
.c1{} --選擇所有class值是c1的標(biāo)簽

4.群組選擇器:多個選擇器職期間使用逗號隔開，選中所有的單獨(dú)的選擇器
a,p,#p1,.c1{} --選中所有的a標(biāo)簽，p標(biāo)簽和所有id值是p1以及所有class值是c1的標(biāo)簽

5.包含選擇器:多個選擇器之間使用空格隔開。從前往后找，找到最后一個選擇器
div .c1 p{} --選擇div中的class值是c1的標(biāo)簽中的p標(biāo)簽

        <div>
            <div>
                <p>hello</p>
            </div>
            <div class='c1'>
                <p>world</p>
                <div>
                    <p>python</p>
                </div>
            </div>
        </div>

6.通配符:直接將作為選擇器:選中當(dāng)前頁面中所有的標(biāo)簽
*{}

7.選擇器的優(yōu)先級
通過不同的選擇器選中了同一個標(biāo)簽，并且設(shè)置了同一個屬性，誰的優(yōu)先級高誰有效。
看誰的優(yōu)先級高，就看誰的權(quán)重值大
權(quán)重值是一樣的情況下，誰后寫，誰的優(yōu)先級高
偽類選擇器:0001
元素選擇器:0001
class選擇器：0010
id選擇器:0100
群組選擇器:直接看單獨(dú)的每一個的權(quán)重
包含選擇器:多個選擇器的權(quán)重和
通配符:0001
內(nèi)聯(lián)選擇器1000、
注意:不管選擇器的權(quán)重有多高，內(nèi)聯(lián)演示的優(yōu)先級都是最高的

8.偽類選擇器
前面的元素選擇器，id選擇器，class選擇器選中的都是標(biāo)簽
偽類選擇器是選中標(biāo)簽的某個狀態(tài)
偽類選擇器:選中某個標(biāo)簽的不同狀態(tài)（一般適用于超鏈接和按鈕等）
1.語法：----標(biāo)簽:狀態(tài)
標(biāo)簽選擇器:狀態(tài){}
a.狀態(tài):
-link:初始狀態(tài)
-visited:訪問后的狀態(tài)(適用a標(biāo)簽后的狀態(tài))
-hover:鼠標(biāo)懸停在標(biāo)簽上的時候?qū)?yīng)的狀態(tài)
-active:被激活對應(yīng)的狀態(tài)（一般用于超鏈接）--鼠標(biāo)按下的時候?qū)?yīng)的狀態(tài)
-focus：成為焦點(diǎn)（適用于輸入框）

        input:focus{
            outline:none;/*關(guān)閉輸入框輸入的時候的框*/
        }

注意：
1.標(biāo)簽是通過不同的選擇器去選中的都可以
2.愛恨原則:如果想要給一個標(biāo)簽同時給link\visited\hover\active中的兩個或者
兩個以上的狀態(tài)設(shè)置樣式，必須遵守愛恨原則（LoVeHate）如果不按愛恨原則可能回去問題
如果按照愛恨原則肯定不會出問題

a:link{屬性:屬性值}超鏈接的初始狀態(tài)

b.多行文本域:textarea標(biāo)簽

<textarea name='' rows='20' cols='20'></textarea>

rows初始行
cols初始列
有placeholder可以設(shè)置提示符
disabled：禁用文本框

    <textarea name='message' rows="5" cols="20" placeholder="200字以內(nèi)" disabled="disabled">
                
    </textarea><br>

span:行內(nèi)標(biāo)簽（一行可以放多個標(biāo)簽）