一、表單標簽
1、表單標簽：form標簽
表單標簽是用來收集用戶信息的，是一個容器，用來獲取這個標簽中相應的其他標簽（input標簽）的數(shù)據(jù)；可以將收集到的數(shù)據(jù)，通過method對應的方式，去發(fā)送請求（發(fā)送給action對應的接口）
2、input標簽：單標簽（沒有內(nèi)容只有屬性）
a、type屬性：決定input標簽的樣式
? ? ?text（默認值）：文本輸入框
? ? ?password:密碼輸入框
? ? ?radio：單選按鈕
? ? ?checkbox:復選按鈕
? ? ?buttton:普通按鈕
? ? ?reset:重置按鈕
? ? ?file:文件按鈕
注意：input標簽放在form外同樣可以使用，只是不能直接使用提交和重置功能。
b、name屬性：區(qū)分不同的input對應的值
c、value屬性：input標簽中的值
提交input中的數(shù)據(jù)給服務器的時候，是以name值=value值來提交的。
d、placeholder屬性：占位符（輸入框的提示信息）
e.maxlength屬性：約束輸入框能輸入的字符的最大個數(shù)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標簽</title>
</head>
<body>
<form method="get" action="">
<!--
a.文本輸入框
-->
<span>賬號：</span>
<input type="text" name="username" value="" placeholder="請輸入賬號" maxlength="設置輸入框能輸入的最大長度"/>
<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值：設置為這個按鈕選中提交對應的值
2、name值：如果多個按鈕只能選中一個，name
3、checked屬性：設置默認選中。
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.復選按鈕：checkbox
注意：
1、name值：同一組的數(shù)據(jù)對應的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
自動將當前form標簽中設置了name屬性的input標簽對應的值通過method方式提交給action接口。
-->
<input type="submit" name="" value="提交"/>
<!--
g.重置按鈕：reset
將當前form標簽中的input標簽中的值回到初始狀態(tài)
-->
<input type="reset" value="重置"/>
<!--
h.文件域：file
-->
<input type="file" />
<input type="date" />
</form>
</body>
</html>
二、下拉框和多行文本域
下拉和多行文本域可以放在form標簽中用于收集信息：
1、下拉菜單:select標簽
一個select標簽對應一個下拉菜單。菜單中的選項通過option來列舉。
a.selected屬性：設置默認選中顯示對象
2.對下拉菜單進行分組：可以通過optgroup標簽對下拉菜單進行分組，通過label對分組進行命名。
3、多行文本域：textarea
name:提交的數(shù)據(jù)對應的名字
rows:默認一屏的行數(shù)
cols:more的列數(shù)
placeholder:設置占位符
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標簽
-->
<button>注冊</button>
<button><img src="../day01-html/img/01.jpg" alt="" /></button>
</body>
</html>
三、div和span標簽
1、div和span
div和span標簽是空白標簽，沒有語義
一般用來做分組，將網(wǎng)頁分塊
div是塊級標簽，一行只能放一個標簽
span是行內(nèi)標簽，一行可以放多個標簽
2、塊級標簽和行內(nèi)標簽
塊級標簽：一個標簽占一行
h1-h6,p,ul,列表標簽,table標簽等。
行內(nèi)標簽：一行可以放多個行內(nèi)標簽
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基礎
css是web標準中的表現(xiàn)標準，用來規(guī)定網(wǎng)頁上的內(nèi)容的布局和樣式（css又叫樣式表）
目前廣泛使用的是css3
1、怎么來寫樣式表（CSS），寫在哪兒？
a、內(nèi)聯(lián)樣式表：
將樣式寫在標簽的style屬性中（每個可見標簽都有style屬性）
b、內(nèi)部樣式表：
將樣式表寫在head標簽中style標簽里面。
c、外部樣式表:
將樣式表寫在一個CSS文件中，然后在head標簽中通過link標簽導入。
注意：不管在什么情況下，內(nèi)聯(lián)樣式表的優(yōu)先級最高；內(nèi)部和外部的優(yōu)先級看誰后寫，誰的優(yōu)先級高；
2、固定語法
選擇器{屬性:屬性值;屬性2:屬性值2...}
說明：
a、選擇器：選擇器的作用是用來確定后面的樣式到底是給哪幾個標簽寫的。
b、屬性：屬性是css中本來就支持和擁有的屬性，屬性的順序可以隨意寫。
屬性和屬性值之間使用冒號連接;
屬性后面必須寫分號;
c、屬性值：
（1）數(shù)值：如果數(shù)值是用來表示大小，后面必須跟單位px或者%.
px -- 像素 ； % --- 百分比；
(2)顏色的表示方法：
a.顏色對應的英語單詞，
b.#加RGB對應的16進制值（一個顏色值對應2位16進制），
c.直接使用RGB值：rgb(R,G,B),rgba(R,G,B,Alpha(透明值))，其中R,G,B的取值范圍是0-255，Alpha:0-1;
3、常見的屬性
color：設置字體顏色
background-color:背景顏色
width:寬度
height：高度
font-size:字體大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
外部樣式
-->
<link rel="stylesheet" href="css/04-CSS基礎.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>我是標題1</h1>
<h1>我是標題2</h1>
<a href="">百度</a>
<img src="img/01.jpg" alt="" />
</body>
</html>
五、選擇器
一、選擇器
1、標簽/元素選擇器：直接將標簽名作為選擇器，同時選中網(wǎng)頁中所有同類型的標簽。
a{} -- 選中所有的a標簽
2、id選擇器：通過在id屬性值前加#，就是id選擇器。選中id=對應值的標簽；
id屬性：所有的標簽都有id屬性，并且設置的值必須唯一。
#p1{} -- 選中id值是p1的標簽。
3、class選擇器：通過在class屬性值前加.,就構成了類選擇器。選中class等于對應的值的標簽
.c1{} --- 選中所有class值是c1的標簽。
4、群組選擇器：多個選擇器中間使用逗號隔開；功能：選中逗號隔開的所有選擇器；
a,p,#p1,.c1{} -- 選中所有的a標簽，p標簽和所有id值為p1,class值為c1的選擇器。
5.包含選擇器：多個選擇器之間使用空格隔開。從前往后找，找到最后一個選擇器。
div .c1 p{} -- 選中div中class是c1的標簽中的p標簽。
6.通配符：直接將作為選擇器：當前頁面中所有的標簽。
二、選擇器的優(yōu)先級
通過不同的選擇器選中了同一個標簽，并且設置了同一個屬性，誰的優(yōu)先級高誰就有效。
看誰的優(yōu)先級高就看誰的權重值大。
權重值是一樣的情況下，誰后寫，誰的優(yōu)先級高。
偽類選擇器：0001
元素選擇器：0001
class選擇器：0010
id選擇器：0100
群組選擇器：直接看單獨的每一個的權重
包含選擇器：多個選擇器的權重和
通配符：0001
注意：不管選擇器的權重有多高，內(nèi)聯(lián)樣式表的優(yōu)先級都是最高的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意:在這個標簽中寫的代碼時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">我是標題1</h1>
</body>
</html>
六、偽類選擇器
前面的元素選擇器，id選擇器，class選擇器選中的都是標簽；
偽類選擇器是選中標簽的某個狀態(tài)。
偽類選擇器：選中某個標簽的不同狀態(tài)（一般適用于超鏈接和按鈕等）
1、語法：
標簽:狀態(tài){}
說明：
a.狀態(tài)：
link:初始狀態(tài)。(a標簽對應的初始狀態(tài)是沒有訪問成功過的狀態(tài))
visited:訪問后的狀態(tài)（使用a標簽）。
hover:鼠標懸停在標簽上對應的狀態(tài)。
active:被激活對應的狀態(tài)。--鼠標按下的時候?qū)臓顟B(tài)；
focus:成為焦點
標簽：可以是通過不同的選擇器去選中。
2.愛恨原則：LoVeHAte - 先愛后恨
如果想要給一個標簽同時給link，visited，hover,active的兩個或兩個以上設置樣式，必須遵守愛恨原則。
（如果不按愛恨原則可能會出問題，如果按照愛恨原則肯定不會出問題）
<!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>
