1 form
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form標(biāo)簽</title>
</head>
<body>
<!--
1、form標(biāo)簽（表單）
專門用來進行用戶信息收集的一個標(biāo)簽诊县，一般要結(jié)合表單相關(guān)的標(biāo)簽使用才有意義
表單相關(guān)標(biāo)簽：input、select措左、textarea等
主要提供form中子標(biāo)簽的內(nèi)容的提交和重置功能
action屬性：提交路徑（接口）
methods屬性：提交方式（post/get）
2翎冲、input標(biāo)簽
input標(biāo)簽是表單相標(biāo)簽，可以在form標(biāo)簽中使用媳荒，也可以單獨使用
type屬性：input標(biāo)簽會因為type的不同抗悍，功能完全不一樣
name屬性：區(qū)分；提交（相當(dāng)于字典的key）钳枕，要不要給屬性賦值
主要看1）需不需要區(qū)分不同內(nèi)容缴渊；2）需不需要提交input標(biāo)簽的值
value屬性：value的意義會根據(jù)type值的不同而不一樣，但是表單提交時提交的都適合value值
-->
<form action="" method="get">
<!--
1)文本輸入框 - text
a. value屬性 - 給這個屬性賦值是在設(shè)置輸入框的默認值
修改輸入框中的內(nèi)容會改變這個屬性的值
b. placeholder - 輸入框為空時的默認顯示信息
c. maxlength - 輸入框最多能輸入的內(nèi)容的長度
-->
<font>賬號</font>
<input type="text" name="賬號" id="" value="" placeholder="請輸入賬號"/><br />
<!--
2)密碼輸入框 - password
a. value屬性 - 輸入框的默認值
b. placeholder - 輸入框為空時的默認顯示信息
c. maxlength - 輸入框最多能輸入的內(nèi)容的長度
-->
<font>密碼</font>
<input type="password" name="密碼" id="" value="" placeholder="請輸入密碼" maxlength="5"/>
<br />
<!--
3)單選按鈕（radio）
a. name屬性 - 如果多個選項是一組數(shù)據(jù)鱼炒，必須保證他們的name屬性一樣
才能多個選項單選
b. value屬性 - 不能顯示衔沼，只是用來提交的
c.checked屬性 - 給這個屬性賦值為checked，讓按鈕處于默認選中狀態(tài)
補充：可以通過將label的for屬性和input的id屬性保持一致昔瞧；
讓label和input關(guān)聯(lián)在一起
-->
<font>性別：</font>
<input type="radio" name="性別" id="11" value="男" /><label for="11">男</label>
<input type="radio" name="性別" id="22" value="女" checked="checked"/><label for="22">女</label>
<br />
<!--
4)復(fù)選框 - checkbox
-->
<input type="checkbox" name="愛好" id="11" value="餐飲" /><label for="11">餐飲</label>
<input type="checkbox" name="愛好" id="12" value="游戲" /><label for="12">游戲</label>
<input type="checkbox" name="愛好" id="13" value="旅游" /><label for="13">旅游</label>
<br />
<!--
5)普通按鈕 - button
a. value屬性 - 按鈕上顯示的內(nèi)容（input只能提供文字按鈕）
button雙標(biāo)簽可以使用圖片按鈕
-->
<input type="button" name="" id="" value="登錄" />
<button><img src="img/aaa.ico"/></button>
<!--
6）重置按鈕 - reset
重置當(dāng)前重置按鈕所在form便簽中所有的相關(guān)標(biāo)簽的值
-->
<input type="reset" name="" id="" value="重置" />
<!--
7）提交按鈕 - submit
以‘name=value’值的方式提交當(dāng)前form標(biāo)簽的內(nèi)容
-->
<input type="color" name="" id="" value="" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
2 下拉菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--
下拉菜單
select標(biāo)簽 - 整個下拉列表
option - 列表中的選項
optgroup - 一個列表選項分組指蚁，通過label屬性來設(shè)置分組名
（只是在顯示上對選項進行分區(qū)，不影響提交結(jié)果）
-->
<select name="city">
<option value="四川">四川省</option>
<option value="湖南">湖南省</option>
<option value="湖北">湖北省</option>
<option value="福建">福建省</option>
</select>
<br />
<select name="">
<optgroup label="四川省"></optgroup>
<option value="四川">成都</option>
<option value="湖南">綿陽</option>
<option value="湖北">南充</option>
<option value="福建">德陽</option>
<optgroup label="廣東省"></optgroup>
<option value="四川">廣州</option>
<option value="湖南">深圳</option>
<option value="湖北">東莞</option>
<option value="福建">佛山</option>
</select>
<br / >
<!--
2自晰、多行文本域 - textarea
提供一個可以換行輸入的輸入框
rows屬性 - 行數(shù)凝化，影響輸入框的默認高度
cols屬性 - 列數(shù)，影響輸入框的默認寬度
maxlength屬性 - 輸入的最大寬度
autofocus屬性 - 加載時酬荞，自動處于編輯狀態(tài)
-->
<textarea name="comment" rows="" cols="" maxlength="10"></textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>
3 無語意標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div便簽和span標(biāo)簽都是無語義標(biāo)簽
使用div一般用于對網(wǎng)頁中的內(nèi)容分塊和分組搓劫，
div會分行顯示瞧哟，span不會換行
-->
</body>
</html>
4 CSS基礎(chǔ)
<!--
1、什么是css
css又叫樣式表（層疊樣式表）枪向，是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)勤揩，專門用來針對網(wǎng)頁中的內(nèi)容
的布局和樣式。現(xiàn)在絕大部分使用的是css3
2秘蛔、怎么寫css
1）.語法
選擇器{屬性1:屬性值2;屬性2:屬性值2}
2）.說明
a.選擇器 - 選中需要設(shè)置樣式的標(biāo)簽陨亡；在內(nèi)聯(lián)樣式表中選擇需要省略
b.{} - 固定寫法
c.屬性 - 屬性以'屬性:屬性值'的形式成對出現(xiàn)，多個屬性要用分號隔開深员。
d.值 - 如果是數(shù)字表示大小数苫，數(shù)字后面必須加單位：px(像素)，em(空格數(shù))
顏色值：顏色的英文單詞（red,white）;#十六進制顏色值辨液；rgb(r,g,b);rgba(r,g,b,a),a是透明度
rgb顏色：r-red(0-255),g-green(0-255),b-blue(0-255)
rgb(255,0,0) == #ff0000 == 'red'
rgb(0,255,0) == #00ff00 == 'green'
rgb(0,0,255) == #0000ff == 'blue'
rgb(0,0,0) == #000000 == 'black'
rgb(255,255,255) == #ffffff == 'white'
透明度 - 0(完全透明) ~ 1(完全不透明)
3）寫在哪
內(nèi)聯(lián)樣式表：將樣式寫在標(biāo)簽的style屬性中
內(nèi)聯(lián)樣式表只作用于一個固定的標(biāo)簽
內(nèi)部樣式表：將樣式寫在style標(biāo)簽中
內(nèi)部樣式表只作用于當(dāng)前html文件中的所有標(biāo)簽
外部樣式表：將樣式寫入css文件中虐急，然后再html中通過link標(biāo)簽導(dǎo)入
可以作用于所有的html中的所有標(biāo)簽
復(fù)用性：外部>內(nèi)部>內(nèi)聯(lián)
優(yōu)先級：內(nèi)聯(lián)樣式表的優(yōu)先級不管什么情況都是最高、內(nèi)部和外部的優(yōu)先級誰先寫誰高
4)常見屬性
color - 設(shè)置標(biāo)簽中的字體顏色
background-color - 設(shè)置標(biāo)簽的背景顏色
font-size - 字體大小
width - 標(biāo)簽寬度
height - 標(biāo)簽高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--內(nèi)部樣式-->
<style type="text/css">
/*這個里面寫css代碼*/
div{
color: orange;
}
h1{
color: purple;
}
</style>
<!--3滔迈、外部樣式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
</head>
<body>
<!--1止吁、內(nèi)聯(lián)樣式-->
<p style="color: red;font-size: 30px;">hello CSS</p>
<div id="">
我是div
</div>
<h1 style="color: dodgerblue;">我是標(biāo)題</h1>
</body>
</html>
5 選擇器
<!--
1、什么是選擇器
通過選擇器選中標(biāo)簽
2燎悍、選擇器的寫法
1）元素選擇器（標(biāo)簽選擇器）
直接將標(biāo)簽名作為選擇器敬惦，選中當(dāng)前html中對應(yīng)的所有標(biāo)簽
列入：a{} - 選中當(dāng)前html中所有的a標(biāo)簽
2）id選擇器
（所有標(biāo)簽都有一個id屬性，值是自己設(shè)置谈山，但是要保證一個html中id的值唯一）
將標(biāo)簽的id屬性的值前面加#作為選擇器俄删，選擇id屬性值時指定值的標(biāo)簽
例如：#a - 選中當(dāng)前html中id值是a的標(biāo)簽
3)類選擇器（class選擇器）
將標(biāo)簽的class屬性的值前加.作為選擇器，選中class屬性值是指定值的標(biāo)簽
例如：.a - 選擇當(dāng)前html中class值是a的所有標(biāo)簽
4）通配符
將*作為選擇器奏路，選中當(dāng)前html中所有的標(biāo)簽
5）群組選擇器
將多個單獨的選擇器用逗號隔開來作為一個選擇器畴椰，選中每個獨立選擇器對應(yīng)的標(biāo)簽
p,a{} - 選中所有的p標(biāo)簽和a標(biāo)簽
div,#a{} - 選擇所有的div標(biāo)簽和id值是a的標(biāo)簽
#p1,.c1,.c2 - 選擇所有id是p1的標(biāo)簽和class值是c1,c2的標(biāo)簽
6）后代選擇器
將多個選擇器用空格隔開來作為一個選擇器
div p{} - 選中所有div標(biāo)簽中的p標(biāo)簽
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: red;
}
/*標(biāo)題選擇器*/
#a1{
font-size: 90px;
color: #800080;
}
.c1{
color: yellow;
}
.c2{
font-size: 50px;
}
</style>
</head>
<body>
<!--class屬性
1.一個html中相同的class值可以有多個
2.同一個標(biāo)簽的classs屬性值可以多個
-->
<p class="c1">我是段落1</p>
<div id="">
<div id="">
<p id="a1">我是段落2</p>
<!--這兒的h1標(biāo)簽有兩個值，分別是c1和c2-->
<h1 class="c1 c2">我是標(biāo)題1</h1>
</div>
</div>
<p>我是段落3</p>
<br />
<br />
<br />
<a href="">超鏈接1</a>
<div id="">
<a href=""></a>
<div id="">
<a href=""></a>
</div>
</div>
</body>
</html>
6 偽裝選擇器
<!--
1鸽粉、偽類選擇器
普通選擇器選中的是html中不同的標(biāo)簽斜脂；偽類選擇器選擇的是標(biāo)簽的不同狀態(tài)
2、語法
普通選擇器:狀態(tài){屬性1:屬性值1触机；屬性2:屬性值2}
1）link - 初始狀態(tài)帚戳；一般針對超鏈接（a標(biāo)簽）中進行設(shè)置
對a標(biāo)簽來說，link對應(yīng)的狀態(tài)是a標(biāo)簽從來沒有訪問過的狀態(tài)
2）visited - 超鏈接成功訪問過的狀態(tài)
3)hover - 鼠標(biāo)懸停在標(biāo)簽上對應(yīng)的狀態(tài)（不止針對超鏈接儡首，其他標(biāo)簽也常用）
4)active - 鼠標(biāo)按住標(biāo)簽不放對應(yīng)的狀態(tài)（主要作用在超鏈接和按鈕上）
3片任、選擇器的權(quán)重值
權(quán)重越大優(yōu)先級越高，內(nèi)聯(lián)選擇器的優(yōu)先級永遠最高
元素選擇器的權(quán)重：0001 == 1
class選擇器的權(quán)重：0010 == 2
id選擇器的權(quán)重：0100 == 4
偽類選擇器的權(quán)重：0100 == 1
群組選擇器的權(quán)重：看單獨每個選擇器的權(quán)重
后代選擇器的權(quán)重：所有選擇器的權(quán)重之和
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1)link*/
a:link{
color: rgb(150,150,150);
}
a:visited{
color: green;
}
a:hover{
color: red;
}
button:active{
background-color: #800080;
}
</style>
</head>
<body>
<a id="a1" >百度一下</a>
<p>段落</p>
<button>按鈕</button>
<a href="05-選擇器.html" target="_blank">打開選擇器</a>
</body>
</html>
