一：表單標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表單標(biāo)簽（form）
表單標(biāo)簽一般用來做用戶信息收集，單獨(dú)用沒有意義，一般是結(jié)合相關(guān)標(biāo)簽來使用
（input,select,textarea）
表單標(biāo)簽可以對包含在這個(gè)標(biāo)簽中的其他標(biāo)簽做信息的提交和重置
action:提交位置（接口相關(guān)）
method:請求方式（get/post）
-->
<form action="" method="post">
</form>
<!--input
單標(biāo)簽
1.type屬性：決定輸入框的樣式
text(默認(rèn)):普通的文本輸入框
2.name屬性：
主要用來區(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)容就是修改value值
-->
<form action="" method="post">
<!--txet：文本輸入框
placeholder：占位符（輸入框中的提示信息）
maxlength : 輸入框中最多輸入的字符個(gè)數(shù)
-->
<input type="text" name="tel" value="12345" placeholder="請輸入電話號碼" maxlength="10"/>
<input type="text" name="email" id="" value="" />
<!--password:密碼輸入框
placeholder：占位符（輸入框中的提示信息）
maxlength : 輸入框中最多輸入的字符個(gè)數(shù)
-->
<input type="password" name="密碼" id="" value="123456" placeholder="請輸入密碼" />
<!--radio:單選按鍵
name - 同一組數(shù)據(jù)對應(yīng)的name值設(shè)置成一樣的才能做到單選
value - 這兒的value只是用于數(shù)據(jù)提交，不會顯示出來
checked="checked" --讓按鈕處于默認(rèn)選中狀態(tài)
-->
<!--讓文字和按鈕關(guān)聯(lián)，文字用label標(biāo)簽顯示，for屬性與 id 屬性一樣，點(diǎn)文字與點(diǎn)按鈕效果一樣-->
<input type="radio" name="sex" id="3" value="" /><label for="3">男生</label>
<input type="radio" name="sex" id="" value="女生" checked="checked" /><font>女</font>
<!--checkbox : 復(fù)選按鈕
name - 同一組數(shù)據(jù)的name值要一樣
value - 這兒的value只是用于數(shù)據(jù)提交，不會顯示出來
-->
<input type="checkbox" name="s" id="" value="生物" /><font>生物</font>
<input type="checkbox" name="s" id="" value="物理" /><font>物理</font>
<!--button : 普通按鈕
value - 值可以顯示在按鈕上，不會提交。
-->
<input type="button" name="" id="" value="按一下" />
<!--submit : 提交按鈕
這個(gè)按鈕的點(diǎn)擊事件是將當(dāng)前所在的form標(biāo)簽中，設(shè)置了name屬性的相關(guān)標(biāo)簽數(shù)據(jù)以name =value的形式提交
-->
<input type="submit" name="" id="" value="提交" />
<!--reset ： 重置按鈕
將當(dāng)前所在的form標(biāo)簽中，將所有標(biāo)簽設(shè)置成初始狀態(tài)
-->
<input type="reset" name="" id="" value="重置" />
<input type="color" name="" id="" value="" />
</form>
<!--button標(biāo)簽（中間可以放圖片）-->
<button>登陸</button>
</body>
</html>
二：下拉列表和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表和多行文本域</title>
</head>
<body>
<!--下拉列表（菜單）
select標(biāo)簽 - 代表整個(gè)下拉列表
option標(biāo)簽 - 代表列表中的每個(gè)選項(xiàng)
可以通過設(shè)置selected="selected"來讓這個(gè)選項(xiàng)默認(rèn)選中
optgroup - 設(shè)置label的值來對當(dāng)前下拉菜單內(nèi)容進(jìn)行分組
-->
<select name="省">
<optgroup label="大陸"></optgroup>
<option value="四川省">四川省</option>
<option selected="selected" value="哈哈省">哈哈省</option>
<option value="東北省">東北省</option>
<option value="華東">華東</option>
</select>
<select name="">
<optgroup label="市"></optgroup>
<option value="成都市">成都市</option>
<option value="峨眉市">峨眉山</option>
</select>
<!--多行文本域
textarea - 輸入框，可以同時(shí)顯示多行內(nèi)容（可以上下滾動(dòng)，自動(dòng)換行）
name - 區(qū)分和提交
rows - 行數(shù)（不滾動(dòng)最多能顯示的行數(shù)，影響輸入框的高度）
cols - 列數(shù)（一行顯示的文字的數(shù)量，影響輸入框的寬度）
placeholder - 占位符
maxlength - 限制文字輸入的個(gè)數(shù)
-->
<textarea name="" rows="" cols="" placeholder="請輸入你的問題">默認(rèn)文字</textarea>
</body>
</html>
三：div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. div和span都是無語義標(biāo)簽：網(wǎng)頁中分組分塊，可以將div作為容器，
div占一行
2. html中標(biāo)簽分類：行內(nèi)標(biāo)簽，塊級標(biāo)簽
塊級標(biāo)簽：一個(gè)占一行。例如div、h1、p、列表、table、tr、form
行內(nèi)標(biāo)簽：一行顯示多個(gè).例如span、td、input、select、textarea
-->
<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)，主要用來設(shè)置網(wǎng)頁中內(nèi)容布局和樣式
2.怎么寫CSS（語法）
選擇器｛屬性名1：屬性值1 ; 屬性名2：屬性值2 ……｝
選擇器 - 選中想要設(shè)置樣式的標(biāo)簽
｛｝ - 固定寫法
屬性 - 屬性名和屬性值用冒號連接，多個(gè)屬性之間用分號分開，如果沒有分號分導(dǎo)致后面的樣式都無效
屬性名必須是CSS提供的屬性（大概200多個(gè)）
屬性值 ： 表示大小的數(shù)值必須加單位（px - 像素 em - 空格數(shù) ）（也可以使用百分比，相對于父標(biāo)簽）
a.常用屬性
color - 字體顏色
backgroud-color - 背景顏色
font-size - 字體大小
width - 寬度
height - 高度
3.CSS寫在哪兒
a. 內(nèi)聯(lián)樣式表 ：將樣式表寫在標(biāo)簽的style屬性中；注意：這種樣式表不需要寫‘選擇器｛｝’，直接給屬性賦值
b. 內(nèi)部樣式表 ：將樣式表寫在style標(biāo)簽中（這個(gè)標(biāo)簽可以放在head中，也可以放在body中）
c. 外部樣式表 ：將樣式表寫在一個(gè)CSS文件中，在head中通過link導(dǎo)入
內(nèi)聯(lián)樣式表不管在什么情況下，優(yōu)先績都是最高的
內(nèi)部樣式和外部樣式，誰后寫誰的優(yōu)先級高
4.CSS中的值
顏色：顏色英文單詞，#16進(jìn)制顏色值，rgb(紅，綠，藍(lán) )，rgba(紅，綠，藍(lán),透明度); 透明度范圍0-1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--3.外部樣式表
link - 導(dǎo)入外部文件
rel - 導(dǎo)入的文件的作用,stylesheet樣式表，icon設(shè)置網(wǎng)頁圖標(biāo)
type - 對導(dǎo)入的文件類型說明，類型/文件后綴
text/css - 導(dǎo)入一個(gè)文本文件，文件后綴是css
href - 文件路徑
-->
<!--導(dǎo)入一個(gè)外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/04CSS基礎(chǔ).css"/>
<link rel="icon" type="img/jpg" href="img/QQ圖片20190122144809.jpg"/>
<!--內(nèi)部樣式表-->
<style type="text/css">
/*在這兒寫CSS代碼*/
div{
background: sandybrown;
}
/*一個(gè)style標(biāo)簽中，可以寫多個(gè)樣式表*/
p{
color: slateblue;
}
</style>
</head>
<body>
<!--1.內(nèi)聯(lián)樣式表-->
<div style="color:red; font-size: 40px;">
我是div1
</div>
<p>我是段落</p>
<div id="">
我是div2
</div>
<h1>我是標(biāo)題</h1>
</body>
</html>
五：選擇器
<!--
選擇器（選中標(biāo)簽）
1.元素選擇器（標(biāo)簽選擇器）：
直接將標(biāo)簽名作為選擇器，選中所有指定標(biāo)簽，
例如：div{} , p{} , a{}選中所有這個(gè)名字的標(biāo)簽
2.id選擇器
將標(biāo)簽的id屬性值前面加#做為選擇器，選中id屬性值是指定的值的標(biāo)簽
注意：一個(gè)頁面中id值要唯一（不同標(biāo)簽的id值不一樣）
例如：#p2｛｝
3.class選擇器（類選擇器）
將標(biāo)簽的class屬性值前面加 . 做為選擇器，選中所有class屬性值是指定值的標(biāo)簽
4. *（通配符）
直接將星號作為選擇器，選中當(dāng)前頁面中所有的標(biāo)簽
例如： *{}
5. 群組選擇器
將多個(gè)選擇器用逗號隔開作為一個(gè)選擇器，選中每個(gè)單獨(dú)的選擇器選中的所有標(biāo)簽。
例如：a,p{} 選中所有a和p標(biāo)簽
#p1,div{} 選中id值是p1和所有的div標(biāo)簽
.c1,#p1,a{} 選中所有class值是c1,id值是p1和所有的a標(biāo)簽
6.層級選擇器（后代選擇器）
將多個(gè)選擇器用空格隔開作為一個(gè)選擇器，按層級選中最后一個(gè)選擇器選中的標(biāo)簽
例如： div .c1{} - 選中所有在div標(biāo)簽中的class值是c1的標(biāo)簽
.c1 .c2 #d1{} - 選中class是c1中class是c2的id是d1的標(biāo)簽
7.選擇器的權(quán)重
不同的選擇器的權(quán)重值不一樣；權(quán)重值越大優(yōu)先績越高，只有在權(quán)重相同的時(shí)候，誰后寫誰優(yōu)先績高
不管什么情況，內(nèi)聯(lián)樣式優(yōu)先績最高
元素選擇器 ： 0001（1）
class選擇器：0010（2）
id選擇器：0100（4）
通配符：0001（1）
群組選擇器：分開看每一個(gè)選擇器的權(quán)重
后代選擇器：用空格分開的是所有選擇器權(quán)重之和
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
}
#p2{
background-color: #FF4500;
}
/*class選擇器*/
.c1{
color: deeppink;
font-size: 30px;
}
</style>
</head>
<body>
<p id="p2">我是段落</p>
<!--class=后面可以加多個(gè)值，用空格隔開-->
<div class="c1">我是div</div>
<h1 class="c1">我是標(biāo)題</h1>
</body>
</html>
六：偽類選擇器
<!--偽類選擇器
普通選擇器是選中某一個(gè)標(biāo)簽，偽類選擇器是選中標(biāo)簽的某種狀態(tài)
1.語法：
普通選擇器：狀態(tài)｛｝
2.創(chuàng)建狀態(tài)
link - 初始狀態(tài)（對于a標(biāo)簽來說，初始狀態(tài)指的是標(biāo)簽對應(yīng)的地址沒有成功訪問過的時(shí)候）
visited - 訪問后的狀態(tài)（一般針對a標(biāo)簽）
hover - 鼠標(biāo)懸停在標(biāo)簽上的時(shí)候?qū)?yīng)的狀態(tài)
active -鼠標(biāo)按住不放的時(shí)候
注意：1.狀態(tài)前不是只能寫元素選擇器，更不是只能寫a標(biāo)簽
2.需要遵守‘愛恨’原則，'loVeHAte'
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*設(shè)置a標(biāo)簽所有狀態(tài)的樣式*/
/*a{
color: aqua;
}*/
a:link{
color: red;
}
a.visited{
color: greenyellow;
}
a:hover{
color: darkorange;
background-color: gray;
font-size: 30px;
}
a:active{
background-color: red;
}
</style>
</head>
<body>
<a href="http://www.itdecent.cn/u/ba8efa9a6f67">你好，青春！</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ù)。
