day21表單標簽

表單標簽（input標簽）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表單</title>
    </head>
    <body>

表單標簽
專門用來收集信息的標簽
1.可以提交表單中收集的信息
action屬性：設(shè)置提交信息的位置
method屬性：提交方式 - post/get

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

input標簽（單標簽） -- text（文本輸入框）
1.是表單標簽
2.type屬性：
text - 普通的文本輸入框
3.name屬性：必須設(shè)置(a.用于提交信息)荷辕，若不設(shè)置當前信息無法提交。
4.value屬性：標簽內(nèi)容
5.placeholder屬性：占位符（在value的值為空和刪除value的值時件豌，顯示的提示信息）
6.maxlength:輸入框最多能輸入的字符個數(shù)
7.readonly:readonly - 輸入框只讀（不能往里面輸入內(nèi)容）

            <input type="text" name="username" value="hello world４健！茧彤！" placeholder="請輸入手機號" maxlength="8"/>

input標簽 - 密碼輸入框
1.type屬性：password --- 輸入的值是密文顯示的

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

input標簽 :單選按鈕
1.type屬性:radio
2.name:同一類型對應(yīng)的name值必須一樣骡显，若不一樣則按鈕可以同時選中
3.value:設(shè)置選中按鈕對應(yīng)的意義
4.checked:設(shè)置為checked，讓按鈕默認處于選中狀態(tài)
<span>空白標簽</span>

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

input標簽:多選按鈕
1.type：checkbox
2.name:同一類型對應(yīng)的name值必須一樣
3.value:設(shè)置選中按鈕提交的值

            <input type="checkbox" name="interest" id="" value="籃球" /><span>籃球</span>
            <input type="checkbox" name="interest" id="" value="乒乓球" /><span>乒乓球</span>
            <input type="checkbox" name="interest" id="" value="看電影" /><span>看電影</span>
            <input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>

input標簽:普通按鈕
disabled:disabled - 讓按鈕不能點擊

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

input標簽:重置按鈕
將當前所在的form的所有表單相關(guān)標簽對應(yīng)的值曾掂，回到最初的狀態(tài)

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

input標簽:
type="file"：文件選擇器

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

        </form>
    </body>
</html>

表單標簽（下拉和多行文本域）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜單和多行文本域</title>
    </head>
    <body>
        <form action="" method="post">
            <fieldset id="">
                <legend>賬號信息</legend>
                <input type="text" name="username" value="hello world１拱！珠洗！" placeholder="請輸入手機號" maxlength="8"/>
                <input type="password" name="password" value="" placeholder="請輸入密碼"/>
                
            </fieldset>

1.下拉菜單

        <select name="city">
            
            <option value="">成都</option>
            <option value="">重慶</option>
            <option value="">北京</option>
            <option value="">大連</option>
            <option value="">青島</option>
            <!--selected="selected"默認選擇-->
            <option value="" selected="selected">上海</option>
        </select>

2.多行文本域（多行文本輸入框）

            <textarea name="message" rows="5" cols="60" placeholder="請輸入意見..."></textarea>

        </form>
    
    </body>
</html>

空白標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

html中的標簽分為兩大類：
1.塊級標簽：一行只能有一個（不管標簽的寬度是多少）
h1-h6
<p></p>
<hr />
列表標簽：
<ol></ol>
<ul></ul>
<dl></dl>
表格標簽<table></table>
表單標簽<form></form>
空白標簽<div></div>

2.行內(nèi)標簽：一行可以有多個
<a></a>
<img>
<input>
下拉列表<select></select>
textarea
空白標簽<span></span>
div標簽溜歪，是空白標簽，沒有任何特殊的意義（無語義標簽）

        <div>
            我是div
        </div>
    </body>
</html>

認識css

1.什么是css
css是web標準中的表現(xiàn)標準许蓖，用來設(shè)置網(wǎng)頁上標簽的樣式（長什么樣蝴猪，在哪兒）
css代碼/css文件调衰，我們叫樣式表

目前我們使用的是css3

2.寫在哪兒
內(nèi)聯(lián)樣式表：將css代碼寫在標簽的style屬性中
內(nèi)部樣式表：寫在head標簽中的style標簽內(nèi)容中
外部樣式表：寫在一個css文件中，通過head中的link標簽來關(guān)聯(lián)

