(22)day2-表單和css基礎(chǔ)

2.1 細線表格

細線表格

1.不設(shè)置boder鹃祖，設(shè)置cellspacing為1
2.設(shè)置整個表格背景色為表格線顏色雷猪，然后再設(shè)置每個單元格背景色和整個表格不一樣湖员。

或者：(css)
style="border-collapse: collapse;"
在table屬性中添加以上屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>簡歷表格</title>
    </head>
    <body>
        <!--細線表格
            1.不設(shè)置boder智哀，設(shè)置cellspacing為1
            2.設(shè)置整個表格背景色為表格線顏色留美，然后再設(shè)置每個單元格背景色和整個表格不一樣。
            或者：
            style="border-collapse: collapse;"
            在table屬性中添加以上屬性
        -->
        <table border="0" cellspacing="1" cellpadding="5" 
            height="220" bgcolor="black">
            <tr bgcolor="white">
                <td width="50">11</td>
                <td width="100">12</td>
                <td width="50">13</td>
                <td colspan="2" width="100">14</td>
                <td rowspan="5" width="120">15</td>
            </tr >
            <tr bgcolor="white">
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td colspan="2">24</td>
            </tr>
            <tr bgcolor="white">
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td colspan="2">34</td>
            </tr>
            <tr bgcolor="white">
                <td>41</td>
                <td>42</td>
                <td>43</td>
                <td colspan="2">44</td>
            </tr>
            <tr bgcolor="white">
                <td>51</td>
                <td>52</td>
                <td>53</td>
                <td colspan="2">54</td>
            </tr>
            <tr bgcolor="white">
                <td>61</td>
                <td>62</td>
                <td>63</td>
                <td colspan="3">64</td>
            </tr>
            <tr bgcolor="white">
                <td rowspan="2">71</td>
                <td>72</td>
                <td colspan="2">73</td>
                <td colspan="2">74</td>
            </tr>
            <tr bgcolor="white">
                <td>81</td>
                <td colspan="2">82</td>
                <td colspan="2">83</td>
            </tr>
            <tr bgcolor="white">
                <td>91</td>
                <td colspan="5">92</td>
            </tr>
            <tr height="60" bgcolor="white">
                <td >101</td>
                <td colspan="5">102</td>
            </tr>
            <tr height="40" bgcolor="white">
                <td>111</td>
                <td colspan="5">112</td>
            </tr>
            <tr height="80" bgcolor="white">
                <td>121</td>
                <td colspan="5">122</td>
            </tr>
            <tr bgcolor="white">
                <td>131</td>
                <td colspan="5">132</td>
            </tr>
            <tr bgcolor="white">
                <td>141</td>
                <td colspan="5">142</td>
            </tr>
            <tr bgcolor="white">
                <td>151</td>
                <td colspan="5">152</td>
            </tr>
            <tr bgcolor="white">
                <td>161</td>
                <td colspan="5">162</td>
            </tr>
        </table>
    </body>
</html>

2.2 表單標簽和input標簽

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

1.表單標簽（form）

表單標簽的作用：用于收集用戶信息奏司，實質(zhì)是將表單標簽作為容器來收集表單標簽中其它標簽的信息乔询。它自身無任何顯示效果。

action屬性：設(shè)置提交地址
method屬性：設(shè)置提交方式（post/get）

點提交按鈕提交的時候韵洋，將表單中所有相關(guān)標簽以name-value的形式哥谷，按method屬性提供的方式，提交給action屬性對應(yīng)的接口麻献。

form標簽提供兩大功能：

a.統(tǒng)一提交
b.重置（清除輸入信息）

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

a.type="text"
普通文本輸入框
name屬性：專門用來區(qū)分不同的信息们妥，相當于字典的key

            <font>賬號</font><input type="text" name="tel" value="1607470930"
                placeholder="qq號，哈哈" maxlength="10" id=""/><br />
            <font>郵箱</font><input type="text" name="email" value=""
                placeholder="別輸了勉吻，輸了也沒有监婶！" id=""
                maxlength="10"/><br />
            
            <!--<input type="submit" name="" id="" value="提交" />-->

