1 表單標(biāo)簽和input標(biāo)簽

1.1 表單標(biāo)簽

表單標(biāo)簽：form標(biāo)簽茫打，<form></form>
表單標(biāo)簽是用來收集用戶信息的纯趋，是一個(gè)容器古徒，用來獲取這個(gè)標(biāo)簽中相應(yīng)的其他標(biāo)簽(input標(biāo)簽)的數(shù)據(jù)〉认蓿可以將收集到的數(shù)據(jù)有巧，通過method對(duì)應(yīng)的方式释漆，去發(fā)送請(qǐng)求(發(fā)送給action對(duì)應(yīng)的接口)。

1.2 input標(biāo)簽

input標(biāo)簽：?jiǎn)螛?biāo)簽篮迎，<input />
a.type屬性：決定input標(biāo)簽的樣式
text(默認(rèn))：文本輸入框
password：密碼輸入框
radio：?jiǎn)芜x按鈕
注意：input標(biāo)簽放在form外面同樣可以使用男图，只是不能直接使用重置和提交功能

1.2.1 Type屬性

• 1.文本輸入框：(text)
  a.name屬性：區(qū)分不同的input對(duì)應(yīng)的值，對(duì)標(biāo)簽的顯示沒有影響
  b.value屬性：input標(biāo)簽中的值甜橱，相當(dāng)于內(nèi)容(文本輸入框中輸入的內(nèi)容就是value的值)逊笆，提交input中的數(shù)據(jù)給服務(wù)器的時(shí)候，是以name值=value值來提交的
  c.placeholder屬性：占位符(輸入框的提示信息)
  d.maxlength屬性：約束輸入框能輸入的字符的最大個(gè)數(shù)
  使用方法為：

<input type="text" name="username" value="" placeholder="賬號(hào)" maxlength="16"/>

• 2.密碼輸入框：password
  注意：value值是輸入框中輸入的內(nèi)容
  使用方法為：

<input type="password" name="password" id="password" value="" placeholder="密碼" />

• 3.單選按鈕：radio
  a.value值：按鈕是否選中
  b.name值：如果多個(gè)按鈕只能選中一個(gè)岂傲，那么這些按鈕對(duì)應(yīng)name值必須
  c.一組(name值一樣)單選按鈕在提交的時(shí)候只提交被選中的按鈕的name和value值
  使用方法為：

<input type="radio" name="sex" id="" value="boy" checked="checked" /><span>男</span>
<input type="radio" name="sex" id="" value="girl" /><span>女</span>

• 4.復(fù)選按鈕：checkbox
  a.name值：同一組值一樣
  使用方法為：

<input type="checkbox" name="hobby" id="" value="籃球" /><span>籃球</span>
<input type="checkbox" name="hobby" id="" value="乒乓球" /><span>乒乓球</span>
<input type="checkbox" name="hobby" id="" value="羽毛球" /><span>羽毛球</span>
<input type="checkbox" name="hobby" id="" value="排球" /><span>排球</span>

• 5.普通按鈕：button
  value值：按鈕上顯示的值
  使用方法為：

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

• 6.提交按鈕：submit
  自動(dòng)將當(dāng)前form標(biāo)簽中設(shè)置了name屬性的input標(biāo)簽對(duì)應(yīng)的值通過method方式提交給action對(duì)應(yīng)的接口
  使用方法為：

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

• 7.重置按鈕：reset
  讓當(dāng)前form標(biāo)簽中的input標(biāo)簽的值回到初始狀態(tài)
  使用方法為：

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

• 8.文件域：file
  使用方法為：

<input type="file" name="icon" id="" value="選擇文件" />

2 下拉难裆、多行文本、按鈕

2.1 下拉

• 下拉菜單：select標(biāo)簽
  一個(gè)select標(biāo)簽對(duì)應(yīng)一個(gè)下拉菜單镊掖，菜單中的選項(xiàng)要通過option來列舉乃戈。
  a.selected屬性：設(shè)置默認(rèn)被選中的選項(xiàng)
  使用方法為：

