表單標(biāo)簽和input標(biāo)簽
1.表單標(biāo)簽：form
這個(gè)標(biāo)簽作為一個(gè)容器垮卓，倆收集和提交這個(gè)標(biāo)簽中的其他
相關(guān)標(biāo)簽的數(shù)據(jù)孙乖，一般不會(huì)單獨(dú)使用
action屬性：設(shè)置提交路徑（借口）
method屬性：設(shè)置請求方式（post/get）
post：發(fā)送數(shù)據(jù)
get：接收數(shù)據(jù)
2.input標(biāo)簽
input是單標(biāo)簽
input標(biāo)簽可以單獨(dú)使用有梆，也可以和form配合使用
type屬性：這個(gè)值不一樣吨掌，input的功能完全不一樣
a洒扎。文本輸入框（type=text）和密碼輸入框（type=password）
type-text（明文輸入框）
type- password（密文輸入框）
name-隨便命名瓣履，用來對輸入內(nèi)容進(jìn)行說明。
數(shù)據(jù)提交的時(shí)候以name：value進(jìn)行提交材原。name的值會(huì)作為發(fā)送請求
的參數(shù)名沸久，value就是參數(shù)值
value - 指向的就是文本輸入框中的內(nèi)容
placeholder - 占位符，提示信息
maxlength - 限制輸入框輸入的最大字符個(gè)數(shù)
b余蟹。單選按鈕
type-radio
name - 注意：同一類信息的name名需要設(shè)置成一樣的值卷胯，
才能做到選擇一個(gè)，其他選擇取消
value - 需要設(shè)置值威酒，來告訴對應(yīng)的按鈕對應(yīng)值的意義
checked="checked"設(shè)置默認(rèn)選中狀態(tài)
c窑睁。復(fù)選按鈕
type- checkbox
name- 如果是同一類數(shù)據(jù)挺峡，name值也要設(shè)置成一樣的
value- 需要設(shè)置值，來告訴對應(yīng)的按鈕對應(yīng)值或意義
d担钮。普通按鈕
type- button
value - 設(shè)置按鈕上顯示的文字
e橱赠。type - submit（提交）
可以自動(dòng)提交當(dāng)前form標(biāo)簽中的所有設(shè)置了name屬性的標(biāo)簽值
f。重置按鈕
type - reset
可以將當(dāng)前form標(biāo)簽中所有的標(biāo)簽值回到初始值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form action="" method="get">
<input type="text" name="username" value="" placeholder="請輸入用戶名"
maxlength="8"/>
<input type="radio" name="sex" checked="checked" id="" value="男" />男
<input type="radio" name="sex" id="" value="女" />女
<input type="button" name="" id="" value="點(diǎn)我啊" />
<input type="submit" name="" id="" value="提交" />
<input type="password" name="password" id="" value="" placeholder="請輸入密碼"/>
<input type="checkbox" name="愛好" id="" value="網(wǎng)球" />網(wǎng)球
<input type="checkbox" name="" id="" value="籃球" />籃球
<input type="reset" name="重置" id="" value="重置" />
</form>
</body>
</html>
選擇下拉菜單和多行文本域
1.下拉菜單： select
name - 提交的時(shí)候用來區(qū)分不同的數(shù)據(jù)
value - 提交的時(shí)候提交的具體數(shù)據(jù)
內(nèi)容 - 顯示的部分
selected - 設(shè)置默認(rèn)選中
2.對下拉列表進(jìn)行分組 optgroup
lable 設(shè)置分組名
3.多行文本域：textarea
輸入的內(nèi)容可以多行顯示
rows 設(shè)置一屏最多顯示的行數(shù)
cols 設(shè)置一行最大的列數(shù)
<form action="" method="get">
<select name="city">
<option value ="成都">成都</option>
<option value ="廣州" selected="selected">廣州</option>
<option value ="上海">上海</option>
</select>
<select>
<optgroup label="四川">
<option value ="成都">成都</option>
<option value ="字樣">字樣</option>
</optgroup>
<optgroup label="荷蘭">
<option value ="洛陽">洛陽</option>
<option value ="鄭州" selected="selected">鄭州</option>
</optgroup>
<textarea rows="" cols="" name="不知道"
placeholder="你說哈">
span和div
div和span標(biāo)簽都是無語義標(biāo)簽箫津，
一般用來對網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分塊用的
一個(gè)div占一行狭姨； 多個(gè)sapan可以在一行顯示
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又叫樣式表
color -- 設(shè)置字體顏色 background-color -- 設(shè)置背景顏色 width -- 寬度 height --- 高度
2.css基本語法
基本結(jié)構(gòu)：
選擇器{屬性：屬性值；屬性2：屬性值2暖眼；...}
說明：
選擇器 -- 用來選中需要設(shè)置樣式的標(biāo)簽
{} -- 固定寫法
屬性 -- 必須是css提供的屬性惕耕，總共200多個(gè)
屬性值-- 根據(jù)屬性賦不同的值纺裁，如果屬性的值是用來表示大小的數(shù)字诫肠，
后面必須加單位 例如：px（像素）em（空格數(shù)）
css中的顏色值：a。顏色的英文單詞 b欺缘。#顏色對應(yīng)的6位16進(jìn)制值（#ff00）
c栋豫。rgb（r,g,b） rgba(r,g,b,alpha) ; r,g,b的取值范圍
0~255 a表示透明度，范圍是0~1谚殊，0是完全透明
屬性和屬性值之間用冒號(hào)隔開丧鸯， 屬性和屬性之間用分號(hào)隔開，屬性的順序除了特殊情況
其他的是任意的
3.怎么使用css
a嫩絮。在哪里寫css代碼
內(nèi)聯(lián)樣式：將樣式表寫在標(biāo)簽的style屬性中丛肢， 只對一個(gè)標(biāo)簽有效
內(nèi)部樣式：將樣式表寫在head中的style標(biāo)簽中， 只對當(dāng)前文件中的標(biāo)簽有效
外部樣式：將樣式表寫在外部的css文件中剿干，然后在head中通過link標(biāo)簽導(dǎo)入 蜂怎， 可以作用域所有的html文件
導(dǎo)入外部樣式 link標(biāo)簽導(dǎo)入外部文件 rel - 說明導(dǎo)入文件的功能 stylesheet（樣式表） icon（設(shè)置網(wǎng)頁圖標(biāo)） type -- 對文件類型進(jìn)行說明：文件類型/文件后綴 herf -- 導(dǎo)入文件的地址
內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高， 內(nèi)部樣式和外部樣式誰后寫誰的優(yōu)先級(jí)高置尔。
常用的選擇器：元素選擇器杠步，id選擇器，class選擇器榜轿，群組選擇器幽歼，父子選擇器，通配符
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.群組選擇器： 多個(gè)選擇器用逗號(hào)隔開作為一個(gè)選擇器皇型，同時(shí)選中所有選擇器對應(yīng)的標(biāo)簽
a泣刹，p{} -- 選中所有的a標(biāo)簽和p標(biāo)簽
.p1,img {}-- 選中所有的img和class值是p1的標(biāo)簽
#p1，#p2犀被，#p3{} --- 選中所有的id值是p1椅您，p2和p3的比起愛你
5.父子選擇器：多個(gè)選擇器用空格隔開作為一個(gè)選擇器，按順序依次往后找寡键，找到最后一層
選擇器對應(yīng)的標(biāo)簽掀泳。
用法： div div p{} -- 選中div里面的div里面的p標(biāo)簽
#d1 a{} -- 選擇id值是d1中的a標(biāo)簽
6.通配符：將*作為選擇器，選中當(dāng)前網(wǎng)頁的所有標(biāo)簽
用法： *{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#p1{
color: #0000FF; background-color: #008000; font-size: 40px;
}
.s{
color: black; font-size: 30px;
}
</style>
</head>
<body>
<p style="color: red; background-color: #FF8C00;">我是段落1</p>
<h1 id="p1">我是標(biāo)題1</h1>
<p class="s">
我是段落2
</p>
</body>
</html>
偽類選擇器
偽類選擇器是選中某個(gè)標(biāo)簽的不同狀態(tài)可以給不同狀態(tài)設(shè)置不同樣式
- link
標(biāo)簽:link - 選中標(biāo)簽初始狀態(tài)
a標(biāo)簽的初始狀態(tài)指的是a標(biāo)簽對應(yīng)的網(wǎng)址一次都沒有訪問成功的時(shí)候?qū)?yīng)的狀態(tài)
例如： a：link{}西轩； p：link{}员舵； #a2：link{}
2.visited; 訪問后的狀態(tài)
3.hover ： 鼠標(biāo)放在上面時(shí)候的狀態(tài)（懸停狀態(tài)）
4.active ： 鼠標(biāo)按住不放對應(yīng)的狀態(tài)
注意：使用偽類選擇器的時(shí)候要遵守愛恨原則（LoVeHAte）
（link visited hover active 依次寫），如果不遵守可能會(huì)導(dǎo)致某些樣式的無效
2.選擇器的優(yōu)先級(jí): 權(quán)重值越大藕畔，優(yōu)先級(jí)越高
元素選擇器的權(quán)重： 0001
class選擇器的權(quán)重：0010
id選擇器的權(quán)重： 0100
偽類選擇器的權(quán)重： 0001
群組選擇器權(quán)重： 單獨(dú)看每個(gè)選擇器的權(quán)重
父子選擇器權(quán)重： 所有選擇器權(quán)重之和
內(nèi)聯(lián)樣式的優(yōu)先級(jí)是最高的
<style type="text/css">
#p1{
color: #0000FF; background-color: #008000; font-size: 40px;
}
.s{
color: black; font-size: 30px;
}
a:link{color: #FF69B4;}
a:visited{color: black;}
a:hover{font-size: 30px;}
a:active{color: aqua;}
</style>
</head>
<body>
<p style="color: red; background-color: #FF8C00;">我是段落1</p>
<h1 id="p1">我是標(biāo)題1</h1>
<p class="s">
我是段落2
</p>
<a href="http//:www.baidu.com">百度</a>
<a >騰訊</a>
<a >新浪</a>
</body>
</html>
