1. 表單標(biāo)簽（form）
- 專門用來進(jìn)行用戶信息收集的一個(gè)標(biāo)簽，一般要結(jié)合表單相關(guān)的標(biāo)簽來使用才有意義
- 表單相關(guān)標(biāo)簽：input、select、textarea等
- 主要提供form中子標(biāo)簽的內(nèi)容的提交和重置功能
- action屬性：提交路徑（接口）
- method屬性：提交方式（post/get）
<form action="" method="get">
</form>
2.input標(biāo)簽
- input標(biāo)簽是表單相關(guān)標(biāo)簽，可以在form標(biāo)簽中使用，也可以單獨(dú)使用
-
type屬性：input標(biāo)簽會(huì)因?yàn)閠ype的不同，功能完全不一樣
-
name屬性：用于區(qū)分或者提交（相當(dāng)于字典的key）；要不要給這個(gè)屬性賦值，主要看：a.需不需要區(qū)分不同的內(nèi)容 b.需不需要提交這個(gè)input標(biāo)簽的值
-
value屬性：value的意義會(huì)根據(jù)type值的不同而不一樣；但是表單提交的時(shí)候提交的都是value的值
1）文本輸入框：type="text"
- value屬性：給這個(gè)屬性賦值是在設(shè)置輸入框的默認(rèn)值; 修改輸入框中的內(nèi)容，會(huì)改變這個(gè)屬性的值
- placeholder屬性：輸入框?yàn)榭盏臅r(shí)候的默認(rèn)顯示信息
- maxlength屬性：輸入框最多能輸入的內(nèi)容的長(zhǎng)度
<font>賬號(hào):</font>
<input type="text" name="tel" value="" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" maxlength="6"/>
2）密碼輸入框：type="password"
- value屬性：給這個(gè)屬性賦值是在設(shè)置輸入框的默認(rèn)值; 修改輸入框中的內(nèi)容，會(huì)改變這個(gè)屬性的值
- placeholder屬性：輸入框?yàn)榭盏臅r(shí)候的默認(rèn)顯示信息
- maxlength屬性：輸入框最多能輸入的內(nèi)容的長(zhǎng)度
<font>密碼:</font>
<input type="password" name="pw" id="" value="123456" maxlength="10"/>
3）單選按鈕：type="radio"
- name屬性：如果多個(gè)選項(xiàng)是一組數(shù)據(jù)必須保證它們的name屬性值一樣才能做到多個(gè)選項(xiàng)單選
- value屬性：不能顯示，只能用來提交的
- checked屬性：給這個(gè)屬性賦值為checked讓按鈕處于默認(rèn)選中狀態(tài)
- 可以通過將label的for屬性和input的id屬性保持一致，讓label和input進(jìn)行關(guān)聯(lián)
<font>性別:</font>
<input type="radio" name="sex" id="sex1" value="男" checked="checked" /><label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女" /><label for="sex2">女</label>
4）復(fù)選按鈕：type="checkbox"
- name屬性：如果多個(gè)選項(xiàng)是一組數(shù)據(jù)必須保證它們的name屬性值一樣
- value屬性：不能顯示，只能用來提交的
- checked屬性：給這個(gè)屬性賦值為checked讓按鈕處于默認(rèn)選中狀態(tài)
<input type="checkbox" name="interest" id="in1" value="餐飲" /><label for="in1">餐飲</label>
<input type="checkbox" name="interest" id="in2" value="游戲" /><label for="in2">游戲</label>
<input type="checkbox" name="interest" id="in3" value="旅游" /><label for="in3">旅游</label>
5）普通按鈕：type="button"
<input type="button" id="" value="登錄" />
// 補(bǔ)充：button標(biāo)簽
<button>登錄</button>
<button><img src="img/aaa.ico"/></button>
6）重置按鈕：type="reset"
- 重置當(dāng)前重置按鈕所在的form標(biāo)簽中的所有的相關(guān)標(biāo)簽的值
<input type="reset" name="" id="" value="重置" />
7）提交按鈕：type="submit"
- 以 “name=value” 的方式提交當(dāng)前form標(biāo)簽的內(nèi)容
<input type="submit" value="提交"/>
8）其他類型
<input type="color" name="color" id="" value="" />
<input type="date" name="date" id="" value="" />
<input type="file" name="file" id="" value="" />
<input type="datetime-local" name="date-time" id="date-time" value="" />
3.下拉菜單（select）
- select標(biāo)簽：整個(gè)下拉列表
- option標(biāo)簽：列表中的選項(xiàng)
- optgroup標(biāo)簽：一個(gè)列表選項(xiàng)分組，通過label屬性值來設(shè)置分組名(只是在顯示上對(duì)選項(xiàng)進(jìn)行分區(qū)，不影響提交結(jié)果)
<select name="city">
<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>
<option value="惠州">惠州</option>
</select>
4.多行文本域（textarea）
- 提供一個(gè)可以換行輸入的輸入框
- rows屬性：行數(shù)，影響輸入框的默認(rèn)高度
- cols屬性：列數(shù), 影響輸入框的寬度
- maxlength屬性：輸入的內(nèi)容的最大長(zhǎng)度
- autofocus屬性：值設(shè)置為autofocus，頁面刷新和加載的時(shí)候自動(dòng)成為焦點(diǎn)
<textarea autofocus="autofocus" name="comment" rows="10" cols="200" maxlength="200" placeholder="輸入你的意見">
</textarea>
5.無語義標(biāo)簽
-
div標(biāo)簽和span標(biāo)簽都是無語義標(biāo)簽，使用div一般用于對(duì)網(wǎng)頁中的內(nèi)容分塊和分組
<div id="">
<a >百度一下</a>
</div>
<div id="">
<a >百度一下</a>
</div>
<span id="">
<a >百度一下</a>
</span>
<span id="">
<a >百度一下</a>
</span>
二、CSS基礎(chǔ)
1.什么是CSS
- CSS又叫樣式表（層疊樣式表），是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門用來針對(duì)網(wǎng)頁中內(nèi)容的布局和樣式
- 現(xiàn)在絕大部分使用的是CSS3
2.怎么寫CSS
1）語法
- 選擇器{屬性1：屬性值1；屬性2：屬性值2；...}
2）說明
-
選擇器：選中需要設(shè)置樣式的標(biāo)簽；在內(nèi)聯(lián)樣式表中“選擇器{}”需要省略
-
{} ：固定寫法
-
屬性：屬性是以“屬性：屬性值”的形式成對(duì)兒出現(xiàn)，多個(gè)屬性之間要用分號(hào)隔開；順序不影響
-
屬性值：如果是數(shù)字表示大小，數(shù)字后邊必須加單位：px（像素）、em（1em=16px）、顏色值
- 補(bǔ)充-顏色值：
顏色的英文單詞、#十六進(jìn)制顏色值、rgb（r,g,b）、rgba（r,g,b,透明度）
- 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. 寫在哪兒
1）內(nèi)聯(lián)樣式表
- 將樣式寫在標(biāo)簽的style屬性中
- 只作用于一個(gè)固定的標(biāo)簽
2）內(nèi)部樣式表
- 將樣式寫在style標(biāo)簽中
- 作用于當(dāng)前html中的所有標(biāo)簽
3）外部樣式表
- 將樣式寫在CSS文件中，然后在html中通過link標(biāo)簽導(dǎo)入
- 可以作用于所有的html中的所有標(biāo)簽
4）復(fù)用性：
5）優(yōu)先級(jí)：
- 內(nèi)聯(lián)樣式表的優(yōu)先級(jí)不管什么情況都是最高的
- 內(nèi)部和外部的優(yōu)先級(jí)看順序，誰后寫誰優(yōu)先級(jí)高（類似于賦值，后賦值的為最后的值）
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>
<!--3.外部樣式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
<!--2.內(nèi)部樣式-->
<style type="text/css">
/*這個(gè)里面寫css代碼*/
div{
color: orange;
background-color: darkolivegreen;
}
h1{
color: purple;
background-color: yellow;
}
</style>
</head>
<body>
<!--1.內(nèi)聯(lián)樣式-->
<p style="color: red; font-size: 30px;">hello CSS1</p>
<p>hello CSS2</p>
<div id="">
我是div1
</div>
<h1>我是標(biāo)題</h1>
<div id="">
我是div2
</div>
</body>
</html>
5. 什么是選擇器
6. 選擇器的寫法
1）元素選擇器（標(biāo)簽選擇器）
- 直接將標(biāo)簽名作為選擇器，選中當(dāng)前html中對(duì)應(yīng)的所有標(biāo)簽
- 例如：a{}：選中當(dāng)前html中所有的a標(biāo)簽
2）id選擇器
- 所有標(biāo)簽都有一個(gè)id屬性，值自己設(shè)置，但是要保證一個(gè)html中id值唯一
- 將標(biāo)簽的id屬性的值前面加 # 作為選擇器，選中id屬性值是指定值的標(biāo)簽
- 例如：#a{}：選中當(dāng)前html中id值是a的標(biāo)簽
3）類選擇器（class選擇器）
- class屬性：一個(gè)html中相同的class值可以有多個(gè)；同一個(gè)標(biāo)簽的class屬性值可以多個(gè)(多個(gè)之間用空格隔開)
- 將標(biāo)簽的class屬性的值前面加 . 作為選擇器，選中class屬性值是指定值的標(biāo)簽
- 例如：.a{}：選中當(dāng)前html中class值是a的所有標(biāo)簽
4）通配符選擇器
- 將 * 作為選擇器，選中當(dāng)前html中所有的標(biāo)簽
- *{}：選中當(dāng)前html中所有的標(biāo)簽
5）群組選擇器
- 將多個(gè)選擇器用逗號(hào)隔開來作為一個(gè)選擇器，選中每個(gè)獨(dú)立選擇器對(duì)應(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，class值是c1和c2的所有標(biāo)簽
6）后代選擇器
- 將多個(gè)選擇器用空格隔開來作為一個(gè)選擇器
- div p{}：選中所有div標(biāo)簽中的p標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
/*width: 200px;*/
}
/*1.元素選擇器*/
p{
color: red;
background: yellow;
}
/*2.id選擇器*/
#a{
font-size: 30px;
}
/*3.class選擇器*/
.c1{
background-color: yellowgreen;
}
.c2{
font-size: 40px;
}
/*4.群組選擇器*/
a,font{
color: fuchsia;
}
font,.c3{
background-color: lightblue;
}
/*5.后代選擇器*/
div label{
color: darkblue;
}
div div label{
background-color: burlywood;
}
#div1 label{
color: red;
}
</style>
</head>
<body>
<!--class屬性:
1.一個(gè)html中相同的class值可以有多個(gè)
2.同一個(gè)標(biāo)簽的class屬性值可以多個(gè)(多個(gè)之間用空格隔開)
-->
<p class="c1">我是段落1</p>
<div id="">
<div id="">
<p id="a">我是段落2</p>
<!--這兒的h1標(biāo)簽有兩個(gè)class值，分別是c1和c2-->
<h1 class="c1 c2">我是標(biāo)題1</h1>
</div>
</div>
<p class="c2">我是段落3</p>
7）偽類選擇器
- 普通選擇器選中的是html中不同的標(biāo)簽，偽類選擇器選中的是標(biāo)簽的不同狀態(tài)
- 語法：普通選擇器：狀態(tài){屬性1：屬性值1；屬性2：屬性值2；...}
-
link：初始狀態(tài)，對(duì)于a標(biāo)簽來說，link對(duì)應(yīng)的狀態(tài)是a標(biāo)簽中的鏈接從來沒有成功訪問過時(shí)的狀態(tài)（一般只在a標(biāo)簽進(jìn)行設(shè)置）
-
visited：超鏈接成功訪問過的狀態(tài)（一般只用于a標(biāo)簽）
-
hover：鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)（不只針對(duì)超鏈接，其他標(biāo)簽也常用）
-
active：鼠標(biāo)安住標(biāo)簽不放對(duì)應(yīng)的狀態(tài)（主要作用在超鏈接和按鈕）
- 遵守“愛恨原則”：LoVeHAte，按LVHA順序?qū)?/li>
7. 選擇器的權(quán)重值
- 權(quán)重越大優(yōu)先級(jí)越高，但是內(nèi)聯(lián)樣式表的優(yōu)先級(jí)永遠(yuǎn)最高
- 元素選擇器的權(quán)重：0001 == 1
- class選擇器的權(quán)重：0010 == 2
- id選擇器的權(quán)重：0100 == 4
- 偽類選擇器的權(quán)重：0001 == 1
- 群組選擇器的權(quán)重：看單獨(dú)每個(gè)選擇器的權(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);
}
/*#a1:link{}*/
a:visited{
color: green;
}
a:hover{
color: red;
font-size: 30px;
}
p:hover{
background-color: lightgoldenrodyellow;
}
a:active{
color: blueviolet;
}
button:active{
background-color: lightseagreen;
}
.h1{
color: blue;
}
h1{
color: red;
}
#h1{
color: green;
}
div #h1{
color: yellow;
}
#div2 #div1 #h1{
background-color: hotpink;
}
</style>
</head>
<body>
<div id="div2">
<div id="div1">
<h1 style="background-color: yellowgreen;" id="h1" class="h1">我是標(biāo)題</h1>
</div>
</div>
<a id="a1" >百度一下</a>
<p>段落</p>
<button>按鈕</button>
<a href="04-CSS基礎(chǔ).html">打開選擇器</a>
</body>
</html>