<select name="">
    <option value="成都">成都</option>
    <option value="北京" selected="selected">北京</option>
    <option value="重慶">重慶</option>
    <option value="沈陽">沈陽</option>
</select>

• 對(duì)下拉菜單進(jìn)行分組
  可以通過optgroup標(biāo)簽對(duì)下拉菜單進(jìn)行分組，通過label屬性對(duì)分組進(jìn)行命名亩进。
  使用方法為：

<select name="city">
    <optgroup label="四川省">
        <option value="成都">成都</option>
        <option value="綿陽">綿陽</option>
        <option value="峨眉山">峨眉山</option>
    </optgroup>
    <optgroup label="廣東省">
        <option value="廣州">廣州</option>
        <option value="深圳" selected="selected">深圳</option>
        <option value="中山">中山</option>
        <option value="佛山">佛山</option>
    </optgroup>
</select>

2.2 多行文本

• 多行文本域：textarea標(biāo)簽
  name：提交的數(shù)據(jù)對(duì)應(yīng)的名字
  rows：默認(rèn)一屏的行數(shù)
  cols：默認(rèn)的列數(shù)
  placeholder：占位符
  disable：禁用
  maxlength：約束能輸入的最大的字符個(gè)數(shù)
  使用方法為：

<textarea name="message" rows="10" cols="20" placeholder="消息" maxlength="16"></textarea>

2.3 按鈕

使用button標(biāo)簽

• 文字按鈕
  使用方法為：

<button>注冊(cè)</button><br />

• 圖片按鈕
  使用方法為：

<button><img src="img/lufei.jpg"/></button>

3 div和span標(biāo)簽

• div和span
  div標(biāo)簽和span標(biāo)簽是空白標(biāo)簽症虑，沒有語義。
  一般用來做分組(將網(wǎng)頁分塊)
  div：塊級(jí)標(biāo)簽(一行只能放一個(gè)標(biāo)簽)
  span：行內(nèi)標(biāo)簽(一行可以放多個(gè)標(biāo)簽)

• 塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽
  塊級(jí)標(biāo)簽：一個(gè) 標(biāo)簽占一行镐侯，如：h1-h6標(biāo)簽侦讨，p標(biāo)簽
  行內(nèi)標(biāo)簽：一行可以放多個(gè)行內(nèi)標(biāo)簽

4 CSS基礎(chǔ)

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)樣式表：
將樣式寫在標(biāo)簽的style屬性中(每個(gè)標(biāo)簽都有style屬性)
示例如下：

<!--內(nèi)聯(lián)樣式表-->
<p style="background-color: cornflowerblue; color: yellow;">
    樣式表的內(nèi)容
</p>

b.內(nèi)部樣式表
將樣式表寫在head標(biāo)簽中的style標(biāo)簽里面
示例如下：

<!--內(nèi)部樣式表-->
<style type="text/css">
    h1{
        background-color: skyblue;
        color: crimson;
    }
    a{
        font-size: 20px;
    }
</style>

c.外部樣式表
將樣式表寫在一個(gè)CSS文件中，然后再在head標(biāo)簽中通過link標(biāo)簽來導(dǎo)入需忿。
示例如下：

<!--外部樣式表-->
        <link rel="stylesheet" type="text/css" href="css/04-CSS.css"/>

注意：不管在什么情況下诅炉，內(nèi)聯(lián)樣式表的優(yōu)先級(jí)最高。內(nèi)部和外部的優(yōu)先級(jí)看誰后寫屋厘，誰的優(yōu)先級(jí)高

