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

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

這個標(biāo)簽是作為一個容器尊流，來收集和提交這個標(biāo)簽中的其他相關(guān)標(biāo)簽的數(shù)據(jù)灯帮。一般不會單獨使用施流。

action屬性：設(shè)置提交路徑(接口)
method屬性：設(shè)置請求方式(post/get)

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

2 input標(biāo)簽

input標(biāo)簽是單標(biāo)簽
input標(biāo)簽可以單獨使用瞪醋，也可以和form配合使用
type屬性：這個值不一樣银受，input的功能就不一樣

2.1 文本輸入框(type:text) 和密碼輸入框(type: password)

type - text(明文輸入框)
type - password (密文輸入框)

name - 隨便命名，用來對輸入的內(nèi)容進(jìn)行說明渔伯。
提交數(shù)據(jù)的時候以name:value形式進(jìn)行提交,name值會作為發(fā)送請求的參數(shù)名肄程，value就參數(shù)值
value - 指向的就是文本輸入框中的內(nèi)容
placeholder - 占位符(提示信息)
maxlength - 限制輸入框能輸入的最大的字符個數(shù)

<input disabled="disabled" type="text" name="username" value="張三"  placeholder="用戶名" maxlength="8"/>
<input type="text" name="tel" value="15300022703" placeholder="電話號碼"/>
<input type="password" name="password"  value="" placeholder="密碼" maxlength="8"/>

2.2 單選按鈕

type - radio
name - 注意：同一類信息的name需要設(shè)置成一樣的值蓝厌，才能做到拓提，選擇其中一個讓別的取消選中
value - 需要設(shè)置值代态，來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(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" />其他
<br />
<input type="radio" name="marry" id="" value="yes" checked="checked"/>已婚
<input type="radio" name="marry" id="" value="no" />未婚
<br />

2.3 復(fù)選按鈕

type - checkbox
name - 如果是同一類數(shù)據(jù)蹦疑，name值應(yīng)該設(shè)置成別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)

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

2.4 普通按鈕

type - button
value - 設(shè)置按鈕上顯示的文字
disabled - 禁用

<input type="button"  value="點我啊~"  disabled="disabled"/>
<button>點我啊~</button>
<button><img src="img/luffy2.png"/></button>
<br />

2.5 提交按鈕

type - submit
可以自動提交當(dāng)前form標(biāo)簽中的所有設(shè)置了name屬性的標(biāo)簽的值

2.6 重置按鈕

type - reset
可以將當(dāng)前form標(biāo)簽中所有的標(biāo)簽的設(shè)置為初始狀態(tài)的值

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

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

<select name="city">
<option value="成都">成都</option>
<option value="重慶">重慶</option>
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select>

對下拉列表進(jìn)行分組： optgroup
label屬性 - 設(shè)置分組名

<select name="">
<optgroup label="四川省"></optgroup>
<option value="">成都</option>
<option>雅安</option>
<option>德陽</option> <option>綿陽</option>
<option>自貢</option>
<optgroup label="河南省"></optgroup>               <option value="">鄭州</option>
<option>安陽</option>
</select>

2.多行文本域: textarea
輸入的內(nèi)容可以多行顯示
rows - 設(shè)置一屏最多能顯示的行數(shù)
cols - 設(shè)置一行的最大的列數(shù)
內(nèi)容 - 相當(dāng)于value

三豆挽、div和span

div和span標(biāo)簽都是無語義標(biāo)簽，一般用來對網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分塊用的
一個div占一行券盅；多個span可以在一行顯示

<div id="">
            aaa
        </div>
        <div id="">
            bbb
        </div>
        
        <span id="">
            aaaaaaa
        </span>
        <span id="">
            bbbbbbb
        </span>

四帮哈、CSS基礎(chǔ)

