一、表單標(biāo)簽和input標(biāo)簽

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

這個(gè)標(biāo)簽是作為一個(gè)容器，來(lái)收集和提交這個(gè)標(biāo)簽中的其他相關(guān)標(biāo)簽的數(shù)據(jù)。一般不會(huì)單獨(dú)使用。
action屬性：設(shè)置提交路徑（接口）
method屬性：設(shè)置請(qǐng)求方式（post/get）

    <form action="" method="get">

2.input標(biāo)簽

input標(biāo)簽可以單獨(dú)使用，也可以和from一起使用
input標(biāo)簽是單標(biāo)簽
type屬性：這個(gè)值不一樣，input的功能就不一樣

2.1文本輸入框（type：text）

type-text
type-passworld(密文輸入框)
name-隨便命名，用來(lái)對(duì)輸入的內(nèi)容進(jìn)行說(shuō)明。
提交數(shù)據(jù)的時(shí)候以name：value形式進(jìn)行提交，name值會(huì)作為發(fā)送請(qǐng)求的參數(shù)名，value為參數(shù)值。
value-指向的就是文本輸入框中的內(nèi)容
placeholder-占位符（提示信息）
maxlength-限制輸入框中的字符個(gè)數(shù)

<input type="text"  name="username"   id="" value="" 
placeholder="用戶名" maxlength="8"/>
<input type="text" name="tel" id="" value="1231241421" placeholder="電話號(hào)碼" />
<input type="password" name="passworld" id="passworld" value="" 
placeholder="密碼輸入" maxlength="8"   />

2.2單選標(biāo)簽

type="radio"
name-注意：同一類的信息的數(shù)據(jù)需要設(shè)置name值一樣，才能做到，選擇其中一個(gè)讓別的取消選擇
value- 需要設(shè)置的值，來(lái)告訴別人選中按鈕對(duì)應(yīng)的值后者意義
cheched-設(shè)置默認(rèn)選中狀態(tài)

<input type="radio" name="sex" value="boy" checked="checked" />男
<input type="radio" name="sex" value="girl" />女
<input type="radio" name="sex" value="other" />其他

<input type="radio" name="marry" value="yes" />已婚
<input type="radio" name="marry" value="no" />未婚

2.3復(fù)選按鈕

type="chekbok"

<input type="checkbox" name="" id="" value="籃球" />籃球
<input type="checkbox" name="" id="" value="兵乓球" />乒乓球
<input type="checkbox" name="" id="" value="足球"  checked="checked"/>足球
<input type="checkbox" name="" id="" value="羽毛球" />羽毛球
 <input type="checkbox" name="" id="" value="網(wǎng)球" />網(wǎng)球

2.4普通按鈕

type="button"
value-設(shè)置按鈕上顯示的文字
禁用：disabled="disabled" 不能選擇使用

<input type="button" value="點(diǎn)我啊" disabled="disabled" />
<button>點(diǎn)我啊2</button>
 <button<img src="../img/1(KM3PWC(3AXEBAW31~FS)V.png"/></button>

2.5提交按鈕

type-submit
可以自動(dòng)提交當(dāng)前form標(biāo)簽中

2.6重置按鈕

type="reset"
格式<input type="reset" value"重置"/>
value是重置標(biāo)識(shí)

<input type="reset"  value="重置"/>
<input type="submit" name="" id="" value="提交" />
 <input type="time" name="時(shí)間" id="" value="時(shí)間1" />
 <input type="file" name="文件2" id="" value="文件1" />

二、下拉菜單和多行文本域

下拉菜單：select-option
name-提交的時(shí)候用來(lái)區(qū)分不同的數(shù)據(jù)
value-提交的時(shí)候提交具體的數(shù)據(jù)
內(nèi)容-顯示的部分(只能是文字)
selected-設(shè)置默認(rèn)選中
optgroup 設(shè)置下拉的分類，不能選擇

