一.表單標(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)
2.input標(biāo)簽
input標(biāo)簽是單標(biāo)簽
input標(biāo)簽可以單獨(dú)使用愧怜,也可以和form配合使用
type屬性:這個(gè)值不一樣盼玄,input的功能就不一樣
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ù)
2.2單選按鈕
type - radio
name - 注意:同一類信息的name需要設(shè)置成一樣的值缭黔,才能做到食茎,選擇其中一個(gè)讓別的取消選中
value - 需要設(shè)置值,來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)
2.3復(fù)選按鈕
type - checkbox
name - 如果是同一類數(shù)據(jù)馏谨,name值應(yīng)該設(shè)置成一樣的
value - 需要設(shè)置值别渔,來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)
2.4普通按鈕
type - button
value - 設(shè)置按鈕上顯示的文字
disabled - 禁用
2.5提交按鈕
type -- submit
可以自動提交當(dāng)前form標(biāo)簽中所有設(shè)置了所有屬性的標(biāo)簽的值
2.6 重置按鈕
type - reset
可以將當(dāng)前for標(biāo)簽中所有的標(biāo)簽的設(shè)置為初始的值
二.下拉菜單和多行文本域
1.下拉菜單:select - option
name - 條的時(shí)候用來區(qū)分不同的數(shù)據(jù)
value - 提交的時(shí)候提交的具體數(shù)據(jù)
內(nèi)容 - 顯示的部分(只能是文字)
selected - 設(shè)置默認(rèn)選中
2.多行文本域:textarea
輸入的內(nèi)容可以是多行顯示
rows - 設(shè)置一屏最多顯示的列數(shù)
cils -- 設(shè)置一行的最大的列數(shù)
內(nèi)容 - 相當(dāng)于value
三.div和span
div和span標(biāo)簽都是無語義標(biāo)簽,一般來對網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分塊用的
一個(gè)div占一行惧互;多個(gè)span可以在一行顯示
四.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)簽
link標(biāo)簽
link標(biāo)簽 -- 導(dǎo)入外部文件
rel屬性 -- 說明導(dǎo)入的文件的功能荚斯,stylesheet(添加樣式表)埠居,icon(設(shè)置網(wǎng)頁圖標(biāo))
type屬性 -- 對導(dǎo)入的文件類型進(jìn)行說明:文件類型/文件后綴
href屬性 -- 到日的文件地址
五.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)簽
*{}
六.偽類選擇器
偽類選擇器是選中某個(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)先級是最高的