2.input標簽 -單標簽
屬于表單標簽，既可以放在form標簽中齿桃，也可以放form標簽外面單獨使用惑惶。
type屬性：type對應(yīng)的值不一樣，input標簽體現(xiàn)的功能不一樣
name屬性：專門用來區(qū)分不同的信息短纵，相當于字典的key
value屬性：標簽內(nèi)容带污；指向輸入框中的內(nèi)容;設(shè)置其實是設(shè)輸入框中默認值。（記錄賬號密碼）
placeholders屬性：當輸入框中無內(nèi)容時顯示的提示信息
maxlength屬性：設(shè)置輸入框最大能輸入的字符個數(shù)

b.type="password"：密碼輸入框
普通文本輸入框

            <font>密碼</font><input type="password" name="password"  value="password" 
                placeholder="密碼" /><br />
            <input type="submit" name="" id="" value="提交" />
            <br />
            <hr />

c.type="radio"：單選按鈕
name屬性：同一組選擇香到，需要設(shè)置它們name屬性值一樣鱼冀，才能單選
value屬性：不可見；專門用于對提交數(shù)據(jù)的區(qū)分悠就，因為在單選按鈕模式中兩者屬性是一樣的
checked="checked":讓單選按鈕處于選擇狀態(tài)千绪。

            <input type="radio" name="sex" id="" value="boy" 
                checked="checked"/><font>男</font>
            <input type="radio" name="sex" id="" value="girl" /><font>女</font>
            <br />
            <input type="radio" name="marry" id="" value="未婚" 
                checked="checked"/><font>未婚</font>
            <input type="radio" name="marry" id="" value="已婚" /><font>已婚</font>
            <br />
            <hr />

d.type="checkbox"：復(fù)選按鈕
name屬性：同一組選擇，需要設(shè)置它們name屬性值一樣梗脾，才能復(fù)選

            <input type="checkbox" name="hobby" id="" value="籃球"/><font>籃球</font>
            <br />
            <input type="checkbox" name="hobby" id="" value="足球"/><font>足球</font>
            <br />
            <input type="checkbox" name="hobby" id="" value="排球"/><font>排球</font>
            <br />
            <input type="checkbox" name="hobby" id="" value="乒乓球"/><font>乒乓球</font>
            <br />
            <hr />

e.type="button"：普通按鈕
value屬性：決定按鈕上顯示的信息

            <input type="button" id="" value="input按鈕"/>
            <br />
            <hr />

f.type="submit"：提交按鈕
點擊提交按鈕后荸型，會自動提交當前form中所有設(shè)置了name屬性的相關(guān)標簽的值，放在form標簽外無意義炸茧，以name=value的方式提交瑞妇。

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

g：type="reset"：重置按鈕
將當前form標簽中所有的標簽狀態(tài)設(shè)置為初始狀態(tài)

            <input type="reset" value="重置" />
            <hr />
            <input type="email" name="" id="" value="" />
            <input type="color" name="" id="" value="" />
            <input type="date" name="" id="" value="" />
            <input type="datetime" name="" id="" value="" />
            <hr />
        </form>

3.按鈕標簽（button）
雙標簽，通過input->type="button"生成的按鈕是單標簽梭冠，按鈕不能為圖片辕狰。
中間內(nèi)容部分更靈活

        <!--文字按鈕-->
        <button>普通按鈕</button>
        <!--圖片按鈕-->
        <button><font>圖片按鈕</font><img src="img/校長.jpg" alt="莫得了" /></button>
    </body>
</html>

2.3 下拉菜單和多行文本標簽

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

1.下拉菜單
a.select標簽：代表整個下拉菜單
name屬性：區(qū)分和提交

b.option標簽：下拉菜單中的選項
value屬性：提交的內(nèi)容
selected="selected"屬性：設(shè)置為默認選中。

