1.細(xì)線表格

原理：將table的整個背景設(shè)置成黑色，每一個單元格背景設(shè)置成白色，單元格之間的間距設(shè)置為1，留出的縫隙就是黑色線

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table width="600" height="500" cellspacing="1" bgcolor="black">
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <td rowspan="5"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr bgcolor="white">
                <td rowspan="2"></td>
                <td></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td colspan="5"></td>
            </tr>
        </table>
    </body>
</html>

2.表單標(biāo)簽和input標(biāo)簽

2.1表單標(biāo)簽（form）

表單標(biāo)簽的作用：收集用戶信息：實(shí)質(zhì)是將表單標(biāo)簽作為容器，來收集表單標(biāo)簽中其他標(biāo)簽的信息。
本身沒有任何顯示效果
action屬性: 設(shè)置提交地址
method屬性: 提交方式(post/get)
點(diǎn)提交按鈕提交的時候，將表單中所有相關(guān)標(biāo)簽以name=value的形式，按照method屬性提供的提交方式，提交給action屬性對應(yīng)的接口。
form標(biāo)簽提供了兩大功能：a.統(tǒng)一提交 b.重置

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

2.2.input標(biāo)簽 - 單標(biāo)簽

既可以放在form標(biāo)簽中，也可以不放在form標(biāo)簽里單獨(dú)使用
type屬性 - type對應(yīng)的值不一樣，input標(biāo)簽體現(xiàn)的功能不一樣

a.text - 文本輸入框

<font>賬號：</font><input type="text" name="tel" value="726550822" placeholder="手機(jī)號..." maxlength="11"/>

name屬性 - 專門用來區(qū)分不同的信息，相當(dāng)于字典的key
value屬性 - 標(biāo)簽內(nèi)容；指向輸入框中的內(nèi)容; 設(shè)值其實(shí)是設(shè)文本輸入框中的默認(rèn)值
placeholder屬性 - 當(dāng)輸入框中沒有內(nèi)容的時候，顯示的提示信息
maxlength屬性 - 設(shè)置輸入框最大能輸入的文字的個數(shù)

b.password - 密碼輸入框

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

c.radio - 單選按鈕

<input type="radio" name="sex" value="boy" checked="checked"/><font>男</font>

name屬性 - 要求同一組的數(shù)據(jù)的name屬性值必須一樣，才能單選
value屬性 - 不可見的，專門用于數(shù)據(jù)的提交；或者區(qū)分被選中的值
checked屬性 - 讓單選按鈕默認(rèn)處于選中狀態(tài)

d.checkbox - 復(fù)選按鈕

<input type="checkbox" name="hobby" id="" value="籃球" /><font>??</font>

e.button - 普通按鈕

value屬性 - 決定按鈕上顯示的文字

<input type="button" value="注冊" />

f.submit - 提交按鈕

點(diǎn)擊提交按鈕后會自動提交當(dāng)前form中所有設(shè)置了name屬性的相關(guān)標(biāo)簽的值。以‘name=value’的形式進(jìn)行提交

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

g.reset - 重置按鈕

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

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

2.3.按鈕標(biāo)簽(button)

雙標(biāo)簽，中間內(nèi)容部分更靈活

        <!--文字按鈕-->
        <button>登錄</button>
        <!--圖片按鈕-->
        <button>
            <img src="img/luffy.jpg"/>
            <p>登錄</p>
        </button>

3.下拉菜單和多行文本框

3.1.下拉菜單（select-option）

a.select標(biāo)簽 - 代表整個下拉菜單

name屬性 - 區(qū)分和提交

b.option標(biāo)簽 - 下拉菜單中的選項

內(nèi)容 - 顯示部分
value屬性 - 提交的內(nèi)容
selected屬性 - 設(shè)置默認(rèn)選中

c.optgroup標(biāo)簽

顯示效果上對下拉菜單進(jìn)行分組
label屬性 - 給分組設(shè)置名字

            <font>考試科目：</font><select name="學(xué)科">
                <optgroup label="理科"></optgroup>
                <option value="">數(shù)學(xué)</option>
                <option value="">物理</option>
                <option value="">化學(xué)</option>
                <option value="">生物</option>
                <optgroup label="文科"></optgroup>
                <option value="">語文</option>
                <option value="">政治</option>
                <option value="">地理</option>
                <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>
            <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>

