二階段002day 部分html和css

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

-1.表單標(biāo)簽(form)
表單標(biāo)簽的作用:收集用戶信息累澡。 - 實(shí)質(zhì)是將表單標(biāo)簽作為容器,來收集表單標(biāo)簽中其他標(biāo)簽的信息
本身沒有任何顯示效果

        action屬性: 設(shè)置提交地址
        method屬性: 提交方式(post/get)
        
        點(diǎn)提交按鈕提交的時(shí)候般贼,將表單中所有相關(guān)標(biāo)簽以name=value的形式愧哟,
        按照method屬性提供的提交方式,提交給action屬性對(duì)應(yīng)的接口
        
        form標(biāo)簽提供了兩大功能:a.統(tǒng)一提交   b.重置

2.input標(biāo)簽 - 單標(biāo)簽
既可以放在form標(biāo)簽中哼蛆,也可以不放在form標(biāo)簽里單獨(dú)使用

        type屬性 - type對(duì)應(yīng)的值不一樣蕊梧,input標(biāo)簽體現(xiàn)的功能不一樣
    -->

    <form action="" method="get">
        <!--a.text - 文本輸入框
            name屬性 - 專門用來區(qū)分不同的信息腮介,相當(dāng)于字典的key
            value屬性 - 標(biāo)簽內(nèi)容肥矢;指向輸入框中的內(nèi)容; 設(shè)值其實(shí)是設(shè)文本輸入框中的默認(rèn)值
            placeholder屬性 - 當(dāng)輸入框中沒有內(nèi)容的時(shí)候,顯示的提示信息
            maxlength屬性 - 設(shè)置輸入框最大能輸入的文字的個(gè)數(shù)

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

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

d.checkbox - 復(fù)選按鈕
name屬性 - 要求同一組的數(shù)據(jù)的name屬性值必須一樣腾节,才能單選
value屬性 - 不可見的忘嫉,專門用于數(shù)據(jù)的提交荤牍;或者區(qū)分被選中的值
checked屬性 - 讓單選按鈕默認(rèn)處于選中狀態(tài)
e.button - 普通按鈕
value屬性 - 決定按鈕上顯示的文字
-->
<input type="button" value="注冊(cè)" />

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

g.reset - 重置按鈕
將當(dāng)前form標(biāo)簽中所有的標(biāo)簽狀態(tài)設(shè)置為初始狀態(tài)
3.按鈕標(biāo)簽(button)
雙標(biāo)簽榄融,中間內(nèi)容部分更靈活
-->

<button>登錄</button>

<button>
<img src="img/luffy.jpg"/>
<p>登錄</p>
</button>

2下拉表單和多行文本框

1.下拉菜單(select-option)
a.select標(biāo)簽 - 代表整個(gè)下拉菜單
name屬性 - 區(qū)分和提交

            b.option標(biāo)簽 - 下拉菜單中的選項(xiàng)
            內(nèi)容 - 顯示部分
            value屬性 - 提交的內(nèi)容
            selected屬性 - 設(shè)置默認(rèn)選中
            
            c.optgroup標(biāo)簽
            顯示效果上對(duì)下拉菜單進(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>

2.多行文本輸入框(textarea)
可以輸入多行內(nèi)容参淫,內(nèi)容超出范圍可以上下滾動(dòng)
name屬性 - 提交和區(qū)分
rows - 一次性可以顯示的行數(shù)(決定高度)
cols - 列數(shù)(一行最多可以顯示多少個(gè)文字救湖,決定寬度)
placeholder - 提示語句
內(nèi)容 - 相當(dāng)于value
maxlength屬性 - 最多能輸入的文字個(gè)數(shù)
-->
<textarea maxlength="200" name="" rows="4" cols="20" placeholder="意見..." >默認(rèn)值</textarea>

3.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.說明
選擇器{} - 通過選擇器決定樣式是針對(duì)哪個(gè)標(biāo)簽寫的(在內(nèi)聯(lián)樣式表中沒有這個(gè)結(jié)構(gòu))
屬性 - 屬性不是隨便寫的鞋既,必須是CSS提供的兩百多個(gè)屬性中的一個(gè)力九;
       屬性名和屬性值之間用冒號(hào)連接,多個(gè)屬性之間用分號(hào)隔開(如果沒有分號(hào)會(huì)導(dǎo)致后邊所有的屬性無效)  
       
3.CSS代碼寫在哪兒邑闺?
a.內(nèi)聯(lián)樣式表
將樣式表作為HTML中標(biāo)簽的style屬性值
內(nèi)聯(lián)樣式表只能針對(duì)一個(gè)標(biāo)簽有效

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

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

優(yōu)先級(jí):內(nèi)聯(lián)樣式表的優(yōu)先級(jí)最高;內(nèi)部樣式和外部樣式陡舅,誰后寫誰的優(yōu)先級(jí)就高

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(空格)

2.內(nèi)部樣式表
style標(biāo)簽中的內(nèi)容灾炭,必須也只能是css代碼
-->
<style type="text/css">
/內(nèi)部樣式,可以同時(shí)寫多個(gè)樣式表/
a{
color: yellowgreen;
background-color: sandybrown;

3.外部樣式表
a.link標(biāo)簽 - 導(dǎo)入外部文件
rel屬性:確定導(dǎo)入的文件功能颅眶;stylesheet - 設(shè)置樣式表 icon - 設(shè)置網(wǎng)頁圖標(biāo)
type屬性:確定文件類型; 文件類型/文件后綴; text/css - 文本/文件后綴是css
image/ico - 圖片/文件后綴是ico
href屬性: 需要導(dǎo)入的文件的文件路徑
-->

<link rel="stylesheet" type="text/css" href="css/css基礎(chǔ).css"/>

<link rel="icon" type="image/ico" href="img/aaa.ico"/>

</head>
<body>
    <!--style標(biāo)簽也可以放在body中-->
    <style type="text/css">

1.內(nèi)聯(lián)樣式表
body中每個(gè)有顯示效果的標(biāo)簽都有style屬性蜈出,用來設(shè)置當(dāng)前標(biāo)簽的樣式
style屬性值的引號(hào)中,寫的是CSS代碼
-->
<p style="color: #ff00ff; font-size: 40px;">我是內(nèi)聯(lián)樣式表</p>
<a >百度一下</a>
<div id="">
我是div
</div>
<a href="#">刷新</a>
<h1>我是標(biāo)題1</h1>

4.表格標(biāo)簽

表格標(biāo)簽(table-tr-td)
table標(biāo)簽 - 代表整個(gè)表格
tr標(biāo)簽 - 代表表格中的每一行
td標(biāo)簽 - 代表表格中的每一個(gè)單元格

        1.border   -  設(shè)置邊框?qū)挾龋▎挝皇窍袼兀?        設(shè)置整個(gè)表格的邊框?qū)挾忍涡铮瑫r(shí)設(shè)置每個(gè)單元的邊框?qū)挾葹?
        
        2.bordercolor -  設(shè)置邊框顏色
        html中的顏色值:a.顏色的英語單詞
                      b.rgb對(duì)應(yīng)的16進(jìn)制值铡原,前加#,例如:#ff0000(紅色)
                      
        3.cellspacing  -    設(shè)置表格中單元格和單元格之間商叹,以及單元和邊框之間的間距
        
        4.cellpadding  -   設(shè)置表格中的內(nèi)容到單元格邊框之間的距離
                                               默認(rèn)情況下燕刻,單元格的大小跟內(nèi)容的大小有關(guān)
        
        5.bgcolor  -  設(shè)置背景顏色
        作為table屬性  - 設(shè)置整個(gè)變革的背景顏色
        作為tr屬性  - 設(shè)置一行的背景顏色
        作為td屬性  - 設(shè)置一個(gè)單元格的背景顏色
        
        6.width - 設(shè)置寬度
        作為table屬性  -  設(shè)置整個(gè)列表的寬度
        作為td屬性  - 設(shè)置當(dāng)前td所在的列的寬度
        
        7.作為table屬性  -設(shè)置整個(gè)列表的高度
          作為tr屬性  - 設(shè)置一行的高度
          
        8.align  -設(shè)置
        
        注意:html中所有的屬性值都是寫在雙引號(hào)里面
    -->
    <table height="200" width="500" bordercolor="blue" cellspacing="0" cellpadding="5" bgcolor="bisque">