<select name="city">
<option value="成都" selected="selected">成都</option>
<option value="重慶">重慶</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="武漢">武漢</option>          
</select>
<select name="">
<optgroup label="四川省"></optgroup>
<option value="成都">成都</option>
<option value="德陽(yáng)">德陽(yáng)</option>
<option value="瀘州">瀘州</option>
<optgroup label="湖南省"></optgroup>
<option value="長(zhǎng)沙">長(zhǎng)沙</option>
<option value="岳陽(yáng)">岳陽(yáng)</option>
</select>

2.多行文本域：textarea
輸入的內(nèi)容可以顯示多行
rows-設(shè)置一屏最多能顯示多少行
col-控制一行最多的列數(shù)

<textarea name="" rows="10" cols="30"  maxlength="300" 
placeholder="請(qǐng)輸入..." >我的夢(mèng)想</textarea

三、div標(biāo)簽和span

div和span標(biāo)簽都是無(wú)語(yǔ)義標(biāo)簽，一般用來(lái)對(duì)網(wǎng)頁(yè)中的標(biāo)簽進(jìn)行分組和分類用

<div id="">
        <p id="2">你不是真正的<span style="font-size: 30px;">快樂(lè)</span></p>
</div>

四、CSS基礎(chǔ)

1.CSS就是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門用來(lái)對(duì)網(wǎng)頁(yè)標(biāo)簽進(jìn)行布局和設(shè)置樣式的一門語(yǔ)言。

目前一般使用CSS3，CSS又叫樣式表
常見(jiàn)的CSS屬性：
color->設(shè)置字體顏色
background--color->背景顏色
width->寬度
height->高度

2.CSS基本語(yǔ)法

結(jié)構(gòu)：
選擇器{屬性：屬性值；屬性2：屬性值2；屬性3：屬性值3...}
說(shuō)明：
選擇器-用來(lái)選中/確定需要設(shè)置樣式的標(biāo)簽
{}-固定寫法
屬性-必須是CSS提供的屬性，總共200多個(gè)
屬性值-根據(jù)屬性賦不同的值，如果屬性的值是用來(lái)表示大小數(shù)字，后面必須加單位。
列如：px（像素）、em（空格）

CSS中的顏色值：
a.顏色的英文單詞
b.顏色值對(duì)應(yīng)的6位16進(jìn)制值（#ff00,#00ff00)
c.rgb(r,g,b) rgba(r,g,b,);r,g,b的取值范圍是0-255，a表示透明度，取值范圍是0-1
屬性和屬性值之間用冒號(hào)隔開(kāi)，多個(gè)屬性之間用分號(hào)隔開(kāi)；屬性的順序除特殊情況外是任意的

3.在哪兒寫CSS代碼

內(nèi)聯(lián)樣式:將樣式寫在標(biāo)簽的style屬性中 ---只能對(duì)一個(gè)標(biāo)簽有效
內(nèi)部樣式：將樣式表寫在head中的style標(biāo)簽---只能作用于當(dāng)前html有效
外部樣式:將樣式寫在外部的css文件中，然后在head中通過(guò)link標(biāo)簽導(dǎo)入---可以作用于所有的html文件

內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高，內(nèi)部樣式和外部樣式誰(shuí)后寫，誰(shuí)的優(yōu)先級(jí)高---實(shí)質(zhì)寫在后面的屬性會(huì)覆蓋前面的屬性的值
各樣式格式與寫入的位置：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--導(dǎo)入外部樣式
            link標(biāo)簽-導(dǎo)入外部文件
            rel屬性-說(shuō)明導(dǎo)入的文件的功能，stylesheet（添加樣式表），icon（設(shè)置網(wǎng)頁(yè)圖標(biāo)）
            type屬性-對(duì)導(dǎo)入的文件類型進(jìn)行說(shuō)明：文件類型/文件后綴
            href屬性-導(dǎo)入文件的地址
        -->
         <link rel="stylesheet" type="text/css" href="CSS基礎(chǔ).css"/>

        <!--內(nèi)部樣式-->
        <style type="text/css">
            /*這兒寫的代碼是CSS代碼*/
            p{
                color: green;
            }
            h1{
                /*設(shè)置字體大小*/
                font-size: 20;
                /*設(shè)置背景顏色*/
                background: lawngreen;
            }
        </style>
    </head>
    <body>
        <p">我是第一個(gè)段落</p>
        <p>我是第二個(gè)段落</p>
        <h1>我是標(biāo)題</h1>
        <p style="background: #000000;">這是內(nèi)聯(lián)樣式</p>
        </div>
    </body>
