一仰迁、表單標(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)簽（沒有內(nèi)容只有屬性）
a辆童、type屬性：決定input標(biāo)簽的樣式
? ? ?text（默認值）：文本輸入框
? ? ?password:密碼輸入框
? ? ?radio：單選按鈕
? ? ?checkbox:復(fù)選按鈕
? ? ?buttton:普通按鈕
? ? ?reset:重置按鈕
? ? ?file:文件按鈕
注意：input標(biāo)簽放在form外同樣可以使用，只是不能直接使用提交和重置功能惠赫。
b把鉴、name屬性：區(qū)分不同的input對應(yīng)的值
c、value屬性：input標(biāo)簽中的值
提交input中的數(shù)據(jù)給服務(wù)器的時候，是以name值=value值來提交的庭砍。
d场晶、placeholder屬性：占位符（輸入框的提示信息）
e.maxlength屬性：約束輸入框能輸入的字符的最大個數(shù)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標(biāo)簽</title>
</head>
<body>
<form method="get" action="">
<!--
a.文本輸入框
-->
<span>賬號：</span>
<input type="text" name="username" value="" placeholder="請輸入賬號" maxlength="設(shè)置輸入框能輸入的最大長度"/>
<br />
<span>手機號：</span>
<input type="text" name="tel" value="" placeholder="請輸入電話號碼"/>
<br />
<!--
b.密碼輸入框：（password）
注意：value值是輸入框中輸入的內(nèi)容
-->
<span>密碼：</span>
<input type="password" name="password" id="" value="" placeholder="密碼"/>
<br />
<!--
c.單選按鈕：radio
注意：
1怠缸、value值：設(shè)置為這個按鈕選中提交對應(yīng)的值
2诗轻、name值：如果多個按鈕只能選中一個，name
3揭北、checked屬性：設(shè)置默認選中扳炬。
3、一組（name值一樣）單選按鈕在提交的時候只提交被選中按鈕的name和value值搔体。
-->
<input type="radio" name="sex" value="man" checked="checked"/><span>男</span>
<input type="radio" name="sex" value="woman"/><span>女</span>
<br />
<!--
d.復(fù)選按鈕：checkbox
注意：
1恨樟、name值：同一組的數(shù)據(jù)對應(yīng)的name值一樣。
-->
<input type="checkbox" name="hobby" value="籃球"/><span>籃球</span>
<input type="checkbox" name="hobby" value="乒乓球"/><span>乒乓球</span>
<input type="checkbox" name="hobby" value="羽毛球"/><span>羽毛球</span>
<input type="checkbox" name="hobby" value="英雄聯(lián)盟"/><span>英雄聯(lián)盟</span>
<br />
<!--
e.普通按鈕：(button)
value值：按鈕上顯示的值
-->
<input type="button" value="登錄"/>
<!--
f.提交按鈕：submit
自動將當(dāng)前form標(biāo)簽中設(shè)置了name屬性的input標(biāo)簽對應(yīng)的值通過method方式提交給action接口疚俱。
-->
<input type="submit" name="" value="提交"/>
<!--
g.重置按鈕：reset
將當(dāng)前form標(biāo)簽中的input標(biāo)簽中的值回到初始狀態(tài)
-->
<input type="reset" value="重置"/>
<!--
h.文件域：file
-->
<input type="file" />
<input type="date" />
</form>
</body>
</html>
二劝术、下拉框和多行文本域
下拉和多行文本域可以放在form標(biāo)簽中用于收集信息：
1、下拉菜單:select標(biāo)簽
一個select標(biāo)簽對應(yīng)一個下拉菜單计螺。菜單中的選項通過option來列舉。
a.selected屬性：設(shè)置默認選中顯示對象
2.對下拉菜單進行分組：可以通過optgroup標(biāo)簽對下拉菜單進行分組瞧壮，通過label對分組進行命名登馒。
3、多行文本域：textarea
name:提交的數(shù)據(jù)對應(yīng)的名字
rows:默認一屏的行數(shù)
cols:more的列數(shù)
placeholder:設(shè)置占位符
disabled:禁用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉和多行文本域</title>
</head>
<body>
<select name="city">
<option value="成都">成都</option>
<option value="北京">北京</option>
<option value="重慶">重慶</option>
</select>
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="綿陽" selected="selected">綿陽</option>
<option value="德陽">德陽</option>
<option value="宜賓">宜賓</option>
</optgroup>
<optgroup label="廣東省">
<option value="廣州">廣州</option>
<option value="中山">中山</option>
<option value="深圳">深圳</option>
<option value="佛山">佛山</option>
</optgroup>
</select>
<textarea name="message" rows="20" cols="30" placeholder="請輸入消息"></textarea>
<!--
3咆槽、按鈕：button標(biāo)簽
-->
<button>注冊</button>
<button><img src="../day01-html/img/01.jpg" alt="" /></button>
</body>
</html>
三陈轿、div和span標(biāo)簽
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,ul,列表標(biāo)簽,table標(biāo)簽等。
行內(nèi)標(biāo)簽：一行可以放多個行內(nèi)標(biāo)簽
img,a,input,select,textarea等胎许。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>
abc
</span>
<span>
abd
</span>
<div class="">
aaa
<a href="">百度</a>
<a href="">谷歌</a>
</div>
<div class="">
bbb
</div>
</body>
</html>
四峻呛、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蔚叨、固定語法
選擇器{屬性:屬性值;屬性2:屬性值2...}
說明：
a床蜘、選擇器：選擇器的作用是用來確定后面的樣式到底是給哪幾個標(biāo)簽寫的。
b蔑水、屬性：屬性是css中本來就支持和擁有的屬性邢锯，屬性的順序可以隨意寫。
屬性和屬性值之間使用冒號連接;
屬性后面必須寫分號;
c搀别、屬性值：
（1）數(shù)值：如果數(shù)值是用來表示大小丹擎，后面必須跟單位px或者%.
px -- 像素 ； % --- 百分比歇父；
(2)顏色的表示方法：
a.顏色對應(yīng)的英語單詞蒂培，
b.#加RGB對應(yīng)的16進制值（一個顏色值對應(yīng)2位16進制），
c.直接使用RGB值：rgb(R,G,B),rgba(R,G,B,Alpha(透明值))榜苫，其中R,G,B的取值范圍是0-255护戳，Alpha:0-1;
3、常見的屬性
color：設(shè)置字體顏色
background-color:背景顏色
width:寬度
height：高度
font-size:字體大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
外部樣式
-->
<link rel="stylesheet" href="css/04-CSS基礎(chǔ).css" />
<!--
內(nèi)部樣式表
-->
<style type="text/css">
h1{
background-color: salmon;
color:seagreen;
}
a{
font-size: 20px;
}
</style>
</head>
<body>
<!--
描述：內(nèi)聯(lián)樣式
-->
<p style="background-color: crimson;color: rgba(0,255,0,1);">樣式表的內(nèi)容</p>
<p>樣式表的語法</p>
<h1>我是標(biāo)題1</h1>
<h1>我是標(biāo)題2</h1>
<a href="">百度</a>
<img src="img/01.jpg" alt="" />
</body>
</html>
五垂睬、選擇器
一媳荒、選擇器
1、標(biāo)簽/元素選擇器：直接將標(biāo)簽名作為選擇器驹饺，同時選中網(wǎng)頁中所有同類型的標(biāo)簽钳枕。
a{} -- 選中所有的a標(biāo)簽
2、id選擇器：通過在id屬性值前加#赏壹，就是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的選擇器袜蚕。
5.包含選擇器：多個選擇器之間使用空格隔開糟把。從前往后找，找到最后一個選擇器牲剃。
div .c1 p{} -- 選中div中class是c1的標(biāo)簽中的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)先級都是最高的被辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意:在這個標(biāo)簽中寫的代碼時css代碼
元素選擇器*/
a{
color:salmon
}
/*id選擇器*/
#a1{
background-color: green;
}
/*class選擇器*/
.c1{
color: aqua;
}
</style>
</head>
<body>
<a class="c1" href="">超鏈接</a>
<div id="">
<a href="">超鏈接2</a>
</div>
<div id="">
<div id="">
<a id="a1" href="">超鏈接3</a>
</div>
</div>
<h1 class="c1">我是標(biāo)題1</h1>
</body>
</html>
六燎悍、偽類選擇器
前面的元素選擇器，id選擇器盼理，class選擇器選中的都是標(biāo)簽谈山；
偽類選擇器是選中標(biāo)簽的某個狀態(tài)。
偽類選擇器：選中某個標(biāo)簽的不同狀態(tài)（一般適用于超鏈接和按鈕等）
1榜揖、語法：
標(biāo)簽:狀態(tài){}
說明：
a.狀態(tài)：
link:初始狀態(tài)勾哩。(a標(biāo)簽對應(yīng)的初始狀態(tài)是沒有訪問成功過的狀態(tài))
visited:訪問后的狀態(tài)（使用a標(biāo)簽）抗蠢。
hover:鼠標(biāo)懸停在標(biāo)簽上對應(yīng)的狀態(tài)举哟。
active:被激活對應(yīng)的狀態(tài)。--鼠標(biāo)按下的時候?qū)?yīng)的狀態(tài)迅矛；
focus:成為焦點
標(biāo)簽：可以是通過不同的選擇器去選中妨猩。
2.愛恨原則：LoVeHAte - 先愛后恨
如果想要給一個標(biāo)簽同時給link，visited秽褒，hover,active的兩個或兩個以上設(shè)置樣式壶硅，必須遵守愛恨原則。
（如果不按愛恨原則可能會出問題销斟，如果按照愛恨原則肯定不會出問題）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: gray;
}
a:visited{
color: #008000;
}
a:hover{
color: red;
font-size: 100px;
}
a:active{
color: yellow;
}
input:focus{
outline: none;
}
</style>
</head>
<body>
<a >百度一下</a>
<input type="text" />
</body>
</html>
