1.表單列表
表單標(biāo)簽一般用來做用戶信息收集，單獨(dú)用沒有意義，一般是結(jié)合相關(guān)標(biāo)簽來使用(input，select，textarea)
表單標(biāo)簽可以對(duì)包含在這個(gè)標(biāo)簽中的其他標(biāo)簽做信息的提交和重置
action：提交位置（接口相關(guān)）
method：請(qǐng)求方式（get/post）
2.select和textarea
select標(biāo)簽 - 代表整個(gè)下拉列表
option標(biāo)簽 - 代表列表中的每個(gè)選項(xiàng)
可以通過設(shè)置selected屬性的值為'selected'，來讓這個(gè)選項(xiàng)默認(rèn)選擇
optgroup標(biāo)簽 - 設(shè)置label的值來對(duì)當(dāng)前下拉菜單的內(nèi)容進(jìn)行分組
textarea標(biāo)簽 - 輸入框，可以同時(shí)顯示多行內(nèi)容(可以自動(dòng)換行和上下滾動(dòng))
name屬性 - 區(qū)分和提交
cols - 列數(shù)(一行顯示的文字的數(shù)量，影響輸入框的寬度)
rows - 行數(shù)(不滾動(dòng)最多能顯示的行數(shù)，影響輸入框的高度)
placeholder - 占位符
maxlength - 限制輸入的字符的個(gè)數(shù)
3.div和span
1.div和span都是無語義標(biāo)簽：網(wǎng)頁中內(nèi)容分組分塊，都可以使用div作為容器
2.html中標(biāo)簽分類：行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽
塊級(jí)標(biāo)簽：一個(gè)占一行，例如：div、h1、p、列表、table、tr、form、option...
行內(nèi)標(biāo)簽：一行顯示多個(gè)，例如：span、font、td、input、select、textarea...
01表單標(biāo)簽（form）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表單標(biāo)簽（form）
表單標(biāo)簽一般用來做用戶信息收集，單獨(dú)用沒有意義，一般是結(jié)合相關(guān)標(biāo)簽來使用(input，select，textarea)
表單標(biāo)簽可以對(duì)包含在這個(gè)標(biāo)簽中的其他標(biāo)簽做信息的提交和重置
action：提交位置（接口相關(guān)）
method：請(qǐng)求方式（get/post）
-->
<!--2.input標(biāo)簽
單標(biāo)簽
1)type屬性：
決定輸入框的樣式
text(默認(rèn)) - 普通的文本輸入框
2)name屬性：
這個(gè)屬性主要用來區(qū)分?jǐn)?shù)據(jù)的。***提交的時(shí)候是以name=value形式提交***
3)value屬性：
單標(biāo)簽中的value相當(dāng)于雙標(biāo)簽的內(nèi)容；但是value值只能是文本
設(shè)置value屬性其實(shí)就是設(shè)置輸入框中默認(rèn)顯示的內(nèi)容；修改內(nèi)容其實(shí)是在修改value值
-->
<form action="" method="get">
<!--1.text：文本輸入框
placehorder - 占位符（提示信息）
maxlength - 最多輸入字符個(gè)數(shù)
-->
<input type="text" name="tel" value="110" placeholder="請(qǐng)輸入電話號(hào)碼" maxlength="6"/>
<input type="text" name="email" value="" />
<!--2.password:密碼輸入框
placehorder - 占位符(提示信息)
maxlength - 最多輸入字符個(gè)數(shù)
-->
<input type="password" name="密碼" value="" placeholder="請(qǐng)輸入密碼(3-8)" maxlength="8"/>
<br />
<!--3.radio：?jiǎn)芜x按鈕
name - 同一組數(shù)據(jù)對(duì)應(yīng)的name值設(shè)置成一樣的才能做到單選
value - 這兒的value只是用于數(shù)據(jù)提交，不能顯示
checked - 設(shè)置為checked讓按鈕處于默認(rèn)選擇狀態(tài)
-->
<input type="radio" name="sex" id="s1" value="男生" checked="checked"/><label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="女生" /><label for="s2">女</label>
<br />
<!--讓文字和按鈕關(guān)聯(lián)
文字用label標(biāo)簽顯示，設(shè)置for屬性的值為想要關(guān)聯(lián)的按鈕的id的值
這樣做，點(diǎn)擊文字和點(diǎn)擊按鈕的效果一樣
-->
<input type="radio" name="marry" id="m1" value="已婚" /><label for="m1">已婚</label>
<!--<input type="radio" name="marry" value="已婚" /><font>已婚</font>-->
<input type="radio" name="marry" id="m2" value="未婚" /><label for="m2">未婚</label>
<input type="radio" name="marry" id="m3" value="保密" checked="checked"/><label for="m3">保密</label>
<br />
<!--4.checkbox：復(fù)選按鈕
name - 同一組數(shù)據(jù)的name值要一樣
value - 這兒的value只是用于數(shù)據(jù)提交，不能顯示
-->
<input type="checkbox" name="interest1" id="i1" value="教育" checked="checked"/><label for="i1">教育</label>
<input type="checkbox" name="interest2" id="i2" value="互聯(lián)網(wǎng)" /><label for="i2">互聯(lián)網(wǎng)</label>
<input type="checkbox" name="interest3" id="i3" value="銀行" /><label for="i3">銀行</label>
<br />
<!--5.button：普通按鈕
value - 對(duì)應(yīng)的值會(huì)顯示在按鈕上
-->
<input type="button" name="" value="登錄" />
<br />
<!--6.submit：提交按鈕
這個(gè)按鈕的點(diǎn)擊事件是將當(dāng)前所在的form標(biāo)簽中，
設(shè)置了name屬性的相關(guān)標(biāo)簽的數(shù)據(jù)以'name=value'的形式提交
-->
<input type="submit" value="提交" />
<!--7.reset：重置按鈕
這個(gè)按鈕的點(diǎn)擊事件是將當(dāng)前所在的form標(biāo)簽中，所有標(biāo)簽設(shè)置成初始狀態(tài)
-->
<input type="reset" value="重置" />
<!--8.其他類型-->
<input type="color" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime" name="" id="" value="" />
</form>
<!--2.button標(biāo)簽-->
<button><img src="img/1.jpg"/></button>
</body>
</html>
02 select下拉菜單和textarea多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.下拉菜單(列表)
select標(biāo)簽 - 代表整個(gè)下拉列表
option標(biāo)簽 - 代表列表中的每個(gè)選項(xiàng)
可以通過設(shè)置selected屬性的值為'selected'，來讓這個(gè)選項(xiàng)默認(rèn)選擇
optgroup標(biāo)簽 - 設(shè)置label的值來對(duì)當(dāng)前下拉菜單的內(nèi)容進(jìn)行分組
-->
<select name="province">
<optgroup label="省"></optgroup>
<option value="四川省">四川省</option>
<option value="云南省">云南省</option>
<option value="吉林省">吉林省</option>
<option value="黑龍江">黑龍江省</option>
<optgroup label="直轄市"></optgroup>
<option selected="selected" value="北京">北京</option>
<option value="重慶">重慶</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
</select>
<select name="city">
<option value="成都市">成都市</option>
<option value="綿陽市">綿陽市</option>
<option value="巴中市">巴中市</option>
<option value="宜賓市">宜賓市</option>
<option value="雅安市">雅安市</option>
<option selected="selected" value="北京">北京</option>
</select>
<!--2.多行文本域
textarea標(biāo)簽 - 輸入框，可以同時(shí)顯示多行內(nèi)容(可以自動(dòng)換行和上下滾動(dòng))
name屬性 - 區(qū)分和提交
cols - 列數(shù)(一行顯示的文字的數(shù)量，影響輸入框的寬度)
rows - 行數(shù)(不滾動(dòng)最多能顯示的行數(shù)，影響輸入框的高度)
placeholder - 占位符
maxlength - 限制輸入的字符的個(gè)數(shù)
-->
<textarea name="message" rows="5" cols="" placeholder="請(qǐng)輸入消息" maxlength="200">默認(rèn)文字</textarea>
</body>
</html>
03 div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css基礎(chǔ).css"/>
</head>
<body>
<!--
1.div和span都是無語義標(biāo)簽：網(wǎng)頁中內(nèi)容分組分塊，都可以使用div作為容器
2.html中標(biāo)簽分類：行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽
塊級(jí)標(biāo)簽：一個(gè)占一行，例如：div、h1、p、列表、table、tr、form、option...
行內(nèi)標(biāo)簽：一行顯示多個(gè)，例如：span、font、td、input、select、textarea...
-->
<div id="">
div1dfsdf
</div>
<div id="">
div2
</div>
<span id="">
span1
</span>
<span id="">
span2
</span>
</body>
</html>
