一、HTML部分
1.表單標簽 form標簽
表單標簽是用來收集用戶信息的衍腥，是一個容器，用來獲取這個標簽中相應(yīng)的其他標簽(input標簽)的數(shù)據(jù)
可以將收集到的數(shù)據(jù)，通過method對應(yīng)的方式去發(fā)送請求（發(fā)送給action對應(yīng)的接口）
<form action='' method=''>
<input type='submit' name='' id='' value='提交'>
</form>
2.input標簽
單標簽
a.type屬性:決定input標簽的樣式
-text(默認值):對應(yīng)的是文本框
-password:密碼輸入框
-file:文件域林说，文件選擇器
-radio:單選按鈕，1屯伞、單選按鈕中的value值設(shè)置為這個按鈕選擇后提交對應(yīng)的值
2腿箩、多個單選按鈕只能選中一個，那么這些按鈕對應(yīng)的
name值必須一致
3劣摇、一組（name值一樣）單選按鈕提交的時候只提交被選中的按鈕的name值和value值
4珠移、按鈕要默認選擇的時候設(shè)置checked='checked'
checked屬性設(shè)置默認選中
-checkbox:復(fù)選按鈕
1.同一組對應(yīng)的name值一樣
2.value值是選中后對應(yīng)的值
-button:普通按鈕，value值是按鈕上顯示的內(nèi)容
-submit:提交按鈕，自動將當前form標簽中設(shè)置了name屬性的input標簽對應(yīng)的值
通過method對應(yīng)的方式提交給action對應(yīng)的接口钧惧，放在form標簽里面有效
-reset:重置按鈕暇韧，將當前form標簽里面input標簽的值設(shè)置為初始狀態(tài)，放在form標簽里面有效
b.name屬性:區(qū)分不同的input對應(yīng)的值
c.value屬性:input標簽中的值浓瞪，相當于內(nèi)容
d.placeholder屬性:(占位符)input作為文本輸入框的屬性锨咙，輸入框中的提示信息
e.maxlength屬性:約束輸入框能輸入的字符的最大個數(shù)
提交input中的數(shù)據(jù)給服務(wù)器的時候，是以name值=value值來提交的
<form>
<span>賬號:</span>
<input type='text' name='num' />
<span>手機號:</span>
<input type='text' name='phonenum' />
<input type="submit" value='提交' />
</form>
注意:input標簽放在form外邊同樣可以使用追逮，只是不能直接使用重置和提交功能
3.下拉菜單和多行文本域
a.select標簽酪刀，option標簽
一個select標簽對應(yī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'>運城市</option>
<option value='dt'>大同市</option>
</optgroup>
</select>
select分組钮孵，optgroup實現(xiàn)分組骂倘，通過selected屬性設(shè)置默認被選中狀態(tài),默認情況下是第一個被選中
4.按鈕，button標簽
<button>注冊</button>
5.div標簽和span標簽
div標簽和span標簽是空白標簽巴席，沒有語義历涝。一般用來做分組（將網(wǎng)頁分塊）
div默認會換行，span是在一行顯示多個
div:塊級標簽（一行只能放一個標簽）
6.塊級標簽和行內(nèi)標簽
塊級標簽：一個標簽占一行
h1~h6,p,ul,ol,li,dl,dd,table,tr,hr等
行內(nèi)標簽：一行可以放多個行內(nèi)標簽
a,img,input,select,button,textarea等
二漾唉、CSS部分
CSS是web標準中的表現(xiàn)標準荧库，用來規(guī)定網(wǎng)頁上內(nèi)容的樣式（CSS又叫樣式表）
目前廣泛使用的是CSS3
1.怎么來寫樣式表（CSS）,寫在哪兒？
a.內(nèi)聯(lián)樣式表:整個網(wǎng)頁只有這個標簽有這個樣式用內(nèi)聯(lián)樣式
將樣式寫在標簽的style屬性中(每個標簽都有style屬性),內(nèi)部中不需要使用選擇器
<p style="background-color:red;">樣式表</p>
<p style=""></p>
b.內(nèi)部樣式表:將樣式表寫在head標簽中的style標簽中
<style type='text/css'>
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
}
</style>
c.外部樣式表
將樣式表寫在css文件中赵刑，然后再head中通過link標簽導(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.選擇器:選擇器的作用是用來確定后面的樣式到底是給哪個/哪幾個標簽寫的
b.屬性:屬性是css中本來就支持和擁有的屬性，屬性的順序可以隨便寫
屬性和屬性值之間使用冒號連接铐懊，
屬性后面必須寫分號邀桑，不管是不是最后一個
c.屬性值:
(1)數(shù)值:如果數(shù)值是用來表示大小，后面必須跟單位px(像素)或者%(占比,父標簽寬高是確定的才能使用)
px --像素
%---百分比(前提是父標簽對應(yīng)的寬度或者高度是確定的)
(2)顏色:顏色對應(yīng)的英語單詞
加rgb對應(yīng)的16進制值(一個顏色值對應(yīng)兩個十六進制) #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.常用的選擇器
注意壁畸，在標簽中寫的代碼注釋是/注釋內(nèi)容/
1.標簽選擇器（元素選擇器）：將標簽名作為選擇器，同時選中界面中或者網(wǎng)頁中所有同類型的標簽
a{} --選中所有的a標簽
2.id選擇器茅茂，通過#+id屬性值捏萍，就構(gòu)成了id選擇器。選中id等于對應(yīng)的值的標簽
id屬性:所有的標簽都有id屬性
p1{} --選中id值是p1的標簽
3.class選擇器:通過在class屬性值前加.玉吁，就構(gòu)成了類選擇器照弥。選中class等于對應(yīng)值的標簽
.c1{} --選擇所有class值是c1的標簽
4.群組選擇器:多個選擇器職期間使用逗號隔開，選中所有的單獨的選擇器
a,p,#p1,.c1{} --選中所有的a標簽进副，p標簽和所有id值是p1以及所有class值是c1的標簽
5.包含選擇器:多個選擇器之間使用空格隔開。從前往后找，找到最后一個選擇器
div .c1 p{} --選擇div中的class值是c1的標簽中的p標簽
<div>
<div>
<p>hello</p>
</div>
<div class='c1'>
<p>world</p>
<div>
<p>python</p>
</div>
</div>
</div>
6.通配符:直接將作為選擇器:選中當前頁面中所有的標簽
*{}
7.選擇器的優(yōu)先級
通過不同的選擇器選中了同一個標簽影斑，并且設(shè)置了同一個屬性给赞，誰的優(yōu)先級高誰有效。
看誰的優(yōu)先級高矫户，就看誰的權(quán)重值大
權(quán)重值是一樣的情況下片迅，誰后寫，誰的優(yōu)先級高
偽類選擇器:0001
元素選擇器:0001
class選擇器：0010
id選擇器:0100
群組選擇器:直接看單獨的每一個的權(quán)重
包含選擇器:多個選擇器的權(quán)重和
通配符:0001
內(nèi)聯(lián)選擇器1000皆辽、
注意:不管選擇器的權(quán)重有多高柑蛇，內(nèi)聯(lián)演示的優(yōu)先級都是最高的
8.偽類選擇器
前面的元素選擇器，id選擇器驱闷，class選擇器選中的都是標簽
偽類選擇器是選中標簽的某個狀態(tài)
偽類選擇器:選中某個標簽的不同狀態(tài)（一般適用于超鏈接和按鈕等）
1.語法：----標簽:狀態(tài)
標簽選擇器:狀態(tài){}
a.狀態(tài):
-link:初始狀態(tài)
-visited:訪問后的狀態(tài)(適用a標簽后的狀態(tài))
-hover:鼠標懸停在標簽上的時候?qū)?yīng)的狀態(tài)
-active:被激活對應(yīng)的狀態(tài)（一般用于超鏈接）--鼠標按下的時候?qū)?yīng)的狀態(tài)
-focus：成為焦點（適用于輸入框）
input:focus{
outline:none;/*關(guān)閉輸入框輸入的時候的框*/
}
注意：
1.標簽是通過不同的選擇器去選中的都可以
2.愛恨原則:如果想要給一個標簽同時給link\visited\hover\active中的兩個或者
兩個以上的狀態(tài)設(shè)置樣式耻台，必須遵守愛恨原則（LoVeHate）如果不按愛恨原則可能回去問題
如果按照愛恨原則肯定不會出問題
a:link{屬性:屬性值}超鏈接的初始狀態(tài)
b.多行文本域:textarea標簽
<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)標簽（一行可以放多個標簽）
