表單標(biāo)簽和css偽類選擇器

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

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

這個(gè)標(biāo)簽作為一個(gè)容器哥牍,來收集和提交這個(gè)標(biāo)簽中其他相關(guān)標(biāo)簽的數(shù)據(jù)也颤,一般不單獨(dú)使用
active屬性:設(shè)置提交路徑(接口)
method屬性:設(shè)置請求方式(post/get)


image.png

2.input標(biāo)簽

input標(biāo)簽是單標(biāo)簽
input標(biāo)簽可以單獨(dú)使用愧怜,也可以和form配合使用
type屬性:這個(gè)值不一樣盼玄,input的功能就不一樣


image.png

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

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

2.2單選按鈕

type - radio
name - 注意:同一類信息的name需要設(shè)置成一樣的值缭黔,才能做到食茎,選擇其中一個(gè)讓別的取消選中
value - 需要設(shè)置值,來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)


image.png

2.3復(fù)選按鈕

type - checkbox

            name - 如果是同一類數(shù)據(jù)馏谨,name值應(yīng)該設(shè)置成一樣的
            value - 需要設(shè)置值别渔,來告訴別人選中按鈕對應(yīng)值或者意義
            checked - 設(shè)置默認(rèn)選中狀態(tài)
image.png

2.4普通按鈕

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


image.png

2.5提交按鈕

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


image.png

2.6 重置按鈕

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


image.png

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

image.png

1.下拉菜單:select - option

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


image.png

image.png

2.多行文本域:textarea

輸入的內(nèi)容可以是多行顯示

rows - 設(shè)置一屏最多顯示的列數(shù)
cils -- 設(shè)置一行的最大的列數(shù)
內(nèi)容 - 相當(dāng)于value


image.png

三.div和span

image.png

div和span標(biāo)簽都是無語義標(biāo)簽,一般來對網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分塊用的

     一個(gè)div占一行惧互;多個(gè)span可以在一行顯示
image.png

四.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;......}
{} -- 固定寫法
屬性:必須是css提供的屬性艾猜,總共200多個(gè)
屬性值 -- 根據(jù)屬性賦不同的值买喧,如果屬性的值是用來表示大小數(shù)字,后面必須加單位箩朴,例如:100px(像素)岗喉,em(空格)

css中的顏色值:a.顏色的英文單詞
b.#顏色值對應(yīng)的6位16進(jìn)制值(#ff00,#00ff00)
c.rgb(r,g,b) rgba(r,g,b,alpha);r,g,b的值取值范圍(0-255);a表示透明度秋度,取值范圍(0-1)
屬性和屬性值之間用冒號隔開炸庞,屬性和屬性之間用分號隔開;屬性的順序除特殊情況外是任意的

說明:用來選中/確定需要設(shè)置樣式的標(biāo)簽


image.png

link標(biāo)簽
link標(biāo)簽 -- 導(dǎo)入外部文件
rel屬性 -- 說明導(dǎo)入的文件的功能荚斯,stylesheet(添加樣式表)埠居,icon(設(shè)置網(wǎng)頁圖標(biāo))
type屬性 -- 對導(dǎo)入的文件類型進(jìn)行說明:文件類型/文件后綴
href屬性 -- 到日的文件地址


image.png

五.css選擇器

常用的選擇器:元素選擇器恳不,id選擇器靶病,class選擇器,父子選擇器朽们,群組選擇器兽泣,通配符
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.群組選擇器: 多個(gè)選擇器用逗號隔開作為一個(gè)選擇器,同時(shí)選中所有選擇器對應(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.父子選擇器:多個(gè)選擇器用空格隔開作為一個(gè)選擇器冈止,按順序依次往后找,找到最后一層選擇器對應(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)簽
          *{}
image.png

image.png

六.偽類選擇器

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

1.link

標(biāo)簽:link{} --選中初始狀態(tài)(a標(biāo)簽的處置狀態(tài)指的是a對應(yīng)的網(wǎng)址一次都沒有成功的時(shí)候?qū)?yīng)的狀態(tài))
例如:a:link{}; p:link{}; #a1:link{}

