一、表單標(biāo)簽

一般用來做用戶收集，單獨(dú)使用沒意義，一般是結(jié)合相關(guān)標(biāo)簽使用(input，select,textarea)
表單標(biāo)簽可以對(duì)包含在這個(gè)標(biāo)簽中的其他標(biāo)簽做信息的提交和重置
action - 提交位置（接口相關(guān)）
method - 請求方式（get和post)

<form action="" method="post">
    
</form>

2.input標(biāo)簽:單標(biāo)簽
1）type屬性：決定輸入框的樣式
text(默認(rèn)) - 普通的文本輸入框
2）name屬性：主要用來區(qū)分?jǐn)?shù)據(jù)，提交的時(shí)候是以name值=value的形式提交
3）value屬性：單標(biāo)簽中的value 相當(dāng)于雙標(biāo)簽中的內(nèi)容，但是value只能是文本；
設(shè)置value屬性其實(shí)就是設(shè)置輸入框默認(rèn)顯示的內(nèi)容；
修改內(nèi)容其實(shí)是在修改value值
placeholder - 占位符（提示信息）
maxlenth - 輸入框中最多輸入的字符個(gè)數(shù)

<form action="" method="get">
<!--普通輸入文本-->
<input maxlength="10" placeholder="請輸入電話號(hào)碼" type="text" name="tel" id="" value="123456" />
<input type="" name="email" id="" value="" />

b.password:密碼輸入框

placeholder - 占位符
maxlenth - 最多能輸入的字符個(gè)數(shù)

<input maxlength="8" placeholder="請輸入密碼" type="password" name="密碼" id="" value="123456" />

c.radio - 單選按鈕

name - 同一組數(shù)據(jù)對(duì)應(yīng)的name值設(shè)置成一樣的，才能做到單選
value - 這里只是用于數(shù)據(jù)提交，不能顯示
checked - 設(shè)置為checked讓按鈕處于默認(rèn)選中狀態(tài)

<input type="radio" name="sex" id="" value="男生" checked="checked"/><font>男</font>
<input type="radio" name="sex" id="" value="女生" /><font>女</font>

讓文字和按鈕關(guān)聯(lián)

文字用label標(biāo)簽顯示，設(shè)置for屬性的值為想要關(guān)聯(lián)的按鈕的id的值
這樣點(diǎn)擊文字和點(diǎn)擊按鈕的效果一樣

<input type="radio" name="m" id="m1" value="" /><label for="m1">已婚</label>
<input type="radio" name="m" id="m2" value="" /><label for="m2">未婚</label>
<input type="radio" name="m" id="m3" value="" /><label for="m3">保密</label>

d.checkbox:復(fù)選按鈕

name - 同一組數(shù)據(jù)的name要一樣
value - 這里只是用于數(shù)據(jù)提交，不能顯示

<input checked="checked" type="checkbox" name="instr" id="" value="教育" /><font>教育</font>
<input type="checkbox" name="instr" id="" value="教育" /><font>教育</font>
<input type="checkbox" name="instr" id="" value="食品" /><font>食品</font>

e.button:普通按鈕

value - value對(duì)應(yīng)的值會(huì)顯示在按鈕上
一般內(nèi)容是文本

<input type="button" name="" id="" value="登錄" />

f.submit:提交按鈕

這個(gè)按鈕的點(diǎn)擊事件是將當(dāng)前的form標(biāo)簽中，設(shè)置了name
屬性相關(guān)的標(biāo)簽的數(shù)據(jù)以name=value的形式提交

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

g.reset:重置

這個(gè)按鈕的點(diǎn)擊事件是將當(dāng)前所在的form標(biāo)簽中，
所有的標(biāo)簽設(shè)置為初始狀態(tài)

<input type="reset" name="" id="" value="重置" />

2.button標(biāo)簽

除了文本還可以是其他圖片等

<button><img src="img/0001.jpg" width="100" height="100"/></button>

二、下拉列表

1.下拉列表（菜單）
select標(biāo)簽 - 代表整個(gè)下拉列表
option標(biāo)簽 - 代表列表中每個(gè)選項(xiàng)
通過設(shè)置select屬性的值為selected,來讓這個(gè)選項(xiàng)默認(rèn)選中
optgroup - 設(shè)置label的值來對(duì)當(dāng)前下拉菜單的內(nèi)容進(jìn)行分組

        <select name="省">
            <optgroup label="省"></optgroup>
            <option value="四川省">四川省</option>
            <option value="云南省">云南省</option>
            <option value="吉林省">吉林省</option>
            <option selected="selected" value="遼寧省">遼寧省</option>
            <option value="黑龍江省">黑龍江省</option>
            <optgroup label="直轄市"></optgroup>
            <option value="北京">北京</option>
        </select>
        <select name="市">
            <option value="">成都市</option>
            <option value="">綿陽</option>
            <option value="">達(dá)州</option>
        </select>

三、多行文本域

textarea標(biāo)簽 - 輸入框，可以同時(shí)顯示多行內(nèi)容
（可以自動(dòng)換行和上下滾動(dòng)）
name屬性 - 區(qū)分和提交
rows - 行數(shù)（不滾動(dòng)最多能顯示的行數(shù)，影響輸入框的寬度）
cols - 列數(shù)（一行顯示的文字的數(shù)量，影響輸入框的寬度）
placeholder - 占位符
maxlength - 限制最多輸入的文字個(gè)數(shù)

<textarea placeholder="請輸入你的問題" name="message" rows="4" cols="20">默認(rèn)文字</textarea>

四、無語義標(biāo)簽

div和span都是無語義標(biāo)簽
div是一個(gè)占一行
網(wǎng)頁中分組分塊，都可以使用div作為容器
span一行可以有多個(gè)

