表單標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 1.表單標(biāo)簽（form）
專門(mén)用來(lái)收集用戶信息收集的一個(gè)標(biāo)簽，一般結(jié)合表單相關(guān)的標(biāo)簽來(lái)使用才有意義
表單相關(guān)標(biāo)簽：input、select、textarea
主要提供form中字標(biāo)簽的內(nèi)容的提交和重置
action屬性：提交路徑（接口
method屬性：提交方式（post/get）
-->
<!-- 2.input標(biāo)簽
input是表單相關(guān)標(biāo)簽，可以在form中使用，也可以不放在里面
input標(biāo)簽會(huì)因?yàn)閠ype值的不同功能完全不一樣
1）.input標(biāo)簽會(huì)因?yàn)閠ype的不同，功能完全不一樣
2）.name - 區(qū)分不同的內(nèi)容，提交（相當(dāng)于字典的key）
要不要給之歌屬性賦值，主要看：
a.需不需要區(qū)分不同的內(nèi)容
b.需不需要提交這個(gè)input的值
3）.value
-->
<form action="" method="get">
<!-- 1.文本輸入框 - text
a.value - 給這個(gè)屬性賦值是在設(shè)置輸入框的默認(rèn)值；修改輸入框中的內(nèi)容是改變value的值
b.placeholder - 輸入框?yàn)槟J(rèn)值時(shí)候的顯示信息
c.maxlength - 輸入框最多能能輸入的字符串的長(zhǎng)度
-->
賬號(hào)：<input type="text" name="username" id="" value="" placeholder="請(qǐng)輸入手機(jī)/郵箱/賬號(hào)" maxlength="20"/>
<br><br>
<!-- 2.密碼輸入框
a.value - 給這個(gè)屬性賦值是在設(shè)置輸入框的默認(rèn)值；修改輸入框中的內(nèi)容是改變value的值
b.placeholder - 輸入框?yàn)槟J(rèn)值時(shí)候的顯示信息
c.maxlength - 輸入框最多能能輸入的字符串的長(zhǎng)度
-->
密碼：<input type="password" name="psw" id="" value="" placeholder="請(qǐng)輸入密碼"/>
<!-- <input type="submit" value=""/> -->
<br><br>
<!-- 3.單選按鈕 - radio
a.name - 如果多個(gè)對(duì)象是一組數(shù)據(jù)，必須保證他們的name值一樣，才能做到多個(gè)選項(xiàng)單選
b.value - 不能顯示，只能提交
c.checked - 給這個(gè)屬性賦值為checked讓按鈕處于默認(rèn)選中狀態(tài)
補(bǔ)充：可以通過(guò)將label的for屬性和input的id屬性保持 一致，讓label和input進(jìn)行關(guān)聯(lián)
-->
性別：<input type="radio" name="gender" id="sex1" value="男" checked="checked"/><label for="sex1">男</label><input type="radio" name="gender" id="sex2" value="女" /><label for="sex2">女</label>
<br><br>
<!-- 4.多選按鈕 - checkbox
a.name - 如果多個(gè)對(duì)象是一組數(shù)據(jù)，必須保證他們的name值一樣
b.value - 不能顯示，只能提交
c.checked - 給這個(gè)屬性賦值為checked讓按鈕處于默認(rèn)選中狀態(tài)
-->
興趣愛(ài)好：<label for="hobby1">游戲</label><input type="checkbox" name="hobby" id="hobby1" value="游戲" />
<label for="hobby2">音樂(lè)</label><input type="checkbox" name="hobby" id="hobby2" value="音樂(lè)" />
<label for="hobby3">旅游</label><input type="checkbox" name="hobby" id="hobby3" value="旅游" />
<label for="hobby4">動(dòng)漫</label><input type="checkbox" name="hobby" id="hobby4" value="動(dòng)漫" />
<br><br>
<!-- 5.普通按鈕 - button
value - 按鈕上顯示的內(nèi)容
補(bǔ)充：button標(biāo)簽
-->
<input type="button" id="" value="登錄" />    <button type="button"><img src="img/aaa.ico" ></button>
<br><br>
<!-- 6.重置按鈕 - reset
重置當(dāng)前按鈕所在的form標(biāo)簽中的所有相關(guān)標(biāo)簽的值
-->
<!-- 7.提交按鈕 - submit
以name = value 值的方式提交當(dāng)前form標(biāo)簽中的內(nèi)容
-->
<!-- 8.其他
-->
   <input type="submit" name="" id="" value="提交" />    </em><input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 下拉菜單 - select