c.optgroup標簽：
label屬性：給分組取名字

            <font>考試科目</font><select name="學(xué)科">
                <optgroup label="理科">理科</optgroup>
                <option value="">語文</option>
                <optgroup label="文科">文科</optgroup>
                <option value="">歷史</option>
            </select>
            <br />
            <font>省份</font><select name="province">
                <option value="四川">四川省</option>
                <option value="廣西">廣西省</option>
                <option value="廣東">廣東省</option>
                <option value="湖南">湖南省</option>
                <option value="湖北">湖北省</option>
                <option selected="selected" value="云南">云南省</option>
                <option value="遼寧">遼寧省</option>
                <option value="吉林">吉林省</option>
                <option value="黑龍江">黑龍江省</option>
            </select>
            <br />
            <font>城市</font><select name="city">
                <option value="">成都市</option>
                <option value="">南寧市</option>
                <option value="">深圳市</option>
                <option value="">長沙市</option>
                <option value="">武漢市</option>
                <option value="">昆明市</option>
                <option value="">沈陽市</option>
                <option value="">長春市</option>
                <option value="">哈爾濱市</option>
            </select>
            <br />
            <input type="submit" name="" id="" value="提交" />
            <hr />

2.多行文本輸入框
可以輸入多行內(nèi)容妈嘹，內(nèi)容超出范圍可以上下滾動
name屬性：提交和區(qū)分
rows屬性：一次性可以顯示的行數(shù)柳琢，決定高度
cols屬性：列數(shù)；一行最多可以顯示多少個文字润脸，決定寬度
placeholder
內(nèi)容:相當于單標簽中的value功能柬脸，提交的也是這個。
maxlength屬性：最多多少字

            <textarea name="" rows="4" cols="10" placeholder="一劍光寒十九州"
                maxlength="5">
                默認值
            </textarea>
        </form>
    </body>
</html>

2.4 div和span標簽

div和span都是無語義標簽：一般用來將網(wǎng)頁中的標簽進行分組和分模塊使用毙驯。

2.5 css基礎(chǔ)

1.什么是css

css是web標準中的表現(xiàn)標準倒堕，專門負責網(wǎng)頁中內(nèi)容的布局和樣式。
目前使用的是css3
css代碼又叫樣式表

2.css語法（怎么寫爆价？）

a.基本結(jié)構(gòu)
選擇器{屬性名1：屬性值1垦巴；屬性名2：屬性值2。铭段。骤宣。}

b.說明
選擇器{}：通過選擇器來決定樣式是針對哪個標簽寫的（在內(nèi)聯(lián)樣式表中沒有這個結(jié)構(gòu)）。
屬性：屬性名不是隨便寫的序愚，必須是css提供的兩百多個屬性中的一個憔披；屬性名和屬性值之間用冒號連接；
多個屬性之間用分號隔開（如果沒有分號爸吮，會導(dǎo)致后邊所有的屬性無效芬膝。）。

3.css代碼寫在哪

a.內(nèi)聯(lián)樣式表
將樣式表作為HTML標簽的style屬性值
只針對一個標簽有效

b.內(nèi)部樣式表
將樣式表作為style標簽的內(nèi)容,head或body中形娇。（注意是標簽）
可以針對當前html中所有的標簽

c.外部樣式表
將樣式表寫在一個css文件中锰霜，再通過link導(dǎo)入
css文件：后綴是css的文件
可以針對所有的html中的所有標簽，前提是要導(dǎo)入桐早。

常用屬性補充：
color：文字顏色
font-size:字體大小
background-color：背景顏色
width：寬度
height：高度

css中顏色：
a.顏色英語單詞
b.rgb的十六進制值：如#ff0000(紅色)
c.直接使用rgb值癣缅，如rgb(255,0,0)紅；
rgba(R,G,B,Alpha):Alpha(0完全透明-1不透明)
css中數(shù)字：如果數(shù)字表示大小哄酝，必須加單位：
px：像素
em：空格

