一、表單標簽和input標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表單標簽: form
這個標簽是作為一個容器，來收集和提交這個標簽中的其他相關(guān)標簽的數(shù)據(jù)。一般不會單獨使用。
action屬性：設(shè)置提交路徑(接口)
method屬性：設(shè)置請求方式(post/get)
-->
<form action="" method="post">
</form>
<!--2 input標簽
input標簽是單標簽
input標簽可以單獨使用，也可以和form配合使用
type屬性：這個值不一樣，input的功能就不一樣
-->
<form action="" method="get">
<!--2.1 文本輸入框(type:text) 和密碼輸入框(type: password)
type - text(明文輸入框)
type - password (密文輸入框)
name - 隨便命名，用來對輸入的內(nèi)容進行說明。
提交數(shù)據(jù)的時候以name:value形式進行提交,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è)置默認選中狀態(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 復選按鈕
type - checkbox
name - 如果是同一類數(shù)據(jù)，name值應(yīng)該設(shè)置成一樣的
value - 需要設(shè)置值，來告訴別人選中按鈕對應(yīng)值或者意義
checked - 設(shè)置默認選中狀態(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="點我啊~" disabled="disabled"/>
<button>點我啊~</button>
<button><img src="img/luffy2.png"/></button>
<br />
<!--2.5 提交按鈕
type - submit
可以自動提交當前form標簽中的所有設(shè)置了name屬性的標簽的值
-->
<input type="submit" />
<!--2.6 重置按鈕
type - reset
可以將當前form標簽中所有的標簽的設(shè)置為初始狀態(tài)的值
-->
<input type="reset" name="" id="" value="重置" />
</form>
<form action="" method="get">
<!--其他的input標簽-->
<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>
二、下拉菜單和多行文本域
<!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è)置默認選中
-->
<select name="city">
<option value="成都">成都</option>
<option value="重慶">重慶</option>
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select>
<select name="">
<!--對下拉列表進行分組： 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)容 - 相當于value
-->
<textarea name="message" rows="4" cols="30" placeholder="意見...." maxlength="200">你好。。</textarea>
<input type="submit" value=""/>
</form>
</body>
</html>
三、div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span標簽都是無語義標簽，一般用來對網(wǎng)頁中的標簽進行分組和分塊用的
一個div占一行；多個span可以在一行顯示
-->
<div id="">
aaa
</div>
<div id="">
bbb
</div>
<span id="">
aaaaaaa
</span>
<span id="">
bbbbbbb
</span>
</body>
</html>
四、CSS基礎(chǔ)
1.什么是CSS
CSS就是web標準中的表現(xiàn)標準，專門用來對網(wǎng)頁標簽進行布局和設(shè)置樣式的一門語言。
目前一般使用CSS3,CSS又叫樣式表
常用CSS屬性
color -> 設(shè)置字體顏色
background-color -> 設(shè)置背景顏色
width -> 寬度
height -> 高度
2.CSS基本語法
結(jié)構(gòu)：
選擇器{屬性: 屬性值; 屬性2: 屬性值2; 屬性3:屬性名3....}
說明：
選擇器 - 用來選中/確定需要設(shè)置樣式的標簽
{} - 固定寫法
屬性 - 必須是CSS提供的屬性，總共200多個
屬性值 - 根據(jù)屬性賦不同的值。如果屬性的值是用來表示大小數(shù)字，后面必須加單位。例如：px(像素)、em(空格)
CSS中的顏色值：a.顏色的英文單詞 b.#顏色值對應(yīng)的6位16進制值（#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)樣式：將樣式表寫在標簽的style屬性中 --- 樣式只對一個標簽有效
內(nèi)部樣式：將樣式表寫在head中的style標簽 --- 樣式只對當前html文件中標簽有效
外部樣式：將樣式表寫在外部的css文件中，然后在head中通過link標簽導入 --- 樣式可以作用于所有的html
內(nèi)聯(lián)樣式的優(yōu)先級最高, 內(nèi)部樣式和外部樣式誰后寫，誰的優(yōu)先級高 -- 后寫會的屬性值會覆蓋先寫的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--link標簽
link標簽 - 導入外部文件
rel屬性 - 說明導入的文件的功能，stylesheet(添加樣式表), icon(設(shè)置網(wǎng)頁圖標)
type屬性 - 對導入的文件類型進行說明: 文件類型/文件后綴
href屬性 - 導入的文件地址
-->
<!--設(shè)置網(wǎng)頁圖標-->
<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>
<!--導入一個外部樣式-->
<link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
</head>
<body>
<a >百度一下</a>
<p>我是一個段落</p>
<h1>我是一個標題</h1>
<p>我是一個段落2</p>
<!--內(nèi)聯(lián)樣式-->
<div id="" style="height: 100px; background-color: red;">
</div>
</body>
</html>
五、CSS選擇器
選擇器{屬性1: 屬性值1;....}
選擇器 - 選中需要添加樣式的標簽
常用的選擇器：元素選擇器、id選擇器、class選擇器、群組選擇器、父子選擇器、統(tǒng)配符
1.元素選擇器: 將標簽名作為選擇器，選中指定的標簽。
用法：標簽名{}
2.id選擇器: 將標簽中的id屬性的值作為選擇器，選擇id值對應(yīng)的標簽
用法：#id值{}
3.class選擇器:將標簽中的class屬性的值作為選擇器，選中class值對應(yīng)的標簽
用法：.class值{}
4.群組選擇器: 多個選擇器用逗號隔開作為一個選擇器，同時選中所有選擇器對應(yīng)的標簽
a,p{} -- 選中所有的a標簽和p標簽
.p1, img{} -- 選中所有的img和class值是p1的標簽
#p2,#p3,p{} -- 選中所有id值是p2和p3的標簽，以及所有的p標簽
5.父子選擇器：多個選擇器用空格隔開作為一個選擇器，按順序依次往后找，找到最后一層選擇器對應(yīng)的標簽
div div p{} -- 選中div里面的div里面的p標簽
#d1 a -- 選中id值是d1的標簽中的a標簽
6.通配符: 將*作為選擇器，選中當前網(wǎng)頁中所有的標簽
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--內(nèi)部樣式-->
<style type="text/css">
/*元素選擇器*/
p{
color: darkcyan;
}
/*id選擇器
* 選中id值是p3的所有的標簽
*/
#p3{
background-color: silver;
}
/*class選擇器
* 選中class值是p2的所有標簽
*/
.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>
六、偽類選擇器
1.偽類選擇器
偽類選擇器是選中某個標簽的不同的狀態(tài)。可以給不同狀態(tài)設(shè)置不同的樣式
a.link
標簽:link{} - 選中初始狀態(tài) (a標簽的初始狀態(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: 鼠標懸停在標簽上對應(yīng)的狀態(tài)
d.active: 鼠標按住不放對應(yīng)的狀態(tài)
注意：使用偽類選擇器的時候要遵守愛恨原則（LoVeHAte）,如果不遵守可能會導致某些狀態(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)重：單獨看每個選擇器的權(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;
}
/*鼠標懸停狀態(tài)*/
a:hover{
color: red;
/*font-size: 30px;*/
}
/*鼠標按住不放時對應(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>