優(yōu)先級：內(nèi)聯(lián)的優(yōu)先級最高自阱，內(nèi)部和外部沒有絕對的優(yōu)先嚎莉，看誰最后執(zhí)行，誰就有效沛豌。

3.怎么寫（css語法）
選擇器{屬性：屬性值趋箩；屬性：屬性值}

選擇器：用來選中需要設(shè)置樣式的標簽（）
屬性：css屬性（css2中的屬性有200多個）
屬性值：如果屬性值是數(shù)字，表示的是大小要在后面加px(不加無效)
注意：每個屬性之間要用分號隔開加派，否則屬性無效

補充屬性：color - 設(shè)置字體顏色
background - 設(shè)置背景顏色
width - 標簽的寬度
height - 標簽的高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <!--關(guān)聯(lián)外部樣式表-->
        <link rel="stylesheet" type="text/css" href="css1.css"/>
        
        <!--style標簽
            專門用來設(shè)置樣式的標簽
        -->
        <style type="text/css">
            div{background-color:yellowgreen ;}
        </style>
        
        
    </head>
    <body>
        <!--style屬性：每個標簽都有-->
        <div style="color: rosybrown;">
            我是div
        </div>
    </body>
</html>

css選擇器

選擇器
0.元素選擇器（標簽選擇器）：標簽名
選中所有的標簽名對應(yīng)的標簽
1.id選擇器：#id屬性值
每個標簽都有一個id屬性叫确，整個html中，id的值必須唯一
2.class選擇器：.class屬性值
每個標簽都有一個class屬性哼丈，可以同時選擇多個
3.通配符：*
選中所有的標簽
4.層級選擇器：選擇器1 選擇器2 ...
5.群組選擇器：選擇器1启妹，選擇器...

補充：
css中的顏色值：
1.顏色的英語單詞
2.十六進制的顏色值0-255 -- 00-ff(#ff0000紅色)
3.rgb值：rgb(紅，綠醉旦，藍) rgba(紅饶米，綠，藍,透明度) - 透明度0-1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                *{
                    font-size: 40px;
                }
                .c1{
                    color:red ;
                    background-color: olive;
                }
                
                a{
                    background-color: yellow;
                }
                
                #a1{
                    
                    /*color:#ff0000;*/
                    /*color: rgb(0,255,0);*/
                    color: rgba(0,0,255,1);
                }
                
                /*層級選擇器*/
                #all_a a{
                    color: pink;
                }
                
                div div a{
                    text-decoration:none;
                }
                /*群組選擇器*/
                /*同時選中所有h1標簽和所有的span標簽*/
                h1,span{
                    background-color:#FFC0CB
                }
                
        </style>
    </head>
    <body>
        <h1>我是標題</h1>
        <span>
            我是span
        </span>
        <div>
            <div id="">
                <a href="">aaa</a>
            </div>
            <div id="all_a">
                <a href="">a1</a>
                <a href="">a2</a>
                <a href="">a3</a>
                <a href="">a4</a>
                <a href="">a5</a>
            </div>
        </div>
        
        <a id="a1" href="">我是a</a>
        
        <a href="">我是a2</a>
        
        <p class="c1">我是p</p>
        
        <div id="" class="c1">
            我是div
        </div>
    </body>
</html>

偽類選擇器

偽類選擇器：選擇器：狀態(tài)
link:超鏈接的初始狀態(tài) --- 一次都沒有訪問成功的時候的狀態(tài)
visited:超鏈接訪問后的狀態(tài) --- 已經(jīng)訪問成功后的狀態(tài)
hover:鼠標懸停在標簽上對應(yīng)的狀態(tài)
active:鼠標按住的狀態(tài)

給同一個標簽通過偽類選擇器給不同狀態(tài)設(shè)置不同樣式的時候车胡，要遵守愛恨原則（先要愛才能恨）
Love HAte(偽類選擇器的優(yōu)先級)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*同時設(shè)置a標簽的所有狀態(tài)*/
            a{
                color: black;
            }
            a:link{
                color: green;
            }
            a:visited{
                color: pink;
            }
            a:hover{
                color: red;
                font-size:50px;
            }
            a:active{
                color: yellow;
            }
            #d1{
                width: 300px;
                height: 100px;
                background-color: green;
            }
            #d1:hover{
                background-color: yellowgreen;
            }
            
        </style>
    </head>
    <body>
        <a >百度一下</a>
        <button id="d1" style="width:100px;height: 50px;">
            
            
        </button>
    </body>
</html>