html中標(biāo)簽分類：行內(nèi)標(biāo)簽和塊級(jí)標(biāo)簽
塊級(jí)標(biāo)簽：一個(gè)占一行，例如：div、h1、p、列表、table、tr、form、option
行內(nèi)標(biāo)簽：一行顯示多個(gè),例如：span、font、td、input、select、textarea

五、css基礎(chǔ)

1.什么是css(層疊樣式表，簡稱樣式表)

css是web中的表現(xiàn)標(biāo)準(zhǔn)，主要用來設(shè)置網(wǎng)頁中的內(nèi)容的布局和樣式

2.怎么寫css（基本語法）

a.語法
選擇器{屬性名1：屬性值1；屬性名2：屬性值2；...}
b.說明
選擇器 - 選中想要設(shè)置樣式的標(biāo)簽
{} - 固定寫法
屬性 - 屬性名和屬性值用冒號(hào)連接，多個(gè)屬性之間用分號(hào)隔開（如果沒有分號(hào)，會(huì)導(dǎo)致后面的樣式無效）
屬性名必須是css提供的屬性（大概兩百多個(gè)）
屬性值：表示大小的數(shù)值必須加單位，px - 像素 em - 空格數(shù)
也可以使用百分比（相對(duì)于父標(biāo)簽）

c.常用屬性

color - 字體顏色
background-color - 背景顏色
font-size - 字體大小
width - 寬度
height - 高度

3.css寫在哪兒

a.內(nèi)聯(lián)樣式表:將樣式表寫在標(biāo)簽的style屬性中；這個(gè)樣式表無需寫‘選擇器{}’，直接給屬性賦值

b.內(nèi)部樣式表:將樣式表寫在style標(biāo)簽中（這個(gè)標(biāo)簽可以放在head中，也可以放在body中）

c.外部樣式表：將樣式表寫在一個(gè)css文件中，然后在head中通過link導(dǎo)入

內(nèi)聯(lián)樣式表不管什么情況，優(yōu)先級(jí)最高
外部和內(nèi)部樣式表優(yōu)先級(jí)一樣，誰后寫，認(rèn)可誰

4.css中的值

顏色：顏色的英文單詞，還可以是16進(jìn)制的顏色值;rgb（紅綠藍(lán)的十進(jìn)制數(shù)0-255）
rgba(紅，綠，藍(lán)，透明度) - 透明度0-1 0為完全透明

六、選擇器

選擇器（選中標(biāo)簽）

1.元素選擇器（標(biāo)簽選擇器）

直接將標(biāo)簽名作為選擇器，選中所有指定標(biāo)簽
例如：div{}, p{}

2.id選擇器

將標(biāo)簽的id屬性值前面加#號(hào)，作為選擇器，選中id屬性值是制動(dòng)的值的標(biāo)簽
注意：一個(gè)頁面中id值唯一（不同標(biāo)簽的id值不一樣）
例如：#p2{}

3.class選擇器（類選擇器）

將標(biāo)簽的class屬性值前加.作為選擇器，選中所有class屬性值是指定值的標(biāo)簽
例如：.c1{}

4.*(通配符)

直接將*號(hào)作為選擇器，選中當(dāng)前頁面中所有的標(biāo)簽
例如：{}

5.群組選擇器

將多個(gè)選擇器用逗號(hào)隔開，作為一個(gè)選擇器，選中每個(gè)單獨(dú)的選擇器選中的所有標(biāo)簽
例如：a,p{} - 選中所有的a標(biāo)簽和p標(biāo)簽
#p1,div{} - 選中id是p1的標(biāo)簽和所有的div標(biāo)簽
.c1,#p1,a{} - 選中所有class值是c1,id值是p1的標(biāo)簽和所有a標(biāo)簽

6.層級(jí)選擇器（后代選擇器）

將多個(gè)選擇器用空格隔開作為一個(gè)選擇器，將層級(jí)選中最后一個(gè)選擇器選中的標(biāo)簽
例如：div .c1 - 選中所有在div標(biāo)簽中，class是c1的標(biāo)簽
.c1 .c2 #d1{} - 選中class是c1中class是c2中的id是d1的標(biāo)簽

7.選擇器的權(quán)重值

權(quán)重值不同：權(quán)重值越大，優(yōu)先級(jí)越高
權(quán)重值相同：誰寫在后面，認(rèn)可誰
注意：不管什么情況，內(nèi)聯(lián)樣式優(yōu)先級(jí)最高
元素選擇器：0001（1）
通配符：0001（1）
class選擇器：0010（2）
id選擇器：0100（4）

群組選擇器：分開看每一個(gè)選擇器的權(quán)重
后代選擇器：用空格分開的所有的選擇器權(quán)重之和

七、偽類選擇器

普通選擇器和偽類選擇器的區(qū)別
普通選擇器：選中某一個(gè)標(biāo)簽
偽類選擇器：選中標(biāo)簽?zāi)撤N狀態(tài)
1.語法：
普通選擇器：狀態(tài){}

2.常見狀態(tài)
a.link：
初始狀態(tài)（對(duì)a標(biāo)簽來說，初始狀態(tài)指的是標(biāo)簽對(duì)應(yīng)的地址從來沒有成功訪問過）
b.visited
訪問后的狀態(tài)（一般針對(duì)于a標(biāo)簽有用）
c.hover
鼠標(biāo)懸停在標(biāo)簽上的時(shí)候?qū)?yīng)的狀態(tài)
d.active
鼠標(biāo)按住標(biāo)簽不放時(shí)對(duì)應(yīng)的狀態(tài)
注意：
1.狀態(tài)前不是只能寫元素選擇器，更不是只能寫a標(biāo)簽
2.遵守'愛恨原則',LoVeHAte