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