2.固定語法
選擇器(屬性1：屬性值1涕烧；屬性2：屬性值2...)
說明：
a.選擇器：選擇器的作用是用來確定后面的樣式到底是給哪個(gè)/哪幾個(gè)標(biāo)簽寫的
b.屬性：屬性是CSS中本來就支持和擁有的屬性，屬性的順序可以隨意寫汗洒；屬性和屬性值之間使用冒號(hào)連接议纯；屬性后面必須寫分號(hào)。
c.屬性值：
(1)數(shù)值：如果數(shù)值是用來表示大小溢谤，后面必須跟單位px或者%
　　　　px -- 像素 　　　　% -- 百分比(前提是父類對(duì)應(yīng)的寬度或者高度是確定的)
(2)顏色：
a.顏色對(duì)應(yīng)的英語單詞
b.#加RGB對(duì)應(yīng)的16進(jìn)制值(一個(gè)顏色值對(duì)應(yīng)兩位十六進(jìn)制)
c.直接用RGB值：rgb(R,G,B)瞻凤，rgba(R,G,B,A) R,G,B的范圍是0-255憨攒，Alpha：0-1

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

5 選擇器

常用的選擇器
一、選擇器
1.標(biāo)簽/元素選擇器：將標(biāo)簽名作為選擇器阀参，同時(shí)選中網(wǎng)頁中所有同類型的標(biāo)簽
a{} -- 選中所有的A標(biāo)簽

2.id選擇器：通過在id屬性值前加#肝集，就構(gòu)成了id選擇器。選中id等于對(duì)應(yīng)的值的標(biāo)簽
id屬性：所有標(biāo)簽都有id屬性蛛壳，并且設(shè)置的值必須唯一
#p1{} -- 選中id值是p1的標(biāo)簽

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

4.群組選擇器：多個(gè)選擇器中間使用逗號(hào)隔開炕吸。選中所有的單獨(dú)的選擇器
a,p,#p1,.c1{} -- 選中所有的a標(biāo)簽伐憾，p標(biāo)簽和所有id值是p1以及所有class值是c1的標(biāo)簽

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

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

二、選擇器的優(yōu)先級(jí)
通過不同的選擇器選中了同一個(gè)標(biāo)簽瀑罗，并且設(shè)置了同一個(gè)屬性胸嘴，誰的優(yōu)先級(jí)高就誰有效。
看誰的優(yōu)先級(jí)高就看誰的權(quán)重值大斩祭，權(quán)重值一樣的情況下劣像，后寫的優(yōu)先級(jí)高
偽類選擇器：0001
元素選擇器：0001
class選擇器：0010
id選擇器：0100
群組選擇器：直接看單獨(dú)每一個(gè)的權(quán)重
包含選擇器：多個(gè)選擇器的權(quán)重和
通配符：0001

注意：不管選擇器的權(quán)重有多高，內(nèi)聯(lián)樣式的優(yōu)先級(jí)都是最高的摧玫！

6 偽類選擇器

前面的元素選擇器耳奕、id選擇器、class選擇器選中的都是標(biāo)簽诬像。
偽類選擇器是選中標(biāo)簽的某個(gè)狀態(tài)

偽類選擇器：選中某個(gè)標(biāo)簽的不同狀態(tài)(一般適用于超鏈接和按鈕等)
1.語法：--- 標(biāo)簽：狀態(tài)
標(biāo)簽：狀態(tài){}
說明：
a.狀態(tài)：
link：初始狀態(tài)(a標(biāo)簽對(duì)應(yīng)的初始狀態(tài)是沒有訪問成功過對(duì)應(yīng)的狀態(tài))
visited：訪問后的狀態(tài)(使用a標(biāo)簽)
hover：鼠標(biāo)懸停在標(biāo)簽上的時(shí)候
active：被激活對(duì)應(yīng)的狀態(tài)(一般用于超鏈接)---鼠標(biāo)按下的時(shí)候?qū)?yīng)的狀態(tài)
focus：成為焦點(diǎn)(在輸入框中用的比較多)
b.標(biāo)簽：可以通過不同的選擇器去選中

2.愛恨原則：LoVeHAte - 先愛后恨
如果想要給一個(gè)標(biāo)簽同時(shí)給link/visited/hover/active中的兩個(gè)或者兩個(gè)以上的狀態(tài)
設(shè)置樣式屋群，必須遵守愛恨原則(如果不按照愛恨原則可能會(huì)出問題)