</html>

四、CSS選擇器

什么是選擇器

選擇器{屬性1：屬性值1；...}
選擇器-選中需要添加樣式的標(biāo)簽
常見(jiàn)的選擇器：元素選擇器、id選擇器、class選擇器、群組選擇器、父子選擇器

1.元素選擇器：將標(biāo)簽名作為選擇器，選中指定的標(biāo)簽。
用法：標(biāo)簽名{}
2.id選擇器：將標(biāo)簽中的id屬性的值作為選擇器，選擇id值對(duì)應(yīng)的標(biāo)簽
用法：#id值{}
3.class選擇器：將標(biāo)簽中的class屬性的值作為選擇器，選中class值對(duì)應(yīng)的標(biāo)簽
用法：.class值{}
4.群組選擇器：多個(gè)選擇器用逗號(hào)隔開(kāi)作為一個(gè)選擇器，同時(shí)選中所有選擇器對(duì)應(yīng)的標(biāo)簽
a,p{}--選中所有的a標(biāo)簽和p標(biāo)簽
.p1,img--選中所有class值為p1的標(biāo)簽和img標(biāo)簽
.p2,#p3,.p4--選中所有的id值是p3，class是p4h和p4的標(biāo)簽
5.父子選擇器：多個(gè)選擇器用空格隔開(kāi)作為一個(gè)選擇器，按順序依次往后找，找到最后一層選擇器對(duì)應(yīng)的標(biāo)簽
div div p{}選中div里的div里的p標(biāo)簽

六、偽類選擇器

偽類選擇器是選中某個(gè)標(biāo)簽的不同的狀態(tài)，可以給不同狀態(tài)設(shè)置不同的樣式

1.link
標(biāo)簽：link{}-選中初始狀態(tài) (a標(biāo)簽的初始狀態(tài)指的是a對(duì)應(yīng)的網(wǎng)址一次都沒(méi)有訪問(wèn)成功的時(shí)候?qū)?yīng)的狀態(tài))
列如：a:link{};p:link{};.a2:link{}
2.visited：訪問(wèn)后的狀態(tài)
3.hover:鼠標(biāo)放在a標(biāo)簽上面的狀態(tài)
4.active：鼠標(biāo)按住不放時(shí)對(duì)應(yīng)的狀態(tài)

注意：使用偽類選擇器的時(shí)候要遵守愛(ài)恨原則（lovehate),如果不遵守可能會(huì)導(dǎo)致某些狀態(tài)的樣式無(wú)效

選擇器的優(yōu)先級(jí)：權(quán)重值越大，優(yōu)先級(jí)越高

元素選擇器的權(quán)重值：0001--1
class選擇器權(quán)重：0010--2
id選擇器權(quán)重：0100--4
偽類選擇器權(quán)重：0001--1
群組選擇器的權(quán)重：?jiǎn)为?dú)看每個(gè)選擇器的權(quán)重
父子選擇器權(quán)重值：所有的選擇器的權(quán)重值之和
如果權(quán)重值相同，后寫的優(yōu)先級(jí)高于先寫的
內(nèi)聯(lián)樣式的優(yōu)先級(jí)是最高的，不用管權(quán)重值，內(nèi)聯(lián)樣式優(yōu)先級(jí)大于內(nèi)部樣式