3.2.多行文本輸入框(textarea)

可以輸入多行內(nèi)容，內(nèi)容超出范圍可以上下滾動
name屬性 - 提交和區(qū)分
rows - 一次性可以顯示的行數(shù)(決定高度)
cols - 列數(shù)（一行最多可以顯示多少個文字，決定寬度）
placeholder - 提示語句
內(nèi)容 - 相當(dāng)于value
maxlength屬性 - 最多能輸入的文字個數(shù)

<textarea maxlength="200" name="" rows="4" cols="20" placeholder="意見..." >默認(rèn)值</textarea>

4.div和span

兩個標(biāo)簽是無語義標(biāo)簽；一般用來將網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分模塊使用;

5.CSS基礎(chǔ)

1.什么是CSS
css是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門負(fù)責(zé)網(wǎng)頁中內(nèi)容的布局和樣式
目前使用的是css3
css代碼又叫樣式表

2.CSS語法（怎么寫？）
a.基本結(jié)構(gòu)
選擇器{屬性名1:屬性值1;屬性名2:屬性值2;...}

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

3.CSS代碼寫在哪兒？
a.內(nèi)聯(lián)樣式表
將樣式表作為HTML中標(biāo)簽的style屬性值
內(nèi)聯(lián)樣式表只能針對一個標(biāo)簽有效

<p style="color: #ff00ff; font-size: 40px;">我是內(nèi)聯(lián)樣式表</p>

b.內(nèi)部樣式表
將樣式表作為style標(biāo)簽的內(nèi)容
內(nèi)部樣式表可以針對當(dāng)前html中所有的標(biāo)簽

<style type="text/css">
            /*內(nèi)部樣式，可以同時寫多個樣式表*/
            a{
                color: yellowgreen;
                background-color: sandybrown;
            }
            div{
                color: yellow;
            }
            p{
                background-color: pink;
            }
        </style>

c.外部樣式表
將樣式表寫在一個css文件中，再通過link導(dǎo)入
外部樣式表可以針對所有html文件中的所有標(biāo)簽

<!--導(dǎo)入樣式表-->
        <link rel="stylesheet" type="text/css" href="css/css基礎(chǔ).css"/>
        <!--設(shè)置網(wǎng)頁圖標(biāo)-->
        <link rel="icon" type="image/ico" href="img/aaa.ico"/>

優(yōu)先級：內(nèi)聯(lián)樣式表的優(yōu)先級最高；內(nèi)部樣式和外部樣式，誰后寫誰的優(yōu)先級就高

4.常用屬性補(bǔ)充：
color : 字體顏色
font-size : 字體大小
background-color : 背景顏色
width : 寬度
height : 高度

CSS中的顏色值：a.顏色的英語單詞
b.rgb的十六進(jìn)制值，例如：#ff0000
c.直接使用rgb值：rgb(R,G,B), rgba(R,G,B, Alpha) Alpha：0(完全透明) ~ 1(不透明)
CSS中的數(shù)字：如果數(shù)字表示大小，必須加單位：px(像素)，em(空格)

6選擇器

6.選擇器{屬性名1:屬性值;屬性名2:屬性值;...}

css提供的選擇器的寫法大概也有十幾種，常見的：
1.標(biāo)簽選擇器：直接將標(biāo)簽名作為選擇器,選中當(dāng)前html中所有指定的標(biāo)簽
             例如:a{} - 選中當(dāng)前html中所有的a標(biāo)簽; div{} - 選中當(dāng)前html中所有的div標(biāo)簽
2.id選擇器：將標(biāo)簽的id屬性值前面加#作為選擇器，選中所有id是指定值的標(biāo)簽
            例如：#text{} - 選中當(dāng)前html中id屬性值是text的所有標(biāo)簽
            
