01.表單標(biāo)簽
02.下拉、多行文本龟梦、按鈕
03.div和span
04.CSS基礎(chǔ)
05.選擇器
06.偽類選擇器
01.表單標(biāo)簽
1.表單標(biāo)簽：form標(biāo)簽
表單標(biāo)簽是用來收集用戶信息的全陨，是一個容器看疙，用來獲取這個標(biāo)簽中相應(yīng)的其他標(biāo)簽(input標(biāo)簽)的數(shù)據(jù)
可以將收集到的數(shù)據(jù)，通過method對應(yīng)的方式源葫，去發(fā)送請求(發(fā)送給action對應(yīng)的接口)
2.input標(biāo)簽
單標(biāo)簽
a.type屬性：決定input標(biāo)簽的樣式
text(默認(rèn))：文本輸入框
password：密碼輸入框
radio：單選按鈕
注意：input標(biāo)簽放在form外邊同樣可以使用痢掠，只是不能直接使用重置和提交功能
a.文本輸入框：
1.name屬性：區(qū)分不同的input對應(yīng)值驱犹，對標(biāo)簽的顯示沒有影響
2.value屬性：input標(biāo)簽中的值嘲恍，相當(dāng)于內(nèi)容(文本輸入框中輸入的內(nèi)容就是value的值)
提交input中的數(shù)據(jù)給服務(wù)器的時候，是以name值=value值來提交的
3.placeholder屬性：占位符(輸入框的提示信息)
4.maxlength屬性：約束輸入框能輸入的字符的最大個數(shù)
<input type="text" name="username" value="" placeholder="賬號" maxlength="8"/>
<input type="text" name="tel" value="" placeholder="手機號"/>
b.密碼輸入框：(password)
注意：value值是輸入框中輸入的內(nèi)容
<input type="password" name="password" placeholder="密碼"/>
c.單選按鈕：(radio)
注意：
1.value值：設(shè)置為這個按鈕選中提交對應(yīng)的值
2.name值：如果多個按鈕只能選中一個着绷，那么這些按鈕對應(yīng)name值必須一致
3.一組(name值一樣)單選按鈕在提交的時候只提交被選中的按鈕的name值和value值
4.checked屬性：設(shè)置默認(rèn)選中
<input type="radio" name="sex" value="boy" checked="checked"/><span>男</span>
<input type="radio" name="sex" value="girl" /><span>女</span>
- d.多選按鈕
<input type="checkbox" name="hobby"/><span>籃球</span>
<input type="checkbox" name="hobby"/><span>乒乓球</span>
<input type="checkbox" name="hobby"/><span>羽毛球</span>
<input type="checkbox" name="hobby"/><span>排球</span>
- e.普通按鈕：(button)
value值：按鈕上顯示的內(nèi)容
<input type="button" value="登錄"/>
- f.提交按鈕：(submit)
自動將當(dāng)前form標(biāo)簽中設(shè)置了name屬性的input標(biāo)簽對應(yīng)的值通過method方式提交給action對應(yīng)的接口
<input type="submit" value="提交" />
- g.重置標(biāo)簽
讓當(dāng)前form標(biāo)簽標(biāo)簽中的input標(biāo)簽的值回到初始狀態(tài)
<input type="reset" value="重置 "/>
- h.文件域：（file）
<input type="file" name="icon" id="" value="" />
02.下拉、多行文本锌云、按鈕
下拉和多行文本域可以放在form標(biāo)簽中用于收集信息
1.下拉菜單：select標(biāo)簽
一個select標(biāo)簽對應(yīng)一個下拉菜單荠医，菜單中的選項要通過option來列舉
- selected屬性：設(shè)置默認(rèn)被選中的選項
<select name="city">
<option value="成都">成都</option>
<option value="北京" selected="selected">北京</option>
<option value="重慶">重慶</option>
<option value="沈陽">沈陽</option>
</select>
2.對下拉菜單進(jìn)行分組
- 可以通過optgroup標(biāo)簽對下拉菜單進(jìn)行分組，通過label屬性對分組進(jìn)行分組命名
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="德陽">德陽</option>
<option value="樂山">樂山</option>
<option value="眉山">眉山</option>
<option value="自貢">自貢</option>
</optgroup>
<optgroup label="廣東省">
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
<option value="中山">中山</option>
<option value="佛山">佛山</option>
</optgroup>
</select>
3.多行文本域：textarea標(biāo)簽
name：提交的數(shù)據(jù)對應(yīng)的名字
rows：默認(rèn)一屏的行數(shù)
cols：默認(rèn)的列數(shù)
placeholder：設(shè)置占位符
disabled：禁用
maxlength：約束能輸入的最大的字符個數(shù)
<textarea name="message" cols="20" rows="20" placeholder="200字以內(nèi)" disabled="disabled"></textarea>
4.按鈕：button標(biāo)簽
- 文字按鈕
<button>注冊</button>
- 圖片按鈕
<button><img src="img/微信截圖_20180918111251.png" alt="" /></button>
03.div和span
1.div和span
div和span標(biāo)簽是空白標(biāo)簽,沒有語義.
一般用來做分組(將網(wǎng)頁分塊)
div：塊級標(biāo)簽（一行只能放一個標(biāo)簽）
span：行內(nèi)標(biāo)簽（一行可以放多個標(biāo)簽）
2.塊級標(biāo)簽和行內(nèi)標(biāo)簽
塊級標(biāo)簽：一個標(biāo)簽占一行
h1-h6桑涎，p彬向，列表標(biāo)簽（ul\ol\dl），table攻冷，hr等
行內(nèi)標(biāo)簽：一行可以放多個行內(nèi)標(biāo)簽
img娃胆，a，input等曼，select里烦，textarea
<span >
abc
</span>
<span >
aaa
</span>
<div >
<a href="">百度</a>
</div>
<div >
<a href="">新浪</a>
<a href="">谷歌</a>
</div>
04.CSS基礎(chǔ)
CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，用來規(guī)定網(wǎng)頁上內(nèi)容的布局和樣式(css又叫樣式表)
目前廣泛使用css3
1.怎么來寫樣式表（css）禁谦，寫在哪胁黑？
a.內(nèi)聯(lián)樣式表
講樣式寫在標(biāo)簽的style屬性中(每個可見標(biāo)簽都有style屬性)b.內(nèi)部樣式表
將樣式表寫在head標(biāo)簽中style標(biāo)簽里面c.外部樣式表
講樣式表寫在一個css文件中，然后再head標(biāo)簽中通過link標(biāo)簽來導(dǎo)入注意：不管在什么情況下州泊，內(nèi)聯(lián)樣式表的優(yōu)先級最高丧蘸，內(nèi)部和外部的優(yōu)先級看誰先、后寫遥皂，誰的優(yōu)先級就高
2.固定語法
選擇器(屬性1：屬性值1力喷；屬性2：屬性值2....)
說明：
- a.選擇器：作用是用來確定后面的樣式到底是給哪個/哪幾個標(biāo)簽寫的
- b.屬性：屬性是css中本來就支持和擁有的屬性，屬性的順序可以隨意些演训。
屬性和屬性值之間使用冒號連接
屬性后面必須寫分號 - c.屬性值：
（1）數(shù)值：如果數(shù)值用來表示大小弟孟，后面必須跟單位px或者%
px --- 像素 % --- 百分比(父類對應(yīng)的寬度或者高度是確定的)
（2）顏色：顏色對應(yīng)的英語單詞
#加R-G-B對應(yīng)的16進(jìn)制值（一個顏色值對應(yīng)2位16進(jìn)制）
直接使用RGB值：rgb（R,G,B），rgba(R,G,B,Alpha) R,G,B的取值范圍是0~255
3.常見的屬性
color：設(shè)置字體顏色
background-color：背景顏色
width：寬度
height：高度
font-size：字體大小
<!--外部樣式的寫法-->
<link rel="stylesheet" href="css/04-css基礎(chǔ).css" />
<!--內(nèi)部樣式表-->
<style type="text/css">
h1{
background-color: rgba(0,255,0,0.1);
color: saddlebrown;
}
a{
font-size: 20px;
}
</style>
</head>
<body>
<!--內(nèi)聯(lián)樣式表-->
<p style="background-color: aqua; color: red;">樣式表的類型</p>
<p style="font-size: 30px;">樣式表的語法</p>
<h1>我是標(biāo)題1</h1>
<h1>我是標(biāo)題2</h1>
<a href="">百度一下</a>
<img src="img/微信截圖_20180918111251.png"/>
</body>
05.選擇器
選擇器
1.標(biāo)簽/元素選擇器：將標(biāo)簽名作為選擇器样悟，同時選中網(wǎng)頁中所有同類型的標(biāo)簽
a{ } --- 選中所有的a標(biāo)簽
2.id選擇器：通過在id屬性值前加#披蕉，就構(gòu)成了id選擇器，選中id等于對應(yīng)的值的標(biāo)簽
id屬性：所有的標(biāo)簽都有id屬性乌奇，并且設(shè)置的值必須唯一
#p1{} --- 選中的id值是p1的標(biāo)簽
3.class選擇器：通過在class屬性值前加 . ,就構(gòu)成了類選擇器没讲，選中class等于對應(yīng)的值的標(biāo)簽
.c1{ } -- 選中所有class值是c1的標(biāo)簽
4.群組選擇器：多個選擇器中間使用逗號隔開，選中多有的單獨的選擇器
a,p,#p1,.c1{ } --- 選中所有的a標(biāo)簽礁苗，p標(biāo)簽和所有的id值是p1以及class值是c1的標(biāo)簽
5.包含選擇器：多個選擇器之間使用空格隔開爬凑。從前往后找，找到最后一個選擇器
div .c1 p{ } --- 選中div中class是c1的p標(biāo)簽
6.通配符：直接將作為選擇器试伙，作用是選中當(dāng)前頁面中所有的標(biāo)簽
選擇器的優(yōu)先級
通過不同的選擇器選中了同一個標(biāo)簽嘁信，并且設(shè)置了同一個屬性于样，誰的優(yōu)先級高誰就有效∨司福看誰的優(yōu)先級高穿剖，就看誰的權(quán)重值大
權(quán)重值是一樣的情況下，誰后寫卦溢，誰的優(yōu)先級高
偽類選擇器：0001
元素選擇器：0001
class選擇器：0010
id選擇器：0100
群組選擇器：直接看單獨每一個權(quán)重
包含選擇器：多個選擇器的權(quán)重和
通配符：0001
注意：不管選擇器的權(quán)重有多大糊余，內(nèi)聯(lián)樣式的優(yōu)先級都是最高的
<style type="text/css">
/*注意：在這個標(biāo)簽中寫的代碼是CSS代碼*/
/*元素選擇器*/
a{
color: blueviolet;
}
/*id選擇器*/
#a1{
background-color: greenyellow;
}
/*class選擇器*/
.c1{
color: slateblue;
}
/*群組選擇器*/
a,p{
font-size: 60px;
}
/*包含選擇器*/
div .c1 p{
background-color: pink;
}
/*通配符*/
*{
background-color: sandybrown;
width: 100%;
}
</style>
</head>
<body>
<a href="">超鏈接1</a>
<div>
<a href="">超鏈接2</a>
</div>
<div>
<div>
<a id="a1">超鏈接3</a>
</div>
</div>
<p id="a1">我是段落1</p>
<h1 class="c1">我是標(biāo)題1</h1>
</body>
06.偽類選擇器
前面的元素選擇器、id選擇器单寂、class選擇器選中的都是標(biāo)簽贬芥。
偽類選擇器選中的是標(biāo)簽的某個狀態(tài)
偽類選擇器：選中某個標(biāo)簽的不同狀態(tài)（一般使用與超鏈接和按鈕等）
1.語法： --- 標(biāo)簽：狀態(tài)
標(biāo)簽：狀態(tài){ }
說明：
a.狀態(tài)
link：初始狀態(tài)(a標(biāo)簽對應(yīng)的初始狀態(tài)是沒有訪問過對應(yīng)的狀態(tài))
visited：訪問后的狀態(tài)（使用a標(biāo)簽）
hover：鼠標(biāo)懸停在標(biāo)簽上對應(yīng)的狀態(tài)
active：被激活對應(yīng)的狀態(tài)（一般用于超鏈接）
focus：成為焦點(在輸入框用的比較多)b.標(biāo)簽：可以通過不同的選擇器去選中
2.愛恨原則：LoVeHAte ----- 先愛后恨
如果想要給一個標(biāo)簽同時給link\visited\hover\active中的兩個或兩個以上的狀態(tài)設(shè)置樣式，必須遵守愛恨原則
(如果不按愛恨原則可能會問題宣决，如果按照愛恨原則肯定不會出問題)
<style type="text/css">
a:link{
color: pink;
}
a:visited{
color: goldenrod;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 30px;
}
input:focus{
outline: none;
}
</style>