a.visited:訪問后狀態(tài)
b.hover:鼠標(biāo)懸停在標(biāo)簽對應(yīng)的狀態(tài)
c.active:鼠標(biāo)按住不放的狀態(tài)

注意:使用偽類選擇器的時(shí)候要遵循愛恨原則(LoveHate),如果不遵循可能胡導(dǎo)致一些樣式無效

2..選擇器的優(yōu)先級闺属;權(quán)重指越大優(yōu)先級越高,如果后寫權(quán)重相同周霉,后面的高

元素選擇器權(quán)重:0001 - 1
class選擇器權(quán)重:0010 - 2
id選擇器權(quán)重:0100 - 4
偽類選擇器權(quán)重:0001
群組選擇器權(quán)重:單獨(dú)看每個(gè)選擇器的權(quán)重
父子選擇器權(quán)重:所有選擇器權(quán)重之和

注意:內(nèi)聯(lián)樣式的優(yōu)先級是最高的

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末掂器,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子俱箱,更是在濱河造成了極大的恐慌唉匾,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匠楚,死亡現(xiàn)場離奇詭異巍膘,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)芋簿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門峡懈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人与斤,你說我怎么就攤上這事肪康。” “怎么了撩穿?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵磷支,是天一觀的道長。 經(jīng)常有香客問我食寡,道長雾狈,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任抵皱,我火速辦了婚禮善榛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘呻畸。我一直安慰自己移盆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布伤为。 她就那樣靜靜地躺著咒循,像睡著了一般。 火紅的嫁衣襯著肌膚如雪绞愚。 梳的紋絲不亂的頭發(fā)上叙甸,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機(jī)與錄音爽醋,去河邊找鬼蚁署。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蚂四,可吹牛的內(nèi)容都是我干的光戈。 我是一名探鬼主播哪痰,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼久妆!你這毒婦竟也來了晌杰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤筷弦,失蹤者是張志新(化名)和其女友劉穎肋演,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烂琴,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡爹殊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奸绷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梗夸。...
    茶點(diǎn)故事閱讀 38,117評論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖号醉,靈堂內(nèi)的尸體忽然破棺而出反症,到底是詐尸還是另有隱情,我是刑警寧澤畔派,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布铅碍,位于F島的核電站,受9級特大地震影響线椰,放射性物質(zhì)發(fā)生泄漏胞谈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一士嚎、第九天 我趴在偏房一處隱蔽的房頂上張望呜魄。 院中可真熱鬧悔叽,春花似錦莱衩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至趟庄,卻和暖如春括细,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背戚啥。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工奋单, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人猫十。 一個(gè)月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓览濒,卻偏偏與公主長得像呆盖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子贷笛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 21 你還會唱歌嗎 我的白鴿 森林已經(jīng)轟然夷為一片豐腴的田地 土地悄然鋪滿了黃沙 22 早年遺落的一顆桃核 現(xiàn)在已...
    東者西迷閱讀 263評論 0 2
  • 數(shù)組使用的基本注意事項(xiàng): 1. 定義一個(gè)常量數(shù)組 2. 數(shù)組元素的訪問 [swift字符串基本使用] (http:...
    by小杰閱讀 488評論 0 0
  • 巍巍山倚月 顫顫草隨風(fēng) 處處離愁涌 時(shí)時(shí)入夢中
    零視角閱讀 502評論 0 2
  • 主坝τ帧: 當(dāng)我被謾罵時(shí),您教導(dǎo)我學(xué)習(xí)溫柔乏苦; 當(dāng)我被傷害時(shí)株扛,您教導(dǎo)我學(xué)習(xí)包容; 當(dāng)我被遺棄時(shí)汇荐,您教導(dǎo)我學(xué)習(xí)依靠洞就; 當(dāng)我...