select - 指向整個(gè)下拉列表
option - 列表中的選項(xiàng)
optgroup - 通過(guò)label 設(shè)置分組（只是在顯示上對(duì)選項(xiàng)進(jìn)行分區(qū)，不影響提交結(jié)果）
-->
<form action="" method="get">
<select name="provinece">
<option value="四川">四川</option>
<option value="云南">云南</option>
<option value="貴州">貴州</option>
<option value="湖南">湖南</option>
</select>
<select name="city">
<optgroup label="四川省"></optgroup>
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="綿陽(yáng)">綿陽(yáng)</option>
<option value="宜賓">宜賓</option>
<optgroup label="廣東省"></optgroup>
<option value="中山">中山</option>
<option value="珠海">珠海</option>
<option value="云浮">云浮</option>
<option value="東莞">東莞</option>
</select>
<br><br>
<!-- 2.多行文本域 - textarea
提供一個(gè)可以換行的多行輸入框
rows - 設(shè)置高度行數(shù)
cols - 設(shè)置寬度列數(shù)
-->
<!-- 3.其他
autofoucs - 頁(yè)面加載自動(dòng)獲得焦點(diǎn)
-->
留言區(qū)：<textarea name='comment' rows="3" cols="">
</textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>
無(wú)語(yǔ)義標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- div標(biāo)簽和span標(biāo)簽都是無(wú)語(yǔ)義標(biāo)簽
使用div一般用于對(duì)網(wǎng)頁(yè)的內(nèi)容分塊和分組
-->
<div id="">div1</div>
<div id="">div2</div>
<span id="">span1</span><span id="">span2</span>
</body>
</html>
CSS基礎(chǔ)
<!--1.什么是CSS
css又叫樣式表，是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門(mén)用來(lái)針對(duì)網(wǎng)頁(yè)中內(nèi)容的布局和樣式
現(xiàn)在絕大部分使用的是css3
2.怎么寫(xiě)css
a.語(yǔ)法
選擇器{屬性1:屬性值1;屬性2:屬性值2}
b.說(shuō)明
選擇器{} - 選中需要設(shè)置樣式的標(biāo)簽；在內(nèi)聯(lián)的樣式表中選擇器需要省略
c.屬性 - 屬性是以屬性：屬性值的形式成對(duì)出現(xiàn)，多個(gè)屬性要用分號(hào)隔開(kāi)
d.值 - 如果是數(shù)字表示大小，數(shù)字后面必須加單位：px(像素)，em（空格數(shù)）
顏色值：顏色的英文單詞、#十六進(jìn)制顏色值、rgb（r，g，b）、rgba（r,g,b,透明度）
rgb顏色：r - red（0 - 255）g - green（0 - 255）b - blue（0 - 255）
3.寫(xiě)在那兒
1）.內(nèi)聯(lián)樣式表：將樣式寫(xiě)在標(biāo)簽的style屬性中
只有作用于一個(gè)固定的標(biāo)簽
2）.內(nèi)部樣式表：將樣式寫(xiě)在style標(biāo)簽中
作用于當(dāng)前文件
3）.外部樣式表：將樣式寫(xiě)在css文件中，然后在html中通過(guò)link標(biāo)簽導(dǎo)入
可以作用于html的所有標(biāo)簽
復(fù)用性：外部>內(nèi)部>內(nèi)聯(lián)
優(yōu)先級(jí)：內(nèi)聯(lián)樣式表的優(yōu)先級(jí)不管什么情況都是最高的、內(nèi)部和外部的優(yōu)先級(jí)看順序，誰(shuí)后寫(xiě)誰(shuí)優(yōu)先級(jí)高
4.常見(jiàn)屬性
color：設(shè)置標(biāo)簽中的自提顏色
background - color - 設(shè)置標(biāo)簽的背景顏色
width - 寬度
height - 高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 2.內(nèi)部樣式 -->
<style type="text/css">
/* 這個(gè)里面寫(xiě)css代碼 */
div{
color: darkorange;
background-color: lightblue;
}
h1{
color: purple;
background-color: lightgreen;
}
</style>
<!-- 3.外部樣式表 -->
<link rel="stylesheet" type="text/css" href="css/04-css基礎(chǔ).css">
</head>
<body>
<!-- 1.內(nèi)聯(lián)樣式 -->
<p style="color: deepskyblue; font-size: 30px;">二號(hào)位</p>
<div id="">
我是div
</div>
<h1>我是h1</h1>
</body>
</html>
選擇器
<!--1.什么是選擇器
通過(guò)選擇器選中標(biāo)簽
2.選擇器的寫(xiě)法
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選擇器）
將標(biāo)簽的class屬性的值前面加.作為選擇器，選中class屬性值指定的標(biāo)簽
例如 .a - 選中當(dāng)前html中class是a的所有標(biāo)簽
4).通配符
將*作為選擇器，選中當(dāng)前html中所有的標(biāo)簽
5).群組選擇器
將多個(gè)選擇器用逗號(hào)隔開(kāi)來(lái)作為一個(gè)選擇，選中每個(gè)獨(dú)立選擇器對(duì)應(yīng)的標(biāo)簽
例如：p,a{} - 選中所有的p標(biāo)簽和a標(biāo)簽
6).后代選擇器
將多個(gè)選擇器用空格隔開(kāi)來(lái)作為一個(gè)選擇器
例如:div p{}選中所有div標(biāo)簽中的p標(biāo)簽
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
width: 250px;
}
/* 1.標(biāo)簽選擇器 */
p{
color: #FF8C00;
}
/* 2.id選擇器 */
#a{
font-size: 50px;
}
/* 3.class選擇器 */
.c1{
background-color: brown;
}
.c2{
font-size: 40px;
}
</style>
</head>
<body>
<!-- class屬性
1.一個(gè)html中的class值可以有多個(gè)
2.同一個(gè)標(biāo)簽的class屬性值可以多個(gè)
3.同一個(gè)標(biāo)簽設(shè)置多個(gè)class中間用逗號(hào)隔開(kāi)
-->
<p>我是段落1</p>
<div id="">
<div id="">
<p id="a" class="c1">我是段落2</p>
<h1 class="c1 c2">我是標(biāo)題1</h1>
</div>
</div>
<p class="c2">我是段落3</p>
<!-- ============================================= -->
<hr>
</body>
</html>
偽類選擇器
<!--1.偽類選擇器
普通標(biāo)簽選中的是html中不同的標(biāo)簽；偽類選擇器選中的是標(biāo)簽的不同狀態(tài)
2.語(yǔ)法
普通選擇器：狀態(tài){屬性1:屬性值1;屬性2:屬性值2.....}
1): link - 初始狀態(tài)，一般只在a標(biāo)簽中使用，對(duì)于a標(biāo)簽來(lái)說(shuō)link指超鏈接中的鏈接從來(lái)沒(méi)有成功剛問(wèn)過(guò)
2):visited - 超鏈接訪問(wèn)過(guò)的狀態(tài)
3):hover - 鼠標(biāo)懸浮在超鏈接上的狀態(tài)
4):active - 激活狀態(tài)，鼠標(biāo)按著不放的狀態(tài)，主要用于超鏈接和按鈕
3.選擇器的權(quán)重值
權(quán)重越大優(yōu)先級(jí)越高，內(nèi)聯(lián)永遠(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: red;
text-decoration: none;
}
/* 2.a:visited */
a:visited{
color: green;
}
/* 3.a:hover */
a:hover{
color: brown;
text-decoration: underline;
}
/* 4.a:active */
a:active{
color: #FF8C00;
font-size: 30px;
}
</style>
</head>
<body>
<a >來(lái)點(diǎn)我一下</a>
<br><br>
<button type="button">我是一個(gè)按鈕</button>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