5.偽類選擇器

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

3.愛恨原則:當(dāng)同一個(gè)標(biāo)簽需要同時(shí)給多個(gè)狀態(tài)添加樣式的時(shí)候卵洗,要遵守愛恨原則:link-visited-hover-active
LoVeHAte
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市枯途,隨后出現(xiàn)的幾起案子忌怎,更是在濱河造成了極大的恐慌,老刑警劉巖酪夷,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榴啸,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡晚岭,警方通過查閱死者的電腦和手機(jī)鸥印,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人库说,你說我怎么就攤上這事狂鞋。” “怎么了潜的?”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵骚揍,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我啰挪,道長(zhǎng)信不,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任亡呵,我火速辦了婚禮抽活,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘锰什。我一直安慰自己下硕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開白布汁胆。 她就那樣靜靜地躺著梭姓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪沦泌。 梳的紋絲不亂的頭發(fā)上糊昙,一...
    開封第一講書人閱讀 51,775評(píng)論 1 307
  • 那天,我揣著相機(jī)與錄音谢谦,去河邊找鬼释牺。 笑死,一個(gè)胖子當(dāng)著我的面吹牛回挽,可吹牛的內(nèi)容都是我干的没咙。 我是一名探鬼主播,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼千劈,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼祭刚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起墙牌,我...
    開封第一講書人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤涡驮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后喜滨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捉捅,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年虽风,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了棒口。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寄月。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖无牵,靈堂內(nèi)的尸體忽然破棺而出漾肮,到底是詐尸還是另有隱情,我是刑警寧澤茎毁,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布克懊,位于F島的核電站,受9級(jí)特大地震影響充岛,放射性物質(zhì)發(fā)生泄漏保檐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一崔梗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧垒在,春花似錦蒜魄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至踢关,卻和暖如春伞鲫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背签舞。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工秕脓, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人儒搭。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓吠架,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親搂鲫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子傍药,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

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

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,247評(píng)論 1 41
  • <!DOCTYPE html> 入學(xué)登記 學(xué)號(hào): 性別: 男 女 姓名:...
    學(xué)python的鐵頭娃閱讀 115評(píng)論 0 0
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開發(fā)》時(shí)魂仍,所整理的筆記拐辽。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,340評(píng)論 0 7
  • 引言 在日常開發(fā)Android中,很多時(shí)候會(huì)遇到和WebView打交道擦酌,對(duì)CSS HTML JS不是很清楚的話是完...
    張文靖同學(xué)閱讀 2,842評(píng)論 0 11
  • 公司行情不好俱诸,昨天工資發(fā)下來了,看著可憐巴巴的工資幾乎一整天都沒說話仑氛,行情不好我多多少少也有原因乙埃,就說自己不夠努力...
    魏昌閱讀 145評(píng)論 0 0