3者優(yōu)先級：
內(nèi)聯(lián)樣式表優(yōu)先級最高所灸，內(nèi)部和外部的樣式表看執(zhí)行順序，寫在后面的優(yōu)先級高炫七。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css基礎(chǔ)</title>
        <!--2.內(nèi)部樣式表
            style標簽中的內(nèi)容爬立，必須也只能是css代碼
        -->
        <style type="text/css">
            /*內(nèi)部樣式可以同時寫多個樣式表*/
            a{
                color:yellowgreen;
                background-color: blue;
            }
            /*對所有div標簽設(shè)置顏色*/
            div{
                color:saddlebrown;
            }
        </style>
        <style type="text/css">
            div{
                background-color: red;
            }
        </style>
        <!--3.外部樣式表
            a.link標簽：
            rel屬性：確定導(dǎo)入的文件功能
            rel="stylesheet"(樣式表)；
            rel="icon"：設(shè)置網(wǎng)頁圖標
            
            type屬性：確定文件類型万哪；文件類型/文件后綴侠驯；text/css文本/文件后綴是css
            
            href屬性：需要導(dǎo)入的文件的文件路徑
        -->
        <link rel="stylesheet" href="css/css基礎(chǔ).css" type="text/css"/>
        <!--設(shè)置網(wǎng)頁圖標-->
        <link rel="icon" href="img/jd.jpg" type="img/jpg"/>
        
    </head>
    <body>
        <!--1.內(nèi)聯(lián)樣式表
        body中每個有顯示效果的標簽都有style屬性，用于設(shè)置當前標簽樣式
        style屬性值""中寫的就是css代碼奕巍。
        -->
        <p style="color: red;font-size:10px;">一劍光寒十九州吟策！</p>
        <p style="color: #0000ff;font-size:1em;">一劍光寒十九州！</p>
        <p style="color: rgba(0,255,0,0.5);font-size:50px">一劍光寒十九州的止！</p>
        <a >百度一下</a>
        <div id="">
            我是div
        </div>
        <h1>我是標題一</h1>
    </body>
</html>

2.6 選擇器

style標簽實質(zhì)可以寫在html文件中的任意位置
選擇器{屬性名1：屬性值1檩坚；。。匾委。拖叙；}
css提供的選擇器寫法大概也就10幾種，常見的：

1.標簽選擇器：直接將標簽名作為選擇器赂乐，選中當前html中所有指定的標簽
如：a{}：選中當前html中所有的a標簽

2.id選擇器：將標簽的id屬性值前加#作選擇器薯鳍，選擇所有id是指定值的標簽。
如：#text：選中當前html中id屬性值為text的所有標簽挨措。

3.class選擇器(類型選擇器):將標簽的class屬性值前加.作為選擇器挖滤，選中所有class是指定值的標簽。
如：.test：選中當前html中class屬性值是test的所有標簽浅役。

4.群組選擇器：將多個選擇器之間用逗號隔開斩松，然后作為一個選擇器，同時選中每個單獨選擇器選中的所有標簽觉既。
如：p,a,.test,#text{}:選中所有的p標簽惧盹，a標簽，class只是test以及id值
是text的標簽奋救。

5.后代選擇器：將多個選擇器用空格隔開作為一個選擇器岭参，從前往后一層一層的找，找到最后一個選擇器對應(yīng)的標簽尝艘。
如：div .test #text{}：選中div標簽中class值是test的標簽中id值是text
的標簽演侯。
div div p{}：選中div中的div中的p標簽

6.通配符：將作為選擇器，選中當前頁面中所有的標簽背亥。
如：{}：選中所有標簽

<style type="text/css">
    /*標簽選擇器*/
    div{
        color:red;
        }
    /*id選擇器*/
    #text{
        background-color: yellow;
    }
    /*類型選擇器*/
    .test{
        width:300px;
        height: 200px;
        background-color: bisque;
    }
    /*群組選擇器*/
    font,h2{
        font-size: 60px;
    }
    /*后代選擇器*/
    div div p{
        
    }
    /*通配符*/
    *{
        /*設(shè)置文字裝飾效果
         underline：添加下劃線
         overline：添加上劃線
         line-through：添加刪除線秒际，會重置掉前兩個
         none：去掉下劃線
         */
        text-decoration: underline;
        text-decoration: overline;
        text-decoration: line-through;
        text-decoration:none;
    }
</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>我是段落1，我是body p</p>
        <div>
            <div id="text">
                div1
            </div>
            <div class="test">
                div2
                <p>我是段落2狡汉，也是div div p</p>
            </div>
        </div>
        <p id="text">我是段落3</p>
        <h1 class="test">我是標題1娄徊，我的class是test</h1>
        <h2>我是標題2</h2>
        <font class="font">我是font</font>
        
    </body>
</html>

2.7 偽類選擇器

偽類選擇器
用于給標簽不同的狀態(tài)設(shè)置不同的樣式

