1.表單標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
-----------------------------------------------------------------------------------------------------
--1.表單標(biāo)簽:form標(biāo)簽
表單標(biāo)簽是用來(lái)收集用戶信息的。是一個(gè)容器恰力，用來(lái)獲取這個(gè)標(biāo)簽中相應(yīng)的其他標(biāo)簽(input標(biāo)簽)的數(shù)據(jù)
可以將收集到的數(shù)據(jù)周瞎，通過(guò)method對(duì)應(yīng)的方式汁展，去發(fā)送請(qǐng)求(發(fā)送給action對(duì)應(yīng)的接口)
--2.input標(biāo)簽
單標(biāo)簽
a.type屬性:決定input標(biāo)簽的樣式
text(默認(rèn))：文本輸入框
password: 密碼輸入框
radio:單選按鈕
注意：input標(biāo)簽放在form外邊同樣可以使用析孽，只是不能直接使用重置和提交功能
-->
<form method="get" action="">
--a.文本輸入框：(text)
1.name屬性：區(qū)分不同的input對(duì)應(yīng)值,對(duì)標(biāo)簽的顯示沒(méi)有影響
2.value屬性：input標(biāo)簽中的值律歼，相當(dāng)于內(nèi)容(文本輸入框中輸入的內(nèi)容就是value的值)
提交input中的數(shù)據(jù)給服務(wù)器的時(shí)候虏等，是以name值=value值來(lái)提交的
3.placeholder屬性：占位符(輸入框的提示信息)
4.maxlength屬性：約束輸入框能輸入的字符的最大個(gè)數(shù)
<input type="text" name="username" value="aaa" placeholder="賬號(hào)" maxlength="8"/>
<input type="text" name="tel" value="" placeholder="手機(jī)號(hào)"/>
--b.密碼輸入框:(password)
注意：value值是輸入框中輸入的內(nèi)容
4.maxlength屬性：約束輸入框能輸入的字符的最大個(gè)數(shù)
<input type="password" name="password" value="" placeholder="密碼" maxlength="8"/>
<br />
--c.單選按鈕：(radio)
注意：
1.value值：設(shè)置為這個(gè)按鈕選中提交對(duì)應(yīng)的值
2.name值：如果多個(gè)按鈕只能選中一個(gè)弄唧，那么這些按鈕對(duì)應(yīng)name值必須一致
3.checked屬性：設(shè)置默認(rèn)選中
3.一組(name值一樣)單選按鈕在提交的時(shí)候只提交被選中的按鈕的name和value值
-->
<input type="radio" name="sex" value="boy" checked="checked"/> <span>男</span>
<input type="radio" name="sex" value="girl" /> <span>女</span>
<br />
<input type="radio" name="marry" value="已婚" checked="" /><span>已婚</span>
<input type="radio" name="marry" value="未婚" /><span>未婚</span>
<br />
<!--d.復(fù)選按鈕:(checkbox)
注意：
1.name值：同一組的數(shù)據(jù)對(duì)應(yīng)name值一樣
-->
<input type="checkbox" name="hobby" id="" value="basketball" checked="checked" /><span>籃球</span>
<input type="checkbox" name="hobby" id="" value="乒乓球" checked="checked"/><span>乒乓球</span>
<input type="checkbox" name="hobby" id="" value="羽毛球" /><span>羽毛球</span>
<input type="checkbox" name="hobby" id="" value="排球" /><span>排球</span>
<br />
<!--e.普通按鈕:(button)
value值：按鈕上顯示的內(nèi)容
-->
<input type="button" name="" id="" disabled="disabled" value="登錄" />
<!--f.提交按鈕:(submit)
自動(dòng)將當(dāng)前form標(biāo)簽中設(shè)置了name屬性的input標(biāo)簽對(duì)應(yīng)的值通過(guò)method方式提交給action對(duì)應(yīng)的接口
-->
<input type="submit" name="" id="" value="提交" />
<!--g.重置按鈕
讓當(dāng)前form標(biāo)簽中的input標(biāo)簽的值回到初始狀態(tài)
-->
<input type="reset" name="" id="" value="重置" />
<!--h.文件域:(file)-->
<input type="file" name="icon" id="" value="" />
</form>
</body>
</html>
'''
2下拉、多行文本霍衫、按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
下拉和多行文本域可以放在form標(biāo)簽中用于收集信息
1.下拉菜單:select標(biāo)簽
一個(gè)select標(biāo)簽對(duì)應(yīng)一個(gè)下拉菜單候引，菜單中的選項(xiàng)要通過(guò)option來(lái)列舉
a.selected屬性：設(shè)置默認(rèn)被選中的選項(xiàng)
2.多行文本域
<select name="city">
<option value="成都">成都</option>
<option value="北京" selected="selected">北京</option>
<option value="重慶">重慶</option>
<option value="沈陽(yáng)">沈陽(yáng)</option>
</select>
-----------------------------------------------------------------------------------------------------
!--2.對(duì)下拉菜單進(jìn)行分組
可以通過(guò)optgroup標(biāo)簽對(duì)下拉菜單進(jìn)行分組, 通過(guò)label屬性對(duì)分組進(jìn)行命名
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="德陽(yáng)" selected="selected">德陽(yáng)</option>
<option value="樂(lè)山">樂(lè)山</option>
<option value="眉山">眉山</option>
<option value="自貢">自貢</option>
</optgroup>
<optgroup label="廣東省">
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
<option value="中山">中山</option>
<option value="佛山">佛山</option>
</optgroup>
</select>
--2.多行文本域:textarea標(biāo)簽
name: 提交的數(shù)據(jù)對(duì)應(yīng)的名字
rows：默認(rèn)一屏的行數(shù)
cols：默認(rèn)的列數(shù)
placeholder：設(shè)置占位符
disabled: 禁用
maxlength:約束能輸入的最大的字符個(gè)數(shù)
<textarea maxlength="200" name="message" rows="10" cols="20" placeholder="200字以?xún)?nèi)" disabled="disabled"></textarea>
--3.按鈕：button標(biāo)簽-->
-文字按鈕-->
<button>注冊(cè)</button>
--圖片按鈕-->
<button><img src="img/luffy2.png" alt="" /></button>
</body>
</html>
3.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
<style type="text/css">
#aaa{
background-color: red;
margin-left: 100px;
}
</style>
</head>
<body>
<img src="img/luffy4.jpg"/>
1.div和span
div和span標(biāo)簽是空白標(biāo)簽，沒(méi)有語(yǔ)義敦跌。
一般用來(lái)做分組(將網(wǎng)頁(yè)分塊)
div:塊級(jí)標(biāo)簽(一行只能放一個(gè)標(biāo)簽)
span：行內(nèi)標(biāo)簽（一行可以放多個(gè)標(biāo)簽）
2.塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽
塊級(jí)標(biāo)簽: 一個(gè)標(biāo)簽占一行
h1-h6, p, 列表標(biāo)簽(ul\ol\dl),table,hr等
行內(nèi)標(biāo)簽：一行可以放多個(gè)行內(nèi)標(biāo)簽
img, a, input,select,textarea等
<span id="">
abc
</span>
<span id="">
abd
</span>
<div id="aaa">
<a href="">百度</a>
<a href="">谷歌</a>
</div>
<div id="">
<a href="">新浪</a>
<a href="">騰訊</a>
</div>
</body>
</html>
4.CSS基礎(chǔ)
CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)澄干，用來(lái)規(guī)定網(wǎng)頁(yè)上內(nèi)容的布局和樣式（CSS又叫樣式表）
目前廣泛使用的是CSS3
1.怎么來(lái)寫(xiě)樣式表(CSS)，寫(xiě)在哪兒?
a.內(nèi)聯(lián)樣式表:
將樣式寫(xiě)在標(biāo)簽的style屬性中(每個(gè)可見(jiàn)標(biāo)簽都有style屬性)
b.內(nèi)部樣式表
將樣式表寫(xiě)在head標(biāo)簽中style標(biāo)簽里面
c.外部樣式表
將樣式表寫(xiě)在一個(gè)css文件中，然后再head標(biāo)簽中通過(guò)link標(biāo)簽來(lái)導(dǎo)入
注意：不管在什么情況下麸俘，內(nèi)聯(lián)樣式表的優(yōu)先級(jí)最高;內(nèi)部和外部的優(yōu)先級(jí)看誰(shuí)后寫(xiě)辩稽，誰(shuí)的優(yōu)先級(jí)高
2.固定語(yǔ)法
選擇器{屬性1:屬性值1;屬性2:屬性值2....}
說(shuō)明：
a.選擇器: 選擇器的作用是用來(lái)確定后面樣式到底是給哪個(gè)/哪幾個(gè)標(biāo)簽寫(xiě)的
b.屬性：屬性是CSS中本來(lái)就支持和擁有的屬性，屬性的順序可以隨意些从媚。
屬性和屬性值之間使用冒號(hào)連接
屬性后面必須寫(xiě)分號(hào)
c.屬性值：
（1）數(shù)值：如果數(shù)值是用來(lái)表示大小逞泄，后面必須跟單位px或者%
px -- 像素 % --- 百分比（前提是父標(biāo)簽對(duì)應(yīng)的寬度或者高度確定的）
(2)顏色：
顏色對(duì)應(yīng)的英語(yǔ)單詞
#加R-G-B對(duì)應(yīng)的16進(jìn)制值(一個(gè)顏色值對(duì)應(yīng)2位16進(jìn)制)
直接使用RGB值: rgb(R,G,B), rgba(R,G,B,Alpha) R,G,B的取值范圍是0-255，Alpha：0~1
3.常見(jiàn)的屬性
color: 設(shè)置字體顏色
background-color: 背景顏色
width: 高度
height:高度
font-size:字體大小
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--內(nèi)部樣式表-->
<style type="text/css">
h1{
background-color: rgba(0,255,0,0.2);
color: saddlebrown;
}
a{
font-size: 20px;
}
p{
background-color: red;
}
img{
width: 200px;
}
</style>
<!--外部樣式-->
<link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
</head>
<body>
<!--內(nèi)聯(lián)樣式表-->
<p style="background-color: cornflowerblue; color: yellow;">樣式表的內(nèi)容</p>
<p style="font-size: 30px;">樣式表的語(yǔ)法</p>
<h1>我是標(biāo)題1</h1>
<h1>我是標(biāo)題2</h1>
<a href="">百度一下</a>
<img src="img/luffy4.jpg"/>
</body>
</html>
5.選擇器
--常用的選擇器
一拜效、選擇器
1.標(biāo)簽/元素選擇器：直接將標(biāo)簽名作為選擇器喷众，同時(shí)選中網(wǎng)頁(yè)中所有同類(lèi)型的標(biāo)簽
a{} -- 選中所有的a標(biāo)簽
2.id選擇器：通過(guò)在id屬性值前加#，就構(gòu)成了id選擇器拂檩。選中id等于對(duì)應(yīng)的值的標(biāo)簽
id屬性：所有的標(biāo)簽都有id屬性侮腹，(并且設(shè)置的值必須唯一?)
#p1{} -- 選中id值是p1的標(biāo)簽
3.class選擇器: 通過(guò)在class屬性值前加.嘲碧，就構(gòu)成了類(lèi)選擇器稻励。選中class等于對(duì)應(yīng)的值的標(biāo)簽
.c1{} -- 選中所有class值是c1的標(biāo)簽
4.群組選擇器: 多個(gè)選擇器器中間使用逗號(hào)隔開(kāi)。選中所有的單獨(dú)的選擇器
a,p,#p1,.c1{} -- 選中所有的a標(biāo)簽愈涩，p標(biāo)簽和所有id值是p1以及所有class值是c1的標(biāo)簽
5.包含選擇器：多個(gè)選擇器之間使用空格隔開(kāi)望抽。從前往后找，找到最后一個(gè)選擇器
div .c1 p{} -- 選中div中class是c1的標(biāo)簽中的p標(biāo)簽
6.通配符*: 直接將*作為選擇器履婉。選中當(dāng)前頁(yè)面中所有的標(biāo)簽
二煤篙、選擇器的優(yōu)先級(jí)
通過(guò)不同的選擇器選中了同一個(gè)標(biāo)簽，并且設(shè)置了同一個(gè)屬性毁腿，誰(shuí)的優(yōu)先級(jí)高就誰(shuí)有效辑奈。看誰(shuí)的優(yōu)先級(jí)高就看誰(shuí)的權(quán)重值大
權(quán)重值是一樣的情況下已烤，誰(shuí)后寫(xiě)鸠窗，誰(shuí)的優(yōu)先級(jí)高
偽類(lèi)選擇器：0001
元素選擇器：0001 = 1
class選擇器：0010 = 2
id選擇器：0100 = 4
群組選擇器：直接看單獨(dú)每一個(gè)的權(quán)重
包含選擇器：多個(gè)選擇器的權(quán)重和
通配符：0001
注意：不管選擇器的權(quán)重有多高，內(nèi)聯(lián)樣式的優(yōu)先級(jí)都是最高的胯究！
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：在這個(gè)標(biāo)簽中寫(xiě)的代碼是CSS代碼*/
/*1.元素選擇器*/
a{
color: salmon;
}
/*id選擇器*/
#a1{
background-color: seagreen;
}
/*class選擇器*/
.c1{
color: skyblue;
}
/*群組選擇器*/
a,p{
font-size: 25px;
}
/*包含選擇器*/
div .c1 p{
background-color: pink;
}
/**{
background-color: yellow;
width: 100px;
}*/
/*#p{
color: red;
}*/
body .p1{
color: blue;
}
.p1,a{
color: salmon;
}
</style>
</head>
<body>
<p style="color: saddlebrown;" id="p" class="p1">選擇器的權(quán)重</p>
<a class="c1" href="">超鏈接1</a>
<div id="">
<a href="">超鏈接2</a>
</div>
<div id="">
<div id="">
<a href="">超鏈接3</a>
</div>
</div>
<p id="a1">我是段落1</p>
<h1 class="c1">我是標(biāo)題1</h1>
<div id="">
<p>我是p0</p>
<div class="c1">
<a href="">我是a4</a>
<p>我是p1</p>
<p>我是p1</p>
<div id="">
<p>我是p3</p>
</div>
</div>
<div id="">
<div class="c1" id="">
<p>我是p4</p>
</div>
</div>
</div>
</body>
</html>
6.偽類(lèi)選擇器
前面的元素選擇器稍计、id選擇器、class選擇器選中的都是標(biāo)簽裕循。
偽類(lèi)選擇器是選中標(biāo)簽的某個(gè)狀態(tài)
偽類(lèi)選擇器：選中某個(gè)標(biāo)簽的不同狀態(tài)（一般使用于超鏈接和按鈕等）
1.語(yǔ)法：--- 標(biāo)簽:狀態(tài)
標(biāo)簽:狀態(tài){}
說(shuō)明:
a.狀態(tài)：
link:初始狀態(tài)(a標(biāo)簽對(duì)應(yīng)的初始狀態(tài)是沒(méi)有訪問(wèn)成功過(guò)對(duì)應(yīng)狀態(tài))
visited:訪問(wèn)后的狀態(tài)(使用a標(biāo)簽)
hover: 鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)
active: 被激活對(duì)應(yīng)的狀態(tài)(一般用于超鏈接) --- 鼠標(biāo)按下的時(shí)候?qū)?yīng)的狀態(tài)
focus: 成為焦點(diǎn)(在輸入框中用的比較多)
b.標(biāo)簽：可以通過(guò)不同的選擇器去選中
2.愛(ài)恨原則：LoVeHAte - 先愛(ài)后恨
如果想要給一個(gè)標(biāo)簽同時(shí)給link\visited\hover\active中的兩個(gè)或者兩個(gè)以上的狀態(tài)設(shè)置樣式臣嚣，必須遵守愛(ài)恨原則
(如果不按愛(ài)恨原則可能會(huì)問(wèn)題，如果按照愛(ài)恨原則肯定不會(huì)出問(wèn)題)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: gray;
}
a:visited{
color: seagreen;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color: yellow;
}
p:hover{
color: red;
}
input:focus{
outline: none;
}
</style>
</head>
<body>
<a id="a1" >新浪</a>
<p>我是段落</p>
<a href="">百度一下</a>
<input type="text" name="" id="" value="" />
</body>
</html>
作業(yè)
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<div id="logo">
<div id="logo1">
<img src="img/logo.png"/>
</div>
<div id="" style="float: left;padding-top:27px;font-size:large;">
歡迎登錄
</div>
<div style="float: right;padding-right: 218px;padding-top: 30px;">
<a id="href1" href="#">登錄頁(yè)面剥哑，調(diào)查問(wèn)卷</a>
</div>
</div>
<p style="padding-left: 315px;background-color: blanchedalmond;height: 43px;padding-top: 20px;">依據(jù)《網(wǎng)絡(luò)安全法》硅则，為保障您的賬戶安全和正常使用，請(qǐng)盡快完成手機(jī)號(hào)驗(yàn)證株婴！ 新版<a href="#">《京東隱私政策》</a>已上線怎虫，將更有利于保護(hù)您的個(gè)人隱私。</p>
<div style="width: 223px;height: 475px;background-color:rgb(180,180,180);float: left;">
</div>
<div id="person">
<img src="img/person.png"/>
</div>
<div id="logo_box">
<div style="height: 39px;background-color: blanchedalmond;">
<p style="font-size: smaller;">京東不會(huì)以任何理由要求您轉(zhuǎn)賬匯款，謹(jǐn)防詐騙揪垄。</p>
</div>
<div style="height: 53px;">
<div>
<a href="#"><p style="padding-left: 51px;padding-top: 5px;float: left;">掃碼登錄</p></a>
<a href="#"><p style="float: left;padding-top: 5px;padding-left: 104px;">賬戶登錄</p></a>
</div>
</div>
<div>
<div>
<input id="username" type="text" name="username" value="" placeholder="郵箱/用戶名/已驗(yàn)證手機(jī)"/>
</div>
<div>
<input id="passwd" type="password" name="passwd" placeholder="密碼"/>
</div>
<p style="padding-left: 283px;font-size:small;"><a href="#">忘記密碼</a></p>
<div id="button">
<p style="padding-left: 130px;padding-top: 5px;font-size: medium;">登錄</p>
</div>
<p style="float: left;padding-left: 25px;"><a href="#">QQ</a></p>
<p style="float: left;padding-left: 250px;"><a href="#">微信</a></p>
</div>
</div>
<div id="bt">
<p style="padding-left: 100px;"><a href="#">關(guān)于我們 |</a><a href="#">聯(lián)系我們 |</a><a href="#">人才招聘 |</a><a href="#">商家入駐 |</a><a href="#">廣告服務(wù) |</a><a href="#">手機(jī)京東 |</a><a href="#">友情鏈接 |</a><a href="#">銷(xiāo)售聯(lián)盟 |</a>
<a href="#">京東社區(qū) |</a><a href="#">京東公益 |</a><a href="#">English Site</a> </p>
<p style="padding-left: 450px;"><a href="#">Copyright ? 2004-2018 京東JD.com 版權(quán)所有</a></p>
</div>
</body>
</html>
test.css
#logo{
height: 85px;
}
#logo1{
width:170px ;
padding-left: 225px;
float: left;
}
#person{
float: left;
}
#logo_box{
width: 344px;
height: 395px;
float: left;
border:double;
background-color:azure;
}
#username{
height: 43px;
width: 300px;
}
#passwd{
height: 43px;
width: 300px;
}
#button{
padding-left: 23px;
background-color: red;
height: 34px;
}
#bt{
height: 60px;
width: 800px;
}
a:active{
color:aqua;
}
a:visited{
color:blue;
}
a:hover{
color: red;
}
a:active{
color: crimson;
}
效果圖
wanye.png
