<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表單標(biāo)簽：from
表單標(biāo)簽是專門用來(lái)做用戶信息收集的標(biāo)簽善炫，是一個(gè)容器型的標(biāo)簽延旧，單獨(dú)用沒(méi)有意義稻爬，
一般需要配合表單相關(guān)的標(biāo)簽來(lái)使用擂仍。
主要完成數(shù)據(jù)提交和重置的功能
表單相關(guān)標(biāo)簽：input、textarea鼎天、select
action屬性 - 數(shù)據(jù)提交的方法/接口
method屬性 - http請(qǐng)求方式（接口類型）
-->
<form action="" method="get">
<!--2.input標(biāo)簽
type屬性 - 決定標(biāo)簽的作用
-->
<!--1）text 普通文本輸入框
name屬性 - 用來(lái)分區(qū)和提交數(shù)據(jù)
value屬性 - 輸入框中的內(nèi)容
placeholder屬性- 占位符（輸入提示屬性）
maxlength屬性 - 限制輸入框內(nèi)容的長(zhǎng)度
-->
用戶名：<input type="text" name="userName" id="" value="" placeholder="請(qǐng)輸入用戶名" maxlength="8"/>
<br />
<br />
<input type="text" name="tel" id="" value="" />
<!--2）password - 密碼輸入框
-->
<br /><br />
密碼：<input type="password" name="" placeholder="密碼"/>
<!--3）radio - 單選按鈕
name屬性 - 用來(lái)分區(qū)和提交數(shù)據(jù) （同一組選項(xiàng)name屬性必須一致）
value屬性 - 標(biāo)簽點(diǎn)當(dāng)前按鈕選中的數(shù)據(jù)的值（不可見(jiàn)）
checked屬性 - 設(shè)置為checked 對(duì)應(yīng)按鈕會(huì)被默認(rèn)選中
-->
<!--讓label標(biāo)簽的for屬性和表單標(biāo)簽id屬性保持一致水慨，可以讓label和表單標(biāo)簽關(guān)聯(lián)-->
<input type="radio" name="name" id="1" value="男" checked="checked"/><label for="1">男</label>
<input type="radio" name="name" id="2" value="女" /><label for="2">女</label>
<!--4）checkbox - 復(fù)選按鈕
-->
<br /><br />
<input type="checkbox" name="" id="3" value="籃球" /><label for="3">籃球</label>
<!--5）button - 普通按鈕
value屬性 - 按鈕上可見(jiàn)的文字
-->
<br /><br />
<input type="button" name="" id="" value="確定" />
<button>確定</button>
<!--6）submit 提交按鈕
將當(dāng)前form中所有設(shè)置name屬性值的相關(guān)的標(biāo)簽以name = value的形式進(jìn)行提交
-->
<input type="submit" value="提交"/>
<!--7）reset重置按鈕
將當(dāng)前form標(biāo)簽中所有相關(guān)標(biāo)簽狀態(tài)恢復(fù)到初始狀態(tài)
-->
<input type="reset" name="" id="" value="" />
<form/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.多行文本域：textarea
name屬性 - 區(qū)分和提交數(shù)據(jù)
rows屬性 - 行數(shù)蔚叨，控制輸入框的高度
cols屬性 - 列數(shù)，控制輸入框的寬度
-->
<textarea name="" rows="4" cols="100" placeholder="請(qǐng)輸入建議..."></textarea>
<!--2.下拉菜單：select-option
select標(biāo)簽 - 整個(gè)下拉列表
option標(biāo)簽 - 下拉列表中的選項(xiàng)
selected屬性 - 值設(shè)置為selected 讓指定選項(xiàng)處于默認(rèn)選中狀態(tài)
-->
<select name="city">
<option value="成都市">成都</option>
<option value="重慶市">重慶</option>
<option value="貴陽(yáng)市">貴陽(yáng)</option>
<option value="北京市">北京</option>
<option value="三和市" selected="selected">三和</option>
</select>
<select name="">
<!--可以通過(guò)添加optgroup標(biāo)簽并設(shè)置label屬性來(lái)對(duì)同一個(gè)下拉菜單中的選項(xiàng)分組-->
<optgroup label="成都市"></optgroup>
<option value="">武侯區(qū)</option>
<option value="">成華區(qū)</option>
<option value="">金牛區(qū)</option>
<option value="">高薪區(qū)</option>
<option value="">錦江區(qū)</option>
<optgroup label="北京市"></optgroup>
<option value="">海淀區(qū)</option>
<option value="">豐臺(tái)區(qū)</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span都是無(wú)語(yǔ)義標(biāo)簽粥诫，主要是用來(lái)對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行分塊和分組的
div默認(rèn)是塊級(jí)標(biāo)簽油航，顯示的時(shí)候只能一個(gè)占行
span默認(rèn)是行內(nèi)標(biāo)簽，現(xiàn)實(shí)的時(shí)候一行可顯示多個(gè)
-->
</body>
</html>
<!--
1.什么是css
css又叫層疊樣式表怀浆，是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)谊囚，主要負(fù)責(zé)網(wǎng)頁(yè)中內(nèi)容的布局和樣式
2.寫在哪
1）內(nèi)聯(lián)樣式表 - 將css代碼寫到標(biāo)簽的style屬性中
2) 內(nèi)部樣式表 - 將css代碼寫到style標(biāo)簽中
3) 外部樣式表 - 將css代碼寫在css文件中，然后通過(guò)link標(biāo)簽在html中導(dǎo)入
3.怎么寫樣式表
1）語(yǔ)法：
選擇器{屬性1：屬性值1执赡；屬性2：屬性值2...}
2) 說(shuō)明
選擇器 - 選中需要添加樣式的標(biāo)簽
{} - 固定寫法
注意：如果是內(nèi)聯(lián)樣式 選擇器{}可以省略
屬性 - 屬性名和屬性值用冒號(hào)連接镰踏，屬性和屬性之間用分號(hào)隔開
學(xué)css就是學(xué)css中的屬性和功能
注意：如果屬性值是表示大小的數(shù)字，必須加單位：px（像素）em（空格）;
也可以使用百分比（相對(duì)父標(biāo)簽的）
3）常用屬性
color - 設(shè)置文字顏色
background-color - 設(shè)置背景顏色
font-size - 字體大小
width - 寬
height - 高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--外部樣式-->
<link rel="stylesheet" type="text/css" href="css/10-CSS基礎(chǔ).css"/>
<!--內(nèi)部樣式-->
<style type="text/css">
/*這兒代碼就是css代碼*/
#p1{
color: blueviolet;
}
</style>
</head>
<body>
<!--內(nèi)聯(lián)樣式-->
<p style="color: red;">我是段落1</p>
<p id="p1">我是段落2</p>
</body>
</html>
<!--
CSS中的選擇器就是用來(lái)選中標(biāo)簽的
1.元素（標(biāo)簽）選擇器
直接將標(biāo)簽名作為選擇器搀玖，選中當(dāng)前頁(yè)面中所有的指定標(biāo)簽
例如：p{} - 選中當(dāng)前頁(yè)面中所有的p標(biāo)簽
2.id選擇器
將id屬性名前加#作為一個(gè)選擇器余境，選中的是當(dāng)前頁(yè)面中id屬性值是指定值的標(biāo)簽
注意：id是唯一
例如：#p1{} - 選中id值是p1的標(biāo)簽
3.class選擇器
將class屬性前加.作為一個(gè)選擇器，選中當(dāng)前頁(yè)面中所有class值是指定值的標(biāo)簽
注意：同一個(gè)class在一個(gè)頁(yè)面中可以有多個(gè)灌诅；同一個(gè)標(biāo)簽可以擁有多個(gè)class
例如：.c1{} - 選中class值是c1的標(biāo)簽
4.群組選擇器
將多個(gè)選擇器用逗號(hào)隔開作為一個(gè)選擇器芳来，選中每個(gè)選擇器選中所有標(biāo)簽。
例如：p,#p1,.c1{} - 選中所有的p標(biāo)簽和id是p1的標(biāo)簽以及所有classc1的標(biāo)簽
5.后代選擇器
將多個(gè)選擇器用空格隔開作為一個(gè)選擇器猜拾，從第一個(gè)選擇器開始層層往后找即舌，
找到最后一個(gè)選擇器對(duì)應(yīng)的標(biāo)簽
例如：p #p1{} - 選中p標(biāo)簽中類型是c1的標(biāo)簽
選擇器1 選擇器2{} - 選中選擇器1中的選擇器2
注意：2是1的后代就行
6.子代選擇器
將多個(gè)選擇器用>隔開 作為一個(gè)選擇器
例如：div>p{} - 選中div標(biāo)中的p標(biāo)簽（p必須是div標(biāo)簽的子標(biāo)簽）
7.通配符
將*作為選擇器，選中當(dāng)前頁(yè)面中所有的標(biāo)簽
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=============1.元素選擇器示例============-->
<style type="text/css">
p{
color: yellowgreen;
}
</style>
<h1></h1>
<p>我是段落1</p>
<a href="01-head標(biāo)簽.html">head</a>
<p>我是段落2</p>
<!--================2.id選擇器============-->
<style type="text/css">
#p2{
font-size: 50px;
color: pink;
}
</style>
<h1>111</h1>
<p>我是段落1</p>
<a href="01-head標(biāo)簽.html">head</a>
<p id="p2">我是段落2</p>
<!--===============3.class標(biāo)簽示例==============-->
<!--<style type="text/css">
.c1{
color: darkkhaki;
font-size: 80px;
}
</style>-->
<h1 class='c1'>8848至尊體驗(yàn)</h1>
<p>我是段落1</p>
<a href="01-head標(biāo)簽.html">head</a>
<p id="p3" class="c1">我是段落2</p>
<a href="" class="c1">我是超鏈接1</a>
<!--===============4.群組標(biāo)簽示例==============-->
<style type="text/css">
p,.c1{
color: darkkhaki;
}
</style>
<h1 class='c1'>8848至尊體驗(yàn)</h1>
<p>我是段落1</p>
<a href="01-head標(biāo)簽.html">head</a>
<p class="c1">我是段落2</p>
<a href="" class="c1">我是超鏈接1</a>
</body>
</html>
<!--
1.什么是偽類選擇器
普通選擇器選中的是一個(gè)標(biāo)簽所有的狀態(tài)挎袜，選中后添加的樣式對(duì)標(biāo)簽的所有狀態(tài)有效
偽類選擇器選中的是一個(gè)標(biāo)簽指定的狀態(tài)
2.語(yǔ)法：
普通選擇器：狀態(tài){}
1)link - 超鏈接沒(méi)有被成功訪問(wèn)的時(shí)候?qū)?yīng)的狀態(tài)
2）visited - 鏈接已經(jīng)被成功訪問(wèn)過(guò)的狀態(tài)顽聂，只有a標(biāo)簽才有
3）hover - 鼠標(biāo)懸停在標(biāo)簽上的狀態(tài)肥惭，所有標(biāo)簽都可以用
4)active - 鼠標(biāo)按住標(biāo)簽不放的狀態(tài)，所有標(biāo)簽可以用
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=====1.link狀態(tài)========-->
<style type="text/css">
a:link{
color: darkorange;
}
</style>
<a >QQ</a>
<!--=============hover狀態(tài)===========-->
<style type="text/css">
#s1:hover{
color: darkgreen;
}
font:active{
color: palegreen;
}
</style>
<span id="s1">
我是span
</span>
<font>我是font</font>
</body>
</html>
<!--
不同選擇器的權(quán)重不一樣紊搪，權(quán)重越大蜜葱，優(yōu)先級(jí)越高
元素選擇器：0001 == 1
class選擇器：0010 == 2
id選擇器：0100 ==4
群組選擇器：看單獨(dú)選擇器的權(quán)重
后代或者子代選擇器：各個(gè)單獨(dú)的選擇器的和
偽類選擇器：0001 ==1
注意：1.如果權(quán)重值相同，后寫的優(yōu)先級(jí)比先寫的高
2.除非特殊說(shuō)明耀石，內(nèi)聯(lián)樣式表的優(yōu)先級(jí)最高
3.屬性后如果添加了牵囤！important，那么這個(gè)屬性一定會(huì)有效
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
.c1{
color: red !important;
}
#p1{
color: greenyellow;
}
div #p1{
color: deepskyblue;
}
</style>
<div id="">
<p id="p1" class="c1">
我是段落1
</p>
</div>
</body>
</html>
html基礎(chǔ)·input·多行文本·下拉菜單·div·span·css·選擇器·偽類·選擇器權(quán)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門径荔，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)督禽，“玉大人，你說(shuō)我怎么就攤上這事总处”繁梗” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵鹦马，是天一觀的道長(zhǎng)胧谈。 經(jīng)常有香客問(wèn)我，道長(zhǎng)荸频，這世上最難降的妖魔是什么菱肖？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮旭从，結(jié)果婚禮上稳强，老公的妹妹穿的比我還像新娘。我一直安慰自己和悦，他們只是感情好退疫，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸽素，像睡著了一般褒繁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上馍忽，一...
- 那天棒坏，我揣著相機(jī)與錄音燕差，去河邊找鬼。 笑死坝冕，一個(gè)胖子當(dāng)著我的面吹牛徒探，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播喂窟，決...
- 文/蒼蘭香墨 我猛地睜開眼刹帕，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了谎替？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤蹋辅，失蹤者是張志新（化名）和其女友劉穎钱贯，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侦另，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡秩命，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了褒傅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弃锐。...
- 正文 年R本政府宣布旋廷，位于F島的核電站，受9級(jí)特大地震影響礼搁，放射性物質(zhì)發(fā)生泄漏饶碘。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一馒吴、第九天 我趴在偏房一處隱蔽的房頂上張望扎运。 院中可真熱鬧，春花似錦饮戳、人聲如沸豪治。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)鬼吵。三九已至，卻和暖如春篮赢，著一層夾襖步出監(jiān)牢的瞬間齿椅，已是汗流浹背琉挖。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長(zhǎng)得像遣蚀，于是被迫代替她去往敵國(guó)和親矾麻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 選擇器 1. 元素選擇器(標(biāo)簽選擇器)：標(biāo)簽名 選中所有的標(biāo)簽名對(duì)應(yīng)的標(biāo)簽例:所有a標(biāo)簽 2.id選擇器：#id屬...
- <!DOCTYPE html> /*偽類專門用來(lái)表示元素的一種的特殊的狀態(tài)比如：訪問(wèn)過(guò)的超鏈接，比如普通...
- a標(biāo)簽偽類選擇器 a:link{color: #FF0000}/* 未訪問(wèn)的鏈接 */a:visited{colo...
