day-20課程總結(jié)

細(xì)線表格:

1.不設(shè)置border,設(shè)置cellspacing的值為表格線的寬度
2.設(shè)置整個表格的背景顏色為表格線的顏色蜈垮,然后在設(shè)置每個單元格的背景顏色和整個表格的背景顏色不一樣

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

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

action屬性:設(shè)置提交地址
method屬性:提交方式(get/post)
點提交按鈕提交的時候锡垄,將這個表單中所有所有相關(guān)標(biāo)簽以name=value的形式按照method屬性提供的提交方式题画,提交給action屬性對應(yīng)的接口

form標(biāo)簽提供了兩大功能:a.統(tǒng)一提交 b.重置

2.input標(biāo)簽

既可以放在form標(biāo)簽中,也可以不放在form標(biāo)簽中單獨使用
type屬性 - type對應(yīng)的值不一樣压储,inp標(biāo)簽體現(xiàn)的功能不一樣
a.text - 文本輸入框
name屬性 - 專門用來區(qū)分不同的信息鲜漩,相當(dāng)于字典中的key
value屬性 - 標(biāo)簽內(nèi)容,指向輸入框中的內(nèi)容
placeholder屬性 - 當(dāng)輸入框匯總沒有內(nèi)容的時候集惋,顯示的提示消息
maxlength屬性 - 設(shè)置輸入框最大能輸入的文字個數(shù)
b.password - 密碼輸入框
name屬性 - 專門用來區(qū)分不同的信息孕似,相當(dāng)于字典中key
value屬性 - 標(biāo)簽內(nèi)容,指向輸入框中的內(nèi)容
placeholder屬性 - 當(dāng)輸入框中沒有內(nèi)容的時候芋膘,顯示的提示信息
maxlength屬性 - 設(shè)置輸入框中能夠輸入的最大文字個數(shù)
c.radio - 單選按鈕
name屬性 - 要求同一組的數(shù)據(jù)的name屬性值必須一樣,才能單選
value屬性 - 不可見的鳞青,專門用于數(shù)據(jù)的提交;或者區(qū)分選中的值
checked屬性 - 讓單選框按鈕處于選中狀態(tài)
d.CheckBox - 復(fù)選框
name屬性 - 要求同一組數(shù)據(jù)的name屬性值必須一樣为朋,才能單選
value屬性 - 不可見的臂拓,專門用于數(shù)據(jù)的提交,或者區(qū)分被選中的值
checked屬性 - 讓復(fù)選框按鈕處于選中狀態(tài)
e.button - 普通按鈕
value屬性 - 決定按鈕上顯示的文字
f.sumbit - 提交按鈕
點擊提交按鈕后會自動提交當(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)

下拉菜單(select-option)

a.select標(biāo)簽 - 代表整個下拉菜單
name屬性 - 區(qū)分和提交
b.option標(biāo)簽 - 下拉菜單中的選項
內(nèi)容 - 顯示部分
value屬性 - 提交的內(nèi)容
c.optgroup標(biāo)簽
顯示效果上對下拉菜單進(jìn)行分組
label屬性 - 給分組設(shè)置名字

d.selected屬性 - 設(shè)置默認(rèn)選中

多行文本輸入框(textarea)

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

div和span

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

css

1.什么是css
css是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn),專門負(fù)責(zé)網(wǎng)頁中內(nèi)容的布局和樣式
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代碼寫在哪里匿级?
1.內(nèi)聯(lián)樣式表
將樣式表作為html中標(biāo)簽的style屬性值
內(nèi)聯(lián)樣式表只針對一個標(biāo)簽有效
2.內(nèi)部樣式表
將樣式表作為head標(biāo)簽中style標(biāo)簽的內(nèi)容
內(nèi)部樣式表對當(dāng)前html中的所有標(biāo)簽都有效
3.外部樣式表
將樣式表寫在一個css文件中,通過link導(dǎo)入
外部樣式表針對所有html文件中的所有標(biāo)簽
優(yōu)先級 內(nèi)聯(lián)樣式表的優(yōu)先級最高染厅,內(nèi)聯(lián)樣式表和外部樣式表痘绎,誰后寫誰的優(yōu)先級就高