<!--
    1.什么是CSS
    CSS就是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門用來對網(wǎng)頁標(biāo)簽進(jìn)行布局和設(shè)置樣式的一門語言锰镀。
    目前一般使用CSS3,CSS又叫樣式表
    
    常用CSS屬性
    color -> 設(shè)置字體顏色
    background-color -> 設(shè)置背景顏色
    width -> 寬度
    height -> 高度
    
    2.CSS基本語法
    結(jié)構(gòu)：
    選擇器{屬性: 屬性值; 屬性2: 屬性值2; 屬性3:屬性名3....}
    
    說明：
    選擇器 - 用來選中/確定需要設(shè)置樣式的標(biāo)簽
    {} - 固定寫法
    屬性 - 必須是CSS提供的屬性娘侍，總共200多個
    屬性值 - 根據(jù)屬性賦不同的值。如果屬性的值是用來表示大小數(shù)字泳炉，后面必須加單位憾筏。例如：px(像素)花鹅、em(空格)
            CSS中的顏色值：a.顏色的英文單詞  b.#顏色值對應(yīng)的6位16進(jìn)制值（#ff00, #00ff00）
                          c.rgb(r,g,b)  rgba(r,g,b,a);r,g,b的取值范圍是0-255氧腰，a表示透明度，取值范圍是0-1
    屬性和屬性值之間用冒號隔開，多個屬性之間用分號隔開古拴；屬性的順序出特殊情況外是任意的
    
    
    3. 在哪兒寫CSS代碼
    內(nèi)聯(lián)樣式：將樣式表寫在標(biāo)簽的style屬性中  --- 樣式只對一個標(biāo)簽有效
    內(nèi)部樣式：將樣式表寫在head中的style標(biāo)簽 --- 樣式只對當(dāng)前html文件中標(biāo)簽有效
    外部樣式：將樣式表寫在外部的css文件中箩帚，然后在head中通過link標(biāo)簽導(dǎo)入 --- 樣式可以作用于所有的html
    
    內(nèi)聯(lián)樣式的優(yōu)先級最高, 內(nèi)部樣式和外部樣式誰后寫，誰的優(yōu)先級高  -- 后寫會的屬性值會覆蓋先寫的
    
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <!--link標(biāo)簽
            link標(biāo)簽 - 導(dǎo)入外部文件
            rel屬性 - 說明導(dǎo)入的文件的功能黄痪，stylesheet(添加樣式表), icon(設(shè)置網(wǎng)頁圖標(biāo))
            type屬性 - 對導(dǎo)入的文件類型進(jìn)行說明: 文件類型/文件后綴
            href屬性 - 導(dǎo)入的文件地址
        -->
        
        <!--設(shè)置網(wǎng)頁圖標(biāo)-->
        <link rel="icon" type="image/ico" href="img/aaa.ico"/>
        
        <!--內(nèi)部樣式-->
        <style type="text/css">
            /*這兒寫的代碼是CSS代碼*/
            p{
                /*設(shè)置文字顏色*/
                color: green;
            }
            
            h1{
                /*設(shè)置背景顏色*/
                background-color: sandybrown;
                /*設(shè)置字體大小*/
                font-size: 20px;   
            }
            
        </style>
        
        <!--導(dǎo)入一個外部樣式-->
        <link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
        
    </head>
    <body>
        <a >百度一下</a>
        <p>我是一個段落</p>
        <h1>我是一個標(biāo)題</h1>
        <p>我是一個段落2</p>
        
        <!--內(nèi)聯(lián)樣式-->
        <div id="" style="height: 100px; background-color: red;">
        </div>
        
    </body>
</html>

五紧帕、CSS選擇器

