一 form標(biāo)簽和input標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.form標(biāo)簽
專門用來進(jìn)行用戶信息收集的一個(gè)標(biāo)簽，一般要結(jié)合表單相關(guān)的標(biāo)簽來使用才有意義。
表單相關(guān)的標(biāo)簽：input，select，textarea等
主要提供form中子標(biāo)簽的內(nèi)容的提交和重置功能
action屬性：提交路徑（接口）
method屬性：提交方式（post/get）
-->
<form action="" method="post">
</form>
<!--2.input標(biāo)簽
input標(biāo)簽是表單相關(guān)標(biāo)簽，可以在form中使用，也可以單獨(dú)使用
1）type
input標(biāo)簽會(huì)因?yàn)閠ype的不同，功能完全不一樣
2）name --區(qū)分不同的內(nèi)容；提交（相當(dāng)于字典的key）
要不要給這個(gè)屬性賦值，主要看：1.要不要區(qū)分不同的內(nèi)容。2.需不需要提交這個(gè)input標(biāo)簽的值
3）value
value的意義會(huì)根據(jù)type值得不同而不一樣；但是表單提交的時(shí)候提交的都是value的值
-->
<form action="" method="get">
<!--1)文本輸入框 --- text
a.value屬性 -- 給這個(gè)屬性賦值是在設(shè)置輸入框的默認(rèn)值；修改輸入框的內(nèi)容，會(huì)改變這個(gè)值。
b.placeholder --- 輸入框?yàn)榭盏臅r(shí)候默認(rèn)顯示的信息
c.maxlength ---- 輸入框最多能輸入的內(nèi)容的長度
-->
<font><strong>賬號：</strong></font>
<input type="text" name="tel" value="" placeholder="請輸入手機(jī)號碼" maxlength="5"/><br />
<!--2）密碼輸入框 ---password
a.value屬性 -- 給這個(gè)屬性賦值是在設(shè)置輸入框的默認(rèn)值；修改輸入框的內(nèi)容，會(huì)改變這個(gè)值。
b.placeholder --- 輸入框?yàn)榭盏臅r(shí)候默認(rèn)顯示的信息
c.maxlength ---- 輸入框最多能輸入的內(nèi)容的長度
-->
<font>密碼：</font>
<input type="password" name="pw" id="" value="" placeholder="密碼" maxlength="6"/>
<!--3）單選按鈕 -- radio
a.name屬性 --- 如果多個(gè)選項(xiàng)是一組數(shù)據(jù)必須保證他們的name屬性值一樣，才能做到多個(gè)選項(xiàng)單選。
b.value屬性 -- 不能顯示，只是用來提交的
c.checked -- 給這個(gè)屬性賦值為cheked讓按鈕處于默認(rèn)選定狀態(tài)
補(bǔ)充：可以通過將label的for屬性和input的id屬性保持一致，讓label和input關(guān)聯(lián)
-->
<br />
<font>性別：</font>
<input type="radio" name="sex" id="sex1" value="男" checked="checked"/>
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女" />
<label for="sex2">女</label>
<br />
<!--4）復(fù)選按鈕 -- checkbox
a.name屬性 --- 如果多個(gè)選項(xiàng)是一組數(shù)據(jù)必須保證他們的name屬性值一樣，才能做到多個(gè)選項(xiàng)單選。
b.value屬性 -- 不能顯示，只是用來提交的
c.checked -- 給這個(gè)屬性賦值為cheked讓按鈕處于默認(rèn)選定狀態(tài)
-->
<input type="checkbox" name="interest" id="a" value="游戲" /><label for="a">游戲</label>
<input type="checkbox" name="interests" id="b" value="旅游" /><label for="b">旅游</label>
<input type="checkbox" name="interest" id="c" value="餐廳" /><label for="c">餐廳</label>
<br />
<!--5)普通按鈕
value屬性 --- 按鈕上顯示的內(nèi)容
補(bǔ)充：button標(biāo)簽
-->
<input type="button" name="" id="" value="登陸" />
<button>登陸</button>
<button ><img width='20' height="20" src="img/luffy1.png"></button>
<!--6)重置按鈕 -- reset
重置當(dāng)前重置按鈕所在的form標(biāo)簽中所有相關(guān)標(biāo)簽里面
-->
<input type="reset" name="" id="" value="重置" />
<!--7）提交按鈕 -- submit
以‘name = value’值得方式提交當(dāng)前form標(biāo)簽中的內(nèi)容
-->
<input type="submit" value="提交"/>
<input type="color" name="1" id="" value="顏色" />
</form>
</body>
</html>
二 下拉菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--下拉菜單
seclect標(biāo)簽 -- 整個(gè)下拉列表
option標(biāo)簽 -- 列表中的選項(xiàng)
optgroup標(biāo)簽 -- 列表選項(xiàng)分組，通過label屬性值來設(shè)置分組名
（只是在顯示上對選項(xiàng)進(jìn)行分區(qū)，不影響提交值）
-->
<select name="provice">
<option value="四川省">四川省</option>
<option value="湖南省">湖南省</option>
<option value="福建省">福建省</option>
</select>
<select name="city">
<option value="南充市">南充市</option>
<option value="成都市">成都市</option>
<option value="綿陽市">綿陽市</option>
</select>
<br />
<select name="city">
<optgroup label="四川省"></optgroup>
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="綿陽">綿陽</option>
<optgroup label="廣東省"></optgroup>
<option value="珠海">珠海</option>
<option value="佛山">佛山</option>
<option value="惠州">惠州</option>
</select>
<br />
<!--2）多行文本域 --- textarea
提供一個(gè)可以換行輸入的輸入框
rows屬性 -- 行數(shù)，影響輸入框的默認(rèn)高度
cols屬性 -- 列數(shù)，影響輸入框的寬度
maxlength -- 輸入內(nèi)容的最大長度
autofocus -- 值設(shè)為autofocus,刷新的時(shí)候自動(dòng)成為焦點(diǎn)
-->
<textarea autofocus="autofocus" name="comment" rows="10" cols="20" maxlength="100" placeholder="輸入你的想法"></textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>
三 無語義標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div標(biāo)簽和span標(biāo)簽都是無語義標(biāo)簽，
使用div一般用于對網(wǎng)絡(luò)中的內(nèi)容分塊和分組
-->
<div id="">
<a >百度一下</a>
</div>
<div id="">
<a >百度一下</a>
</div>
<span>
<a >百度一下</a>
</span>
<span>
<a >百度一下</a>
</span>
</body>
</html>
四 css
<!--
1.什么是css
css又叫樣式表（層疊樣式），是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門用來針對網(wǎng)頁中內(nèi)容的布局和樣式
現(xiàn)在絕大部分使用的是css3
2.怎么寫css
1）.語法
選擇器{屬性1：屬性值1；屬性2：屬性值2}
2）.說明
選擇器 -- 選中需要設(shè)置樣式的標(biāo)簽；在內(nèi)聯(lián)樣式表中選擇器需要省略
{} -- 固定寫法
屬性 -- 屬性是以‘屬性：屬性值’的形式成對出現(xiàn)，多個(gè)屬性之間用分號隔開
值 -- 如果是數(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）
rgb（255,0,0） ==#ff0000==red
rgb（0,255,0）==#00ff00==green
rgb（0，0，0） ==#00000==black
rgb（255，255，255）=#ffffff==white
透明度 --- 0（完全透明）~1（完全不透明）
3.寫在哪兒
1)內(nèi)聯(lián)樣式表:將樣式寫在標(biāo)簽的style屬性中
只作用于一個(gè)固定的標(biāo)簽
2)內(nèi)部樣式表：將樣式寫在style標(biāo)簽中
作用于當(dāng)前html文件
3)外部樣式表：將樣式寫在css文件中，然后在html中通過link標(biāo)簽導(dǎo)入
復(fù)用性：外部>內(nèi)部>內(nèi)聯(lián)
優(yōu)先級：不管什么情況內(nèi)聯(lián)的優(yōu)先級最高、內(nèi)部和外部的優(yōu)先級看順序，誰后寫誰的優(yōu)先級高
4.常見屬性
color：設(shè)置標(biāo)簽中的字體顏色
background——color：設(shè)置標(biāo)簽的背景顏色
font——size:字體大小
width：標(biāo)簽寬度
heigth：標(biāo)簽高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--2.內(nèi)部樣式-->
<style type="text/css">
/*這個(gè)里面寫css代碼*/
div{
color: orange;
background: darkblue;
}
h1{
color: palegoldenrod;
background: yellow;
}
</style>
<!--3.外部樣式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
<h2>人</h2>
</head>
<body>
<!--1.內(nèi)聯(lián)樣式-->
<p style="color: red; font-size:30px;">nihao</p>
<h1>我是神</h1>
</body>
</html>
五 選擇器
<!--
1.什么是選擇器
通過選擇器選中標(biāo)簽
2.選擇器的寫法
1）元素選擇器（標(biāo)簽選擇器）
直接將標(biāo)簽名作為選擇器，選中當(dāng)前html中對應(yīng)的所有標(biāo)簽。
例如：a{} --選中當(dāng)前html中所有的a標(biāo)簽
2）id選擇器
（所有的標(biāo)簽都有一個(gè)id屬性，但是要保證一個(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)簽
4）通配符
將*作為選擇器，選中當(dāng)前html中所有的標(biāo)簽
5)群組選擇器
將多個(gè)選擇器用逗號隔開來作為一個(gè)選擇器，選中每個(gè)獨(dú)立選擇器對應(yīng)的標(biāo)簽
p，a{} -- 選中所有的p標(biāo)簽和a標(biāo)簽
div，#a {} --選中所有的div標(biāo)簽和id值是a的標(biāo)簽
#p1,.c1,.c2{} --- 選中id值是p1，class值是c1，c2的所有標(biāo)簽
6）后代選擇器
將多個(gè)選擇器用空格隔開來作為一個(gè)選擇器，
div p{} --- 選中所有div標(biāo)簽中的p標(biāo)簽
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1、元素選擇器*/
h1{
color: red;
}
/*2.id選擇器*/
#q{
background-color: green;
}
/*3.class選擇器*/
.1{
font-size: 10px;
font-family: "微軟雅黑";
font-weight: 200;
}
</style>
</head>
<body>
<!--class屬性
1.一個(gè)html中相同的class值可以有多個(gè)
2.同一個(gè)標(biāo)簽的class屬性值可以多個(gè)(多個(gè)之間用空格隔開)
-->
<p>我是標(biāo)題</p>
<div id="">
<div id="">
<h1 class="1">人們</h1>
</div>
<h1 id="q" class="1 2">haha</h1>
</div>
<h1 class='2'>heihie</h1>
<hr />
</body>
</html>
六 偽類選擇器
<!--
1.偽類選擇器
普通選擇器選中的是html中不同的標(biāo)簽，偽類選擇器選中的是標(biāo)簽的不同狀態(tài)。
2.語法
普通選擇器：狀態(tài){屬性1：屬性值1；屬性2：屬性值2}
1）link -- 初始狀態(tài)，對于a標(biāo)簽來說，link對應(yīng)的狀態(tài)是a標(biāo)簽中的鏈接從來沒有成功訪問過（一般只在超鏈接（a）標(biāo)簽進(jìn)行設(shè)置）
2）visited -- 超鏈接已經(jīng)成功訪問過的狀態(tài)，一般也是作用于a標(biāo)簽
3）hover -- 鼠標(biāo)懸停在標(biāo)簽上對應(yīng)的狀態(tài)（不只針對超鏈接，其他標(biāo)簽也常用）
4）active-- 鼠標(biāo)按住標(biāo)簽不放對應(yīng)的狀態(tài)（主要作用在超鏈接和按鈕）
3.選擇器的權(quán)重值
權(quán)重越大優(yōu)先級越高，但是內(nèi)聯(lián)樣式表的優(yōu)先級永遠(yuǎn)最高。。。。
元素選擇器的權(quán)重：0001 == 1
class選擇器的權(quán)重：0010 == 2
id選擇器的權(quán)重是：0100 == 4
偽類選擇器的權(quán)重是：0001 ==1
群組選擇器的權(quán)重是看每個(gè)單獨(dú)選擇器的權(quán)重
后代選擇器的權(quán)重：所有選擇器的權(quán)重之和
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: rgb(120,120,120);
}
a:visited{
color: yellow;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color: gray;
}
button:active{
color: yellowgreen;
}
</style>
</head>
<body>
<a >百度一下</a>
<p>段落</p>
<button>按鈕</button>
<a href="05-css.html">打開文件</a>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
