1.表單標(biāo)簽和input標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表單標(biāo)簽: form
這個(gè)標(biāo)簽是作為一個(gè)容器，來(lái)收集和提交這個(gè)標(biāo)簽中的其他相關(guān)標(biāo)簽的數(shù)據(jù)。一般不會(huì)單獨(dú)使用口柳。
action屬性：設(shè)置提交路徑(接口)
method屬性：設(shè)置請(qǐng)求方式(post/get)
-->
<form action="" method="post">
</form>
<!--2 input標(biāo)簽
input標(biāo)簽是單標(biāo)簽
input標(biāo)簽可以單獨(dú)使用，也可以和form配合使用
type屬性：這個(gè)值不一樣在刺，input的功能就不一樣
-->
<form action="" method="get">
<!--2.1 文本輸入框(type:text) 和密碼輸入框(type: password)
type - text(明文輸入框)
type - password (密文輸入框)
name - 隨便命名，用來(lái)對(duì)輸入的內(nèi)容進(jìn)行說(shuō)明。
提交數(shù)據(jù)的時(shí)候以name:value形式進(jìn)行提交,name值會(huì)作為發(fā)送請(qǐng)求的參數(shù)名蚣驼，value就參數(shù)值
value - 指向的就是文本輸入框中的內(nèi)容
placeholder - 占位符(提示信息)
maxlength - 限制輸入框能輸入的最大的字符個(gè)數(shù)
-->
<input disabled="disabled" type="text" name="username" value="張三" placeholder="用戶名" maxlength="8"/>
<input type="text" name="tel" value="15300022703" placeholder="電話號(hào)碼"/>
<input type="password" name="password" value="" placeholder="密碼" maxlength="8"/>
<!--2.2 單選按鈕
type - radio
name - 注意：同一類信息的name需要設(shè)置成一樣的值忍燥，才能做到，選擇其中一個(gè)讓別的取消選中
value - 需要設(shè)置值隙姿，來(lái)告訴別人選中按鈕對(duì)應(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è)置值，來(lái)告訴別人選中按鈕對(duì)應(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)提交當(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>
2.下拉菜單和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--1.下拉菜單: select - option -
name - 提交的時(shí)候用來(lái)區(qū)分不同的數(shù)據(jù)
value - 提交的時(shí)候提交的具體數(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="">
<!--對(duì)下拉列表進(jìn)行分組： optgroup
label屬性 - 設(shè)置分組名
-->
<optgroup label="四川省"></optgroup>
<option value="">成都</option>
<option>雅安</option>
<option>德陽(yáng)</option>
<option>綿陽(yáng)</option>
<option>自貢</option>
<optgroup label="河南省"></optgroup>
<option value="">鄭州</option>
<option>安陽(yáng)</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>
3.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span標(biāo)簽都是無(wú)語(yǔ)義標(biāo)簽，一般用來(lái)對(duì)網(wǎng)頁(yè)中的標(biāo)簽進(jìn)行分組和分塊用的
一個(gè)div占一行欲鹏；多個(gè)span可以在一行顯示
-->
<div id="">
aaa
</div>
<div id="">
bbb
</div>
<span id="">
aaaaaaa
</span>
<span id="">
bbbbbbb
</span>
</body>
</html>
4.CSS基礎(chǔ)
<!--
1.什么是CSS
CSS就是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)机久，專門用來(lái)對(duì)網(wǎng)頁(yè)標(biāo)簽進(jìn)行布局和設(shè)置樣式的一門語(yǔ)言。
目前一般使用CSS3,CSS又叫樣式表
常用CSS屬性
color -> 設(shè)置字體顏色
background-color -> 設(shè)置背景顏色
width -> 寬度
height -> 高度
2.CSS基本語(yǔ)法
結(jié)構(gòu)：
選擇器{屬性: 屬性值; 屬性2: 屬性值2; 屬性3:屬性名3....}
說(shuō)明：
選擇器 - 用來(lái)選中/確定需要設(shè)置樣式的標(biāo)簽
{} - 固定寫法
屬性 - 必須是CSS提供的屬性赔嚎，總共200多個(gè)
屬性值 - 根據(jù)屬性賦不同的值膘盖。如果屬性的值是用來(lái)表示大小數(shù)字，后面必須加單位尤误。例如：px(像素)侠畔、em(空格)
CSS中的顏色值：a.顏色的英文單詞 b.#顏色值對(duì)應(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
屬性和屬性值之間用冒號(hào)隔開软棺，多個(gè)屬性之間用分號(hào)隔開；屬性的順序出特殊情況外是任意的
3. 在哪兒寫CSS代碼
內(nèi)聯(lián)樣式：將樣式表寫在標(biāo)簽的style屬性中 --- 樣式只對(duì)一個(gè)標(biāo)簽有效
內(nèi)部樣式：將樣式表寫在head中的style標(biāo)簽 --- 樣式只對(duì)當(dāng)前html文件中標(biāo)簽有效
外部樣式：將樣式表寫在外部的css文件中尤勋，然后在head中通過(guò)link標(biāo)簽導(dǎo)入 --- 樣式可以作用于所有的html
內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高, 內(nèi)部樣式和外部樣式誰(shuí)后寫喘落，誰(shuí)的優(yōu)先級(jí)高 -- 后寫會(huì)的屬性值會(huì)覆蓋先寫的
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--link標(biāo)簽
link標(biāo)簽 - 導(dǎo)入外部文件
rel屬性 - 說(shuō)明導(dǎo)入的文件的功能，stylesheet(添加樣式表), icon(設(shè)置網(wǎng)頁(yè)圖標(biāo))
type屬性 - 對(duì)導(dǎo)入的文件類型進(jìn)行說(shuō)明: 文件類型/文件后綴
href屬性 - 導(dǎo)入的文件地址
-->
<!--設(shè)置網(wǎng)頁(yè)圖標(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)入一個(gè)外部樣式-->
<link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
</head>
<body>
<a >百度一下</a>
<p>我是一個(gè)段落</p>
<h1>我是一個(gè)標(biāo)題</h1>
<p>我是一個(gè)段落2</p>
<!--內(nèi)聯(lián)樣式-->
<div id="" style="height: 100px; background-color: red;">
</div>
</body>
</html>
5.CSS選擇器
<!--
選擇器{屬性1: 屬性值1;....}
選擇器 - 選中需要添加樣式的標(biāo)簽
常用的選擇器：元素選擇器最冰、id選擇器瘦棋、class選擇器、群組選擇器暖哨、父子選擇器赌朋、統(tǒng)配符
1.元素選擇器: 將標(biāo)簽名作為選擇器，選中指定的標(biāo)簽鹿蜀。
用法：標(biāo)簽名{}
2.id選擇器: 將標(biāo)簽中的id屬性的值作為選擇器箕慧，選擇id值對(duì)應(yīng)的標(biāo)簽
用法：#id值{}
3.class選擇器:將標(biāo)簽中的class屬性的值作為選擇器，選中class值對(duì)應(yīng)的標(biāo)簽
用法：.class值{}
4.群組選擇器: 多個(gè)選擇器用逗號(hào)隔開作為一個(gè)選擇器茴恰，同時(shí)選中所有選擇器對(duì)應(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è)選擇器斩熊，按順序依次往后找往枣，找到最后一層選擇器對(duì)應(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)頁(yè)中所有的標(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>
6.偽類選擇器
<!--
1.偽類選擇器
偽類選擇器是選中某個(gè)標(biāo)簽的不同的狀態(tài)》指裕可以給不同狀態(tài)設(shè)置不同的樣式
a.link
標(biāo)簽:link{} - 選中初始狀態(tài) (a標(biāo)簽的初始狀態(tài)指的是a對(duì)應(yīng)的網(wǎng)址一次都沒有訪問(wèn)成功的時(shí)候?qū)?yīng)的狀態(tài))
例如：a:link{}; p:link{}; #a1:link{} .a2:link, #a1:link{}
b.visited: 訪問(wèn)后的狀態(tài)
c.hover: 鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)
d.active: 鼠標(biāo)按住不放對(duì)應(yīng)的狀態(tài)
注意：使用偽類選擇器的時(shí)候要遵守愛恨原則（LoVeHAte）,如果不遵守可能會(huì)導(dǎo)致某些狀態(tài)的樣式無(wú)效
2.選擇器的優(yōu)先級(jí): 權(quán)重值越大圾另，優(yōu)先級(jí)越高。如果權(quán)重值相同雕沉，后寫的優(yōu)先級(jí)高
元素選擇器權(quán)重: 0001 - 1
class選擇器權(quán)重: 0010 - 2
id選擇器權(quán)重：0100 - 4
偽類選擇器權(quán)重：0001 - 1
群組選擇器權(quán)重：?jiǎn)为?dú)看每個(gè)選擇器的權(quán)重
父子選擇器權(quán)重：所有選擇器權(quán)重之和
內(nèi)聯(lián)樣式的優(yōu)先級(jí)是最高的
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*初始狀態(tài)*/
a:link{
color: darkgoldenrod;
}
/*訪問(wèn)后的狀態(tài)*/
a:visited{
color: seagreen;
}
/*鼠標(biāo)懸停狀態(tài)*/
a:hover{
color: red;
/*font-size: 30px;*/
}
/*鼠標(biāo)按住不放時(shí)對(duì)應(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>