重用屬性補(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(空格)
style標(biāo)簽中的內(nèi)容,必須也只能寫css代碼 - style標(biāo)簽也可以寫在body中涩馆,只是習(xí)慣寫在head中
3.外部樣式表
a.link標(biāo)簽:導(dǎo)入外部文件
rel屬性:確定導(dǎo)入的文件功能行施; stylesheet - 樣式表 icon - 設(shè)置網(wǎng)頁圖標(biāo)
type屬性:確定文件類型允坚;文件類型/文件后綴 text/css - 文本/文件后綴是css img/ico - 圖片/文件后綴是ico
href屬性 : 需要導(dǎo)入文件的文件路徑
4.內(nèi)聯(lián)樣式表
body中每個有顯示效果的標(biāo)簽都有style屬性,用來設(shè)置當(dāng)前標(biāo)簽的樣式
style屬性值的引號中悲龟, 寫的是css代碼

選擇器

選擇器{屬性名1:屬性值1屋讶;屬性名2:屬性值2..........}
css提供的選擇器大概有十幾種冰寻,常見的:

1.標(biāo)簽選擇器:直接將標(biāo)簽名作為選擇器须教,選中當(dāng)前html中所有指定的標(biāo)簽 例如 a{} - 選中當(dāng)前html中所有的a標(biāo)簽

2.id選擇器:將標(biāo)簽的id屬性值前面加#作為選擇器,選擇所有id是指定值的標(biāo)簽 例如:#text{} - 選中當(dāng)前網(wǎng)頁中所有id屬性值是text的標(biāo)簽

3.class選擇器(類型選擇器):將標(biāo)簽中class屬性值前面叫.作為選擇器斩芭,選中所有class是指定值的標(biāo)簽 例如 - .text{} - 選中當(dāng)前所有class屬性值是text的標(biāo)簽

4.群組選擇器:將多個選擇器用逗號隔開作為一個選擇器轻腺,同時選中每個單獨的選擇器,選中的所有的標(biāo)簽 例如 p,a,.text,#test{} 選中所有的p標(biāo)簽划乖,a標(biāo)簽和class值是text以及id值是test的標(biāo)簽

5.后代選擇器:將多個選擇器用空格隔開作為一個選擇器贬养,從前往后一層一層的找,找到最后一個選擇去對應(yīng)的標(biāo)簽 例如 div .test #text{} - 選中div標(biāo)簽中class值是test的標(biāo)簽中id值是text的標(biāo)簽

6.通配符:將*作為選擇器琴庵,選中當(dāng)前網(wǎng)頁中所有的標(biāo)簽

text-decoration:underling 給文字添加下劃線
overline - 上劃線
line-through - 刪除線
none - 去掉下劃線

偽類選擇器

偽類選擇器是用來選中標(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)簽上的時候的狀態(tài)
4)active - 激活狀態(tài)迷殿,鼠標(biāo)按下沒有彈起的時候的狀態(tài)

3愛恨原則:當(dāng)同一個標(biāo)簽需要同時給多個狀態(tài)添加樣式的時候儿礼,要遵守愛恨原則

link-visited-hover-active
LoVeHAte

web標(biāo)準(zhǔn)

結(jié)構(gòu)標(biāo)準(zhǔn) - html - 覺得網(wǎng)頁中的內(nèi)容
表現(xiàn)標(biāo)準(zhǔn) - css - 決定網(wǎng)頁中的內(nèi)容的樣式和布局
行為標(biāo)準(zhǔn) - JavaScript - 決定網(wǎng)頁中的內(nèi)容的變化

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市庆寺,隨后出現(xiàn)的幾起案子蚊夫,更是在濱河造成了極大的恐慌,老刑警劉巖懦尝,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件知纷,死亡現(xiàn)場離奇詭異,居然都是意外死亡陵霉,警方通過查閱死者的電腦和手機(jī)琅轧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來踊挠,“玉大人乍桂,你說我怎么就攤上這事≈贡希” “怎么了模蜡?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長扁凛。 經(jīng)常有香客問我忍疾,道長,這世上最難降的妖魔是什么谨朝? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任卤妒,我火速辦了婚禮甥绿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘则披。我一直安慰自己共缕,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布士复。 她就那樣靜靜地躺著图谷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪阱洪。 梳的紋絲不亂的頭發(fā)上便贵,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天,我揣著相機(jī)與錄音冗荸,去河邊找鬼承璃。 笑死,一個胖子當(dāng)著我的面吹牛蚌本,可吹牛的內(nèi)容都是我干的盔粹。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼程癌,長吁一口氣:“原來是場噩夢啊……” “哼舷嗡!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起席楚,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤咬崔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后烦秩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體垮斯,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年只祠,在試婚紗的時候發(fā)現(xiàn)自己被綠了兜蠕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡抛寝,死狀恐怖熊杨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情盗舰,我是刑警寧澤晶府,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站钻趋,受9級特大地震影響川陆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蛮位,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一较沪、第九天 我趴在偏房一處隱蔽的房頂上張望鳞绕。 院中可真熱鬧,春花似錦尸曼、人聲如沸们何。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽冤竹。三九已至,卻和暖如春解幽,著一層夾襖步出監(jiān)牢的瞬間贴见,已是汗流浹背烘苹。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工躲株, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人镣衡。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓霜定,卻偏偏與公主長得像,于是被迫代替她去往敵國和親廊鸥。 傳聞我的和親對象是個殘疾皇子望浩,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,860評論 2 361

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

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)惰说。 注意:講述HT...
    kismetajun閱讀 27,522評論 1 45
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的磨德,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,907評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案吆视? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,761評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理典挑,服務(wù)發(fā)現(xiàn),斷路器啦吧,智...
    卡卡羅2017閱讀 134,715評論 18 139
  • 日常執(zhí)業(yè)過程中有一類常見咨詢問題,就是隨著離婚率升高般堆,對于未成年孩子的姓名變更問題日漸凸顯在孝,因為一般情況下孩...
    2b89364d4208閱讀 2,037評論 0 1