<!--
    選擇器{屬性1: 屬性值1;....}
    選擇器 - 選中需要添加樣式的標(biāo)簽
    
    常用的選擇器：元素選擇器、id選擇器桅打、class選擇器是嗜、群組選擇器、父子選擇器油额、統(tǒng)配符
    1.元素選擇器: 將標(biāo)簽名作為選擇器，選中指定的標(biāo)簽刻帚。
                 用法：標(biāo)簽名{}
    2.id選擇器: 將標(biāo)簽中的id屬性的值作為選擇器潦嘶，選擇id值對應(yīng)的標(biāo)簽
                用法：#id值{}
                
    3.class選擇器:將標(biāo)簽中的class屬性的值作為選擇器，選中class值對應(yīng)的標(biāo)簽
                用法：.class值{}
    4.群組選擇器: 多個選擇器用逗號隔開作為一個選擇器崇众，同時選中所有選擇器對應(yīng)的標(biāo)簽
                a,p{}  -- 選中所有的a標(biāo)簽和p標(biāo)簽
                .p1, img{} -- 選中所有的img和class值是p1的標(biāo)簽
                #p2,#p3,p{} -- 選中所有id值是p2和p3的標(biāo)簽掂僵，以及所有的p標(biāo)簽
                
    5.父子選擇器：多個選擇器用空格隔開作為一個選擇器，按順序依次往后找顷歌，找到最后一層選擇器對應(yīng)的標(biāo)簽
                div div p{} -- 選中div里面的div里面的p標(biāo)簽
                #d1 a -- 選中id值是d1的標(biāo)簽中的a標(biāo)簽
    6.通配符: 將*作為選擇器锰蓬，選中當(dāng)前網(wǎng)頁中所有的標(biāo)簽
              *{}
    
    
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--內(nèi)部樣式-->
        <style type="text/css">
            /*元素選擇器*/
            p{
                color: darkcyan;
            }
            
            /*id選擇器
             * 選中id值是p3的所有的標(biāo)簽
             */
            #p3{
                background-color: silver;
            }
            
            /*class選擇器
             * 選中class值是p2的所有標(biāo)簽
             */
            .p2{
                background-color: yellow;
            }
            
            /*群組選擇器*/
            .p2, #p3{
                color: red;
            }
            
            /*父子選擇器*/
            div div a{
                font-size: 50px;
            }
            
            *{
                color: black;
            }
            
        </style>
        
    </head>
    <body>
        <div id="">
            <div id="">
                <a id="p3" >百度一下3</a>
            </div>
            <p>我是段落1</p>
            <p>我是段落11</p>
            <a id="p3" >百度一下2</a>
        </div>
        
        <div id="">
            <p class="p2">我是段落2</p>
            <p id="p3">我是段落3</p>
            <p>我是段落4</p>
        </div>
        
        <a id="p3" >百度一下1</a>
        
    </body>
</html>

六、偽類選擇器

<!--
    1.偽類選擇器
    偽類選擇器是選中某個標(biāo)簽的不同的狀態(tài)眯漩∏叟ぃ可以給不同狀態(tài)設(shè)置不同的樣式
    
    a.link
    標(biāo)簽:link{} - 選中初始狀態(tài) (a標(biāo)簽的初始狀態(tài)指的是a對應(yīng)的網(wǎng)址一次都沒有訪問成功的時候?qū)?yīng)的狀態(tài))
    例如：a:link{}; p:link{};  #a1:link{}  .a2:link, #a1:link{}
    
    b.visited: 訪問后的狀態(tài)
    c.hover: 鼠標(biāo)懸停在標(biāo)簽上對應(yīng)的狀態(tài)
    d.active: 鼠標(biāo)按住不放對應(yīng)的狀態(tài)
    
    注意：使用偽類選擇器的時候要遵守愛恨原則（LoVeHAte）,如果不遵守可能會導(dǎo)致某些狀態(tài)的樣式無效
    
    2.選擇器的優(yōu)先級: 權(quán)重值越大，優(yōu)先級越高赦抖。如果權(quán)重值相同舱卡，后寫的優(yōu)先級高
    元素選擇器權(quán)重: 0001 - 1
    class選擇器權(quán)重: 0010 - 2
    id選擇器權(quán)重：0100 - 4
    偽類選擇器權(quán)重：0001 - 1
    群組選擇器權(quán)重：單獨看每個選擇器的權(quán)重  
    父子選擇器權(quán)重：所有選擇器權(quán)重之和
    
    內(nèi)聯(lián)樣式的優(yōu)先級是最高的
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            /*初始狀態(tài)*/
            a:link{
                color: darkgoldenrod;
            }
            /*訪問后的狀態(tài)*/
            a:visited{
                color: seagreen;
            }
            
            /*鼠標(biāo)懸停狀態(tài)*/
            a:hover{
                color: red;
                /*font-size: 30px;*/
            }
            /*鼠標(biāo)按住不放時對應(yīng)的狀態(tài)*/
            a:active{
                color: yellowgreen;
            }
            
            /*2*/
            .p11{
                color: blue;
            }
            
            /*1+4=5*/
            /*div #p1{
                color: deeppink;
            }*/
            
            
            /*4*/
            #p1{
                color: salmon;
            }
            /*4*/
            #p1{
                color: green;
            }
            
            /*1*/
            p{
                color: red;
            }
            
            /*1*/
            a,p{
                color: yellow;
            }
            
            /*1+1=2*/
            div p{
                color: purple;
            }
            
            /*1+4+4=9*/
            body #d1 #p1{
                color: red;
            }
            
            
        </style>
        
    </head>
    <body>
        <div id="d1">
            <p id="p1" class="p11" style="color: black;">我是段落1</p>
        </div>
        <a >第一章</a>
        <a >第二章</a>
        <a >第三章</a>
        
    </body>
</html>