01-表單標(biāo)簽和Input標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
1.表單標(biāo)簽: form
這個標(biāo)簽是作為一個容器翅睛，來收集和提交這個標(biāo)簽中的其他相關(guān)標(biāo)簽的數(shù)據(jù)铐殃。一般不會單獨(dú)使用们童。
action屬性：設(shè)置提交路徑(接口)
method屬性：設(shè)置請求方式(post/get)
<form action="" method="post">
</form>
2 input標(biāo)簽
input標(biāo)簽是單標(biāo)簽
input標(biāo)簽可以單獨(dú)使用伞租，也可以和form配合使用
type屬性：這個值不一樣之景，input的功能就不一樣
<form action="" method="get">
2.1 文本輸入框(type:text) 和密碼輸入框(type: password)
type - text(明文輸入框)
type - password (密文輸入框)
name - 隨便命名，用來對輸入的內(nèi)容進(jìn)行說明熊尉。
提交數(shù)據(jù)的時候以name:value形式進(jìn)行提交,name值會作為發(fā)送請求的參數(shù)名罐柳，value就參數(shù)值
value - 指向的就是文本輸入框中的內(nèi)容
placeholder - 占位符(提示信息)
maxlength - 限制輸入框能輸入的最大的字符個數(shù)
<input disabled="disabled" type="text" name="username" value="張三" placeholder="用戶名" maxlength="8"/>
<input type="text" name="tel" value="15300022703" placeholder="電話號碼"/>
<input type="password" name="password" value="" placeholder="密碼" maxlength="8"/>
2.2 單選按鈕
type - radio
name - 注意：同一類信息的name需要設(shè)置成一樣的值，才能做到狰住，選擇其中一個讓別的取消選中
value - 需要設(shè)置值张吉，來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)
<input type="radio" name="sex" value="boy" checked="checked"/>男
<input type="radio" name="sex" value="girl" />女
<input type="radio" name="sex" value="other" />其他
<br />
<input type="radio" name="marry" id="" value="yes" checked="checked"/>已婚
<input type="radio" name="marry" id="" value="no" />未婚
<br />
2.3 復(fù)選按鈕
type - checkbox
name - 如果是同一類數(shù)據(jù)，name值應(yīng)該設(shè)置成一樣的
value - 需要設(shè)置值催植，來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)
<input type="checkbox" name="hobby" id="" value="籃球" />籃球
<input type="checkbox" name="hobby" id="" value="足球" />足球
<input type="checkbox" name="hobby" id="" value="乒乓球" checked="checked"/>乒乓球
<input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" id="" value="排球" />排球
<input type="checkbox" name="hobby" id="" value="網(wǎng)球" />網(wǎng)球
<br />
2.4 普通按鈕
type - button
value - 設(shè)置按鈕上顯示的文字
disabled - 禁用
<input type="button" value="點(diǎn)我啊~" disabled="disabled"/>
<button>點(diǎn)我啊~</button>
<button><img src="img/luffy2.png"/></button>
<br />
2.5 提交按鈕
type - submit
可以自動提交當(dāng)前form標(biāo)簽中的所有設(shè)置了name屬性的標(biāo)簽的值
<input type="submit" />
2.6 重置按鈕
type - reset
可以將當(dāng)前form標(biāo)簽中所有的標(biāo)簽的設(shè)置為初始狀態(tài)的值
<input type="reset" name="" id="" value="重置" />
</form>
<form action="" method="get">
<!--其他的input標(biāo)簽-->
<input type="color" name="color" id="" value="" />
<!--<input type="date" name="date" id="" value="" />-->
<input type="datetime-local" name="time" id="" value="" />
<input type="email" name="" id="" value="" />
<!--<input type="file" name="" id="" value="" />-->
<!--<input type="hidden" name="" id="" value="" />-->
<!--<input type="image" name="img" id="" value="img/luffy1.png"/>-->
<input type="submit" value=""/>
</form>
</body>
</html>
02-下拉菜單和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
1.下拉菜單: select - option -
name - 提交的時候用來區(qū)分不同的數(shù)據(jù)
value - 提交的時候提交的具體數(shù)據(jù)
內(nèi)容 - 顯示的部分(只能是文字)
selected - 設(shè)置默認(rèn)選中
<select name="city">
<option value="成都">成都</option>
<option value="重慶">重慶</option>
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select>
<select name="">
<!--對下拉列表進(jìn)行分組： optgroup
label屬性 - 設(shè)置分組名
-->
<optgroup label="四川省"></optgroup>
<option value="">成都</option>
<option>雅安</option>
<option>德陽</option>
<option>綿陽</option>
<option>自貢</option>
<optgroup label="河南省"></optgroup>
<option value="">鄭州</option>
<option>安陽</option>
</select>
2.多行文本域: textarea
輸入的內(nèi)容可以多行顯示
rows - 設(shè)置一屏最多能顯示的行數(shù)
cols - 設(shè)置一行的最大的列數(shù)
內(nèi)容 - 相當(dāng)于value
<textarea name="message" rows="4" cols="30" placeholder="意見...." maxlength="200">你好肮蛹。。</textarea>
<input type="submit" value=""/>
</form>
</body>
</html>
03-div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
div和span標(biāo)簽都是無語義標(biāo)簽创南，一般用來對網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分塊用的
一個div占一行伦忠；多個span可以在一行顯示
<div id="">
aaa
</div>
<div id="">
bbb
</div>
<span id="">
aaaaaaa
</span>
<span id="">
bbbbbbb
</span>
</body>
</html>
04-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; 屬性3:屬性名3....}
說明：
選擇器 - 用來選中/確定需要設(shè)置樣式的標(biāo)簽
{} - 固定寫法
屬性 - 必須是CSS提供的屬性昆码，總共200多個
屬性值 - 根據(jù)屬性賦不同的值。如果屬性的值是用來表示大小數(shù)字邓深，后面必須加單位未桥。例如：px(像素)、em(空格)
CSS中的顏色值：
a.顏色的英文單詞
b.#顏色值對應(yīng)的6位16進(jìn)制值（#ff00, #00ff00）
c.rgb(r,g,b) rgba(r,g,b,a);r,g,b的取值范圍是0-255芥备，a表示透明度冬耿，取值范圍是0-1
屬性和屬性值之間用冒號隔開，多個屬性之間用分號隔開萌壳；屬性的順序出特殊情況外是任意的
3. 在哪兒寫CSS代碼
內(nèi)聯(lián)樣式：將樣式表寫在標(biāo)簽的style屬性中 --- 樣式只對一個標(biāo)簽有效
內(nèi)部樣式：將樣式表寫在head中的style標(biāo)簽 --- 樣式只對當(dāng)前html文件中標(biāo)簽有效
外部樣式：將樣式表寫在外部的css文件中亦镶，然后在head中通過link標(biāo)簽導(dǎo)入 --- 樣式可以作用于所有的html
內(nèi)聯(lián)樣式的優(yōu)先級最高, 內(nèi)部樣式和外部樣式誰后寫，誰的優(yōu)先級高 -- 后寫會的屬性值會覆蓋先寫的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
link標(biāo)簽
link標(biāo)簽 - 導(dǎo)入外部文件
rel屬性 - 說明導(dǎo)入的文件的功能袱瓮，stylesheet(添加樣式表), icon(設(shè)置網(wǎng)頁圖標(biāo))
type屬性 - 對導(dǎo)入的文件類型進(jìn)行說明: 文件類型/文件后綴
href屬性 - 導(dǎo)入的文件地址
<!--設(shè)置網(wǎng)頁圖標(biāo)-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
<!--內(nèi)部樣式-->
<style type="text/css">
/*這兒寫的代碼是CSS代碼*/
p{
/*設(shè)置文字顏色*/
color: green;
}
h1{
/*設(shè)置背景顏色*/
background-color: sandybrown;
/*設(shè)置字體大小*/
font-size: 20px;
}
</style>
<!--導(dǎo)入一個外部樣式-->
<link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
</head>
<body>
<a >百度一下</a>
<p>我是一個段落</p>
<h1>我是一個標(biāo)題</h1>
<p>我是一個段落2</p>
<!--內(nèi)聯(lián)樣式-->
<div id="" style="height: 100px; background-color: red;">
</div>
</body>
</html>
05-CSS選擇器
選擇器{屬性1: 屬性值1;....}
選擇器 - 選中需要添加樣式的標(biāo)簽
常用的選擇器：元素選擇器缤骨、id選擇器、class選擇器尺借、群組選擇器绊起、父子選擇器、統(tǒng)配符
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.群組選擇器: 多個選擇器用逗號隔開作為一個選擇器笋鄙，同時選中所有選擇器對應(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.父子選擇器：多個選擇器用空格隔開作為一個選擇器，按順序依次往后找萧落，找到最后一層選擇器對應(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)簽
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--內(nèi)部樣式-->
<style type="text/css">
/*元素選擇器*/
p{
color: darkcyan;
}
/*id選擇器
* 選中id值是p3的所有的標(biāo)簽
*/
#p3{
background-color: silver;
}
/*class選擇器
* 選中class值是p2的所有標(biāo)簽
*/
.p2{
background-color: yellow;
}
/*群組選擇器*/
.p2, #p3{
color: red;
}
/*父子選擇器*/
div div a{
font-size: 50px;
}
*{
color: black;
}
</style>
</head>
<body>
<div id="">
<div id="">
<a id="p3" >百度一下3</a>
</div>
<p>我是段落1</p>
<p>我是段落11</p>
<a id="p3" >百度一下2</a>
</div>
<div id="">
<p class="p2">我是段落2</p>
<p id="p3">我是段落3</p>
<p>我是段落4</p>
</div>
<a id="p3" >百度一下1</a>
</body>
</html>
06-偽類選擇器
1.偽類選擇器
偽類選擇器是選中某個標(biāo)簽的不同的狀態(tài)≌裔可以給不同狀態(tài)設(shè)置不同的樣式
a.link
標(biāo)簽:link{} - 選中初始狀態(tài) (a標(biāo)簽的初始狀態(tài)指的是a對應(yīng)的網(wǎng)址一次都沒有訪問成功的時候?qū)?yīng)的狀態(tài))
例如：
a:link{}; p:link{}; #a1:link{} .a2:link, #a1:link{}
b.visited: 訪問后的狀態(tài)
c.hover: 鼠標(biāo)懸停在標(biāo)簽上對應(yīng)的狀態(tài)
d.active: 鼠標(biāo)按住不放對應(yīng)的狀態(tài)
注意：使用偽類選擇器的時候要遵守愛恨原則（LoVeHAte）,如果不遵守可能會導(dǎo)致某些狀態(tài)的樣式無效
2.選擇器的優(yōu)先級: 權(quán)重值越大陨倡，優(yōu)先級越高。如果權(quán)重值相同许布，后寫的優(yōu)先級高
元素選擇器權(quán)重: 0001 - 1
class選擇器權(quán)重: 0010 - 2
id選擇器權(quán)重：0100 - 4
偽類選擇器權(quán)重：0001 - 1
群組選擇器權(quán)重：單獨(dú)看每個選擇器的權(quán)重
父子選擇器權(quán)重：所有選擇器權(quán)重之和
內(nèi)聯(lián)樣式的優(yōu)先級是最高的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*初始狀態(tài)*/
a:link{
color: darkgoldenrod;
}
/*訪問后的狀態(tài)*/
a:visited{
color: seagreen;
}
/*鼠標(biāo)懸停狀態(tài)*/
a:hover{
color: red;
/*font-size: 30px;*/
}
/*鼠標(biāo)按住不放時對應(yīng)的狀態(tài)*/
a:active{
color: yellowgreen;
}
/*2*/
.p11{
color: blue;
}
/*1+4=5*/
/*div #p1{
color: deeppink;
}*/
/*4*/
#p1{
color: salmon;
}
/*4*/
#p1{
color: green;
}
/*1*/
p{
color: red;
}
/*1*/
a,p{
color: yellow;
}
/*1+1=2*/
div p{
color: purple;
}
/*1+4+4=9*/
body #d1 #p1{
color: red;
}
</style>
</head>
<body>
<div id="d1">
<p id="p1" class="p11" style="color: black;">我是段落1</p>
</div>
<a >第一章</a>
<a >第二章</a>
<a >第三章</a>
</body>
</html>
