1.表單
1)表單標(biāo)簽---form
- 可以提交表單中收集的信息
- action屬性：設(shè)置提交信息的位置
- method屬性：提交方式-post/get
2)input標(biāo)簽 ---文本輸入框
- 是表單標(biāo)簽
- type屬性：text普通的文本輸入框
- name屬性：必須設(shè)置(提交信息)
- value屬性：標(biāo)簽內(nèi)容
- placeholder:提示語言，當(dāng)用戶輸入值時(shí)赚楚，會(huì)自動(dòng)消失
3)input-密碼輸入框
- type屬性：password---輸入的值是密文顯示
- name屬性：必須設(shè)置(提交信息)
- placeholder:提示語言毙沾，當(dāng)用戶輸入值時(shí)，會(huì)自動(dòng)消失
4)input-單選按鈕
- type屬性：radio
- name屬性：同一類型對(duì)應(yīng)的name值必須一樣
- value：設(shè)置選中按鈕提交的值
- checked:設(shè)置checked宠页，讓按鈕默認(rèn)處于選中狀態(tài)
5）input---多選按鈕
- type屬性：checkbox
- name:同一類型對(duì)應(yīng)的name值必須一樣
- value：設(shè)置選中按鈕提交的值
- checked:設(shè)置checked左胞，讓按鈕默認(rèn)處于選中狀態(tài)
6)input---普通按鈕
- type屬性：button
- value屬性：顯示按鈕名稱
input---重置按鈕 - type:reset,讓form中所有表單標(biāo)簽對(duì)應(yīng)的值，回到最初狀態(tài)
- value屬性：顯示按鈕名稱
8）input---文件選擇器
- type屬性：file
9）maxlength標(biāo)簽:輸入框最多能輸入的字符個(gè)數(shù)
10）readonly標(biāo)簽：讓輸入框只讀(不能往里面輸入內(nèi)容)值readonly
11）disabled標(biāo)簽：讓按鈕不能點(diǎn)擊
12)input-提交
- type屬性：submit
- value屬性：顯示按鈕名稱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表單</title>
</head>
<body>
<!--
####1)表單標(biāo)簽---form
* 可以提交表單中收集的信息
* action屬性：設(shè)置提交信息的位置
* method屬性：提交方式-post/get
-->
<form action="" method="get">
<!--####2)input標(biāo)簽 ---文本輸入框
* 是表單標(biāo)簽
* type屬性：text普通的文本輸入框
* name屬性：必須設(shè)置(提交信息)
* value屬性：標(biāo)簽內(nèi)容
* placeholder:提示語言，當(dāng)用戶輸入值時(shí)服猪，會(huì)自動(dòng)消失
-->
<input type="text" name="username" value="" placeholder="請(qǐng)輸入姓名" maxlength="11"/>
<br />
<!--
####3)input-密碼輸入框
* type屬性：password---輸入的值是密文顯示
* name屬性：必須設(shè)置(提交信息)
* placeholder:提示語言罢猪，當(dāng)用戶輸入值時(shí)膳帕，會(huì)自動(dòng)消失
-->
<input type="password" name="password" value="" placeholder="請(qǐng)輸入密碼"/>
<!--
####4)input-單選按鈕
* type屬性：radio
* name屬性：同一類型對(duì)應(yīng)的name值必須一樣
* value：設(shè)置選中按鈕提交的值
* checked:設(shè)置checked备闲，讓按鈕默認(rèn)處于選中狀態(tài)
-->
<br />
<input type="radio" name="sex" checked="checked" id="" value="男" /><span >男</span>
<input type="radio" name="sex" id="" value="女" /><span >女</span>
<!--
####5）input---多選按鈕
* type屬性：checkbox
* name:同一類型對(duì)應(yīng)的name值必須一樣
* value：設(shè)置選中按鈕提交的值
* checked:設(shè)置checked恬砂，讓按鈕默認(rèn)處于選中狀態(tài)
-->
<br />
<input type="checkbox" checked="checked" name="interest" value="籃球" id=""/><span>籃球</span>
<input type="checkbox" name="interest" value="乒乓球" id=""/><span>乒乓球</span>
<input type="checkbox" name="interest" value="看電影" id=""/><span>看電影</span>
<input type="checkbox" name="interest" value="旅游" id=""/><span>旅游</span>
<!--
####6)input---普通按鈕
* type屬性：button
* value屬性：顯示按鈕名稱
-->
<br />
<input type="button" name="" id="" value="登錄" />
<!--
####7)input---重置按鈕
* type:reset,讓form中所有表單標(biāo)簽對(duì)應(yīng)的值泻骤，回到最初狀態(tài)
* value屬性：顯示按鈕名稱
-->
<input type="reset" name="" id="" value="重置" />
<!--
input---文件選擇器
type屬性：file
-->
<br />
<input type="file" name="icon" id="icon" value="" />
<!--
####8）maxlength標(biāo)簽:輸入框最多能輸入的字符個(gè)數(shù)
####9）readonly標(biāo)簽：讓輸入框只讀(不能往里面輸入內(nèi)容)值readonly
####10）disabled標(biāo)簽：讓按鈕不能點(diǎn)擊
-->
<br />
<input type="button" disabled="disabled" name="" id="" value="登錄" />
<input type="text" readonly="readonly" name="username" value="" placeholder="請(qǐng)輸入姓名" maxlength="11"/>
<!--
####11)input-提交
* type屬性：submit
* value屬性：顯示按鈕名稱
-->
<br />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
13)下拉菜單
- select標(biāo)簽
name屬性：
size屬性：設(shè)置最多顯示狱掂，其他滑動(dòng) - option標(biāo)簽
value屬性：
14)多行文本域(多行文本輸入框)
- textarea標(biāo)簽
placeholder屬性：默認(rèn)提示
maxlength屬性：最多輸入
rows屬性：行
cols屬性：列
readonly屬性：只讀
disabled屬性:禁止點(diǎn)擊
15)fieldset標(biāo)簽趋惨，對(duì)表單內(nèi)容進(jìn)行分組
logend標(biāo)簽：設(shè)置分組名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜單和多行文本域</title>
</head>
<body>
<form action="" method="post">
<!--
下拉菜單
select標(biāo)簽
name屬性：
size屬性：設(shè)置最多顯示器虾，其他滑動(dòng)
option標(biāo)簽
value屬性：
-->
<select name="city" >
<option value="成都" >成都</option>
<option value="重慶">重慶</option>
<option value="北京" selected="selected">北京</option>
<option value="大連">大連</option>
<option value="青島">青島</option>
</select>
<!--
多行文本域(多行文本輸入框)
textarea標(biāo)簽
placeholder屬性：默認(rèn)提示
maxlength屬性：最多輸入
rows屬性：行
cols屬性：列
readonly屬性：只讀
disabled屬性:禁止點(diǎn)擊
form
-->
<br />
<textarea name="mesage" disabled="disabled" rows="4" cols="30" placeholder="請(qǐng)輸入意見..." maxlength="100" readonly="readonly"></textarea>
<!--fieldset標(biāo)簽，對(duì)表單內(nèi)容進(jìn)行分組
logend標(biāo)簽：設(shè)置分組名
-->
<fieldset id="">
<legend>下拉菜單</legend>
<select name="city" >
<option value="成都" >成都</option>
<option value="重慶">重慶</option>
<option value="北京" selected="selected">北京</option>
<option value="大連">大連</option>
<option value="青島">青島</option>
</select>
<input type="reset" name="" id="" value="重置1" />
</fieldset>
<fieldset id="">
<legend>多行文本</legend>
<textarea name="mesage" rows="4" cols="30" placeholder="請(qǐng)輸入意見..." maxlength="100" ></textarea>
<input type="reset" name="" id="" value="重置2" />
</fieldset>
</form>
</body>
</html>
3.空白標(biāo)簽
HTML中的標(biāo)簽分為兩大類
塊級(jí)標(biāo)簽：一行只能有一個(gè)div(不管標(biāo)簽的寬度是多少)
h1-h6,p,hr,列表標(biāo)簽葛圃，table曲楚，form
行內(nèi)標(biāo)簽：一行可以有多個(gè)span
a,img褥符，inp属瓣，select(下拉列表)，textarea(多文本域)
1）div標(biāo)簽
- 是空白標(biāo)簽护昧，沒有任何特殊的意義(無語義標(biāo)簽)
- 塊級(jí)標(biāo)簽：一個(gè)div獨(dú)占一個(gè)整行惋耙，不管內(nèi)容大小绽榛，一行只能有一個(gè)div
2）span標(biāo)簽
- 是空白標(biāo)簽灭美，沒有任何特殊的意義(無語義標(biāo)簽)
- 行內(nèi)標(biāo)簽：一行可以有多個(gè)span
4.認(rèn)識(shí)CSS
1)CSS是什么
CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)届腐，用來設(shè)置網(wǎng)頁上標(biāo)簽的樣式(長什么樣蜂奸，在哪兒)
CSS代碼或文件扩所，也叫樣式表
使用版本：CSS3
2)寫在哪兒
內(nèi)聯(lián)樣式表：將CSS寫在標(biāo)簽的style屬性中
內(nèi)部樣式表：寫在head標(biāo)簽中的style標(biāo)簽的內(nèi)容中
外部樣式表：寫在一個(gè)css文件中祖屏，通過head中的link標(biāo)簽來關(guān)聯(lián)
三種樣式表的優(yōu)先級(jí)：內(nèi)聯(lián)樣式最高，內(nèi)部樣式表與外部樣式表沒有絕對(duì)的優(yōu)先嫉拐，主要看同一個(gè)屬性
誰在后面賦值，誰的優(yōu)先級(jí)高(誰就有效)
3)格式：
選擇器(屬性：屬性值咐汞；屬性：屬性值)--內(nèi)部和外部樣式
選擇器：用來選中需要設(shè)置樣式的標(biāo)簽
屬性：css屬性(css2中的屬性有兩百多個(gè))位置隨意
屬性值：如果屬性值是數(shù)字化撕，表示的是大小要在后面加px
注意：每個(gè)屬性之間要使用分號(hào)隔開，否則屬性無效
補(bǔ)充屬性：color-設(shè)置字體顏色 background-color：設(shè)置背景顏色 width：標(biāo)簽寬度
height：標(biāo)簽的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
style標(biāo)簽
專門用來設(shè)置樣式的標(biāo)簽
-->
<!--內(nèi)部樣式表-->
<style type="text/css">
div{
background-color: royalblue;
color: gold;
}
</style>
<!--關(guān)聯(lián)外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/04-css.css"/>
</head>
<body>
<!--style屬性：每個(gè)標(biāo)簽都有-->
<div style="">
一個(gè)div
</div>
</body>
</html>
5.css選擇器
1）元素選擇器(標(biāo)簽選擇器)：標(biāo)簽名
選中所有的標(biāo)簽名對(duì)應(yīng)的標(biāo)簽
2）id選擇器：#id屬性值
每個(gè)標(biāo)簽都有一個(gè)id屬性，整個(gè)HTML中掠手，id的值必須是唯一的
3）class選中器：.class屬性
每個(gè)標(biāo)簽都有一個(gè)class屬性
4)通配符：*
選中所有的標(biāo)簽
5)層級(jí)選擇器：選擇器1 選擇器2...
6)群組選擇器：選擇器1，選擇器就乓，...
補(bǔ)充：
css中的顏色值：
顏色英語單詞
16進(jìn)制的顏色值 0-255--00-ff(#ff0000紅色)
rgb值：rgb(紅，綠，藍(lán))声登，rgb(紅捌刮，綠，藍(lán)芦圾，透明度)-透明度0-1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 30px;
}
/*class選擇器*/
.c1{
color: blue;
background-color: greenyellow;
}
/*元素選擇器*/
a{
background-color: yellow;
}
/*id選擇器*/
#a1{
color: red;
/*color: #ff0000;*/
/*color: rgb(0,255,0);*/
/*color: rgba(0,0,255,0.4);*/
}
/*層級(jí)選擇器*/
#all_a a{
color: pink;
}
/*層級(jí)選擇器*/
div div a{
text-decoration: none;
}
/*群組選擇器个少，同時(shí)選中所有的h3和和所有的span標(biāo)簽*/
h3,span{
background-color: wheat;
}
</style>
</head>
<body>
<h3>標(biāo)題</h3>
<span id="">
span標(biāo)簽
</span>
<div id="">
<div id="">
<p>你是p</p>
</div>
<div id="all_a">
<a href="">a3</a>
<a href="">a4</a>
<a href="">a5</a>
<a href="">a6</a>
</div>
</div>
<a id="a1" href="">我是a1</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
我是div
<a href="">我是a3</a>
</div>
</body>
</html>
6)偽類選擇器
偽類選擇器---選擇器：狀態(tài)
1)link：初始狀態(tài)---一次都沒有訪問成功時(shí)的狀態(tài)
2)visited：超鏈接訪問后的狀態(tài)---已經(jīng)訪問成功后的狀態(tài)
3)hover：鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)
4)active：鼠標(biāo)按住的狀態(tài)
注意：給同一個(gè)標(biāo)簽的不同狀態(tài)用偽類選擇器設(shè)置不同的樣式時(shí)，要遵守愛恨原則(先愛才能恨)
LoVe HAte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同時(shí)設(shè)置a標(biāo)簽的所有狀態(tài)*/
a{
color: black;
}
/*一次都沒有訪問成功時(shí)的狀態(tài)*/
a:link{
color: red;
}
/*訪問成功后的狀態(tài)*/
a:visited{
color: mediumspringgreen;
}
a:hover{
color: yellow;
font-size: 40px;
}
a:active{
color: orchid;
}
#d1{
width: 100px;
height: 50px;
background-color:cyan ;
}
#d1:hover{
width: 50px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<a >百度一下</a>
<div id="d1" >
sdfs
</div>
</body>
</html>