1.基本格式
普通選擇器：偽類選擇器

2.偽類選擇器

link：標簽的初始狀態(tài);一般作用于a標簽，表示a標簽中的鏈接沒有成功訪問過對應(yīng)的狀態(tài)盾戴，即初始狀態(tài)寄锐。(如：讀過的小說章節(jié)與未讀過的章節(jié)不一樣)
標簽:link{}:此處的標簽可以是任何選擇器選中的標簽。

visited：超鏈接被訪問后的狀態(tài)(如：讀過的小說章節(jié)的狀態(tài))一般作用于a標簽.

hover：鼠標懸停在標簽上時對應(yīng)的狀態(tài)尖啡。適用于所有標簽橄仆。

active:激活狀態(tài)；鼠標按下但是還沒有彈起時對應(yīng)的狀態(tài)衅斩。不是僅作用于a標簽盆顾。

愛恨原則：當同一個標簽需要同時給多個狀態(tài)添加狀態(tài)時，需要遵循愛恨原則：
link,visited,hover,active
LoVeHAte

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{
                color:red;
            }
            a:visited{
                color:black;
            }
            a:hover{
                /*去掉下劃線*/
                text-decoration: none;
            }
            a:active{
                color: blue;
            }
            p:hover{
                color: red;
                font-size: 10em;
            }
        </style>
    </head>
    <body>
        <a >錯誤的鏈接</a>
        <p>一劍光寒十九州畏梆！</p>
    </body>
</html>

最后編輯于：2018.12.04 18:51:02

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末您宪，一起剝皮案震驚了整個濱河市奈懒，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌宪巨，老刑警劉巖磷杏，帶你破解...
沈念sama閱讀 207,113評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異揖铜，居然都是意外死亡茴丰，警方通過查閱死者的電腦和手機达皿，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門天吓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人峦椰，你說我怎么就攤上這事龄寞。” “怎么了汤功？”我有些...
開封第一講書人閱讀 153,340評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵物邑，是天一觀的道長。經(jīng)常有香客問我滔金，道長色解，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,449評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任餐茵，我火速辦了婚禮科阎，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘忿族。我一直安慰自己锣笨，他們只是感情好，可當我...
茶點故事閱讀 64,445評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布道批。她就那樣靜靜地躺著错英，像睡著了一般。火紅的嫁衣襯著肌膚如雪隆豹。梳的紋絲不亂的頭發(fā)上椭岩，一...
開封第一講書人閱讀 49,166評論 1贊 284
城市分裂傳說
那天，我揣著相機與錄音璃赡，去河邊找鬼判哥。笑死，一個胖子當著我的面吹牛鉴吹，可吹牛的內(nèi)容都是我干的姨伟。我是一名探鬼主播，決...
沈念sama閱讀 38,442評論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼豆励，長吁一口氣：“原來是場噩夢啊……” “哼夺荒！你這毒婦竟也來了瞒渠？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,105評論 0贊 261
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤技扼，失蹤者是張志新（化名）和其女友劉穎伍玖，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體剿吻，經(jīng)...
沈念sama閱讀 43,601評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡窍箍，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,066評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了丽旅。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椰棘。...
茶點故事閱讀 38,161評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖榄笙，靈堂內(nèi)的尸體忽然破棺而出邪狞，到底是詐尸還是另有隱情浸赫，我是刑警寧澤窄潭，帶...
沈念sama閱讀 33,792評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站冠王，受9級特大地震影響米丘，放射性物質(zhì)發(fā)生泄漏剑令。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,351評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一拄查、第九天我趴在偏房一處隱蔽的房頂上張望吁津。院中可真熱鬧，春花似錦靶累、人聲如沸腺毫。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評論 0贊 19
一樁弒父案挣柬，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽潮酒。三九已至，卻和暖如春邪蛔，著一層夾襖步出監(jiān)牢的瞬間急黎，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,584評論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工侧到，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留勃教，地道東北人。一個月前我還...
沈念sama閱讀 45,618評論 2贊 355
代替公主和親
正文我出身青樓匠抗，卻偏偏與公主長得像故源，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子汞贸，可洞房花燭夜當晚...
茶點故事閱讀 42,916評論 2贊 344