3.class選擇器(類型選擇器):將標(biāo)簽的class屬性值前面加.作為選擇器,選中所有class是指定值的標(biāo)簽
             例如：.test{} - 選中當(dāng)前html中class屬性值是test的所有標(biāo)簽
             
4.群組選擇器: 將多個選擇器用逗號隔開作為一個選擇器,同時選中每個單獨(dú)的選擇器選中的所有的標(biāo)簽
             例如：p,a,.test,#text{} - 選中所有p標(biāo)簽，a標(biāo)簽和class值是test以及id值是text的標(biāo)簽
             
5.后代選擇器：將多個選擇器用空格隔開作為一個選擇器, 從前往后一層一層的找，找到最后一個選擇器對應(yīng)的標(biāo)簽
                 例如: div .test #text{} - 現(xiàn)在div標(biāo)簽中class值是test的標(biāo)簽中id值是text的標(biāo)簽
                      div div p{} - 選中div中的div中的p標(biāo)簽

6.通配符：將*作為選擇器, 選中當(dāng)前頁面中所有的標(biāo)簽
例如: *{} - 選中當(dāng)前頁面中所有的標(biāo)簽

7.偽類選擇器

偽類選擇器是用來選中標(biāo)簽的不同的狀態(tài)（為了標(biāo)簽的不同狀態(tài)設(shè)置不同的樣式）
1.基本格式
普通選擇器:偽類選擇器
2.偽類選擇器
1) link - 標(biāo)簽的初始狀態(tài);一般作用于a標(biāo)簽，表示a標(biāo)簽中的連接沒有成功訪問過對應(yīng)的狀態(tài)
標(biāo)簽:link{} - 標(biāo)簽是通過各種選擇器來選中的標(biāo)簽
2)visited - 超鏈接被訪問后的狀態(tài)。一般作用于a標(biāo)簽
3)hover - 鼠標(biāo)懸停在標(biāo)簽上的時候?qū)?yīng)的狀態(tài)
4)active - 激活狀態(tài),鼠標(biāo)按下還沒有彈起的時候?qū)?yīng)的狀態(tài)

3.愛恨原則:當(dāng)同一個標(biāo)簽需要同時給多個狀態(tài)添加樣式的時候，要遵守愛恨原則：link-visited-hover-active
LoVeHAte

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

day-21 表單和css基礎(chǔ)

day-21 表單和css基礎(chǔ)

1.細(xì)線表格

2.表單標(biāo)簽和input標(biāo)簽

2.1表單標(biāo)簽（form）

2.2.input標(biāo)簽 - 單標(biāo)簽

a.text - 文本輸入框

b.password - 密碼輸入框

c.radio - 單選按鈕

d.checkbox - 復(fù)選按鈕

e.button - 普通按鈕

f.submit - 提交按鈕

g.reset - 重置按鈕

2.3.按鈕標(biāo)簽(button)

3.下拉菜單和多行文本框

3.1.下拉菜單（select-option）

a.select標(biāo)簽 - 代表整個下拉菜單

b.option標(biāo)簽 - 下拉菜單中的選項

c.optgroup標(biāo)簽

3.2.多行文本輸入框(textarea)

4.div和span

5.CSS基礎(chǔ)

6選擇器

7.偽類選擇器

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

day-21 表單和css基礎(chǔ)

1.細(xì)線表格

2.表單標(biāo)簽和input標(biāo)簽

2.1表單標(biāo)簽（form）

2.2.input標(biāo)簽 - 單標(biāo)簽

a.text - 文本輸入框

b.password - 密碼輸入框

c.radio - 單選按鈕

d.checkbox - 復(fù)選按鈕

e.button - 普通按鈕

f.submit - 提交按鈕

g.reset - 重置按鈕

2.3.按鈕標(biāo)簽(button)

3.下拉菜單和多行文本框

3.1.下拉菜單（select-option）

a.select標(biāo)簽 - 代表整個下拉菜單

b.option標(biāo)簽 - 下拉菜單中的選項

c.optgroup標(biāo)簽

3.2.多行文本輸入框(textarea)

4.div和span

5.CSS基礎(chǔ)

6選擇器

7.偽類選擇器

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av