一缕坎、表單標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表單標簽(form)
表單標簽一般用來做用戶信息收集窄赋，單獨用沒有意義，一般是結合相關標簽來使用(input, select,textarea)
表單標簽可以對包含在這個標簽中的其他標簽做信息的提交和重置
action：提交位置（接口相關）
method：請求方式（get/post）
-->
<form action="" method="post">
</form>
<!--2.input
單標簽
1）type屬性：
決定輸入框的樣式
text(默認) - 普通的文本輸入框
2）name屬性：
這個屬性主要用來區(qū)分數(shù)據(jù)的嫂便。提交的時候是以name=value的形式提交
3）value屬性：
單標簽中的value相當于雙標簽的內(nèi)容捞镰；但是value的值只能是文本
設置value屬性其實就是設置輸入框中默認顯示的內(nèi)容；修改內(nèi)容其實就是在修改value值
-->
<form action="" method="get">
<!--1.text：文本輸入框
placeholder - 占位符(提示信息)
maxlength - 最多輸入的字符個數(shù)
-->
<input type="text" name="tel" value="123456" placeholder="請輸入電話號碼" maxlength="6"/>
<input type="text" name="email" id="" value="" />
<!--2.password:密碼輸入框
placeholder - 占位符(提示信息)
maxlength - 最多輸入的字符個數(shù)
-->
<input type="password" name="密碼" value="" placeholder="請輸入密碼(3-6位)" maxlength="8"/>
<!--3.radio：單選按鈕
name - 同一組數(shù)據(jù)對應的name值設置成一樣的毙替，才能做到單選
value - 這兒的value只是用于數(shù)據(jù)提交岸售，不能顯示
checked - 設置為checked讓按鈕處于默認選中狀態(tài)
-->
<input type="radio" name="sex" id="" value="男生" checked="checked"/><font>男</font>
<input type="radio" name="sex" id="" value="女生" /><font>女</font>
<br />
<!--4.checkbox:復選按鈕
name - 同一組數(shù)據(jù)的name值要一樣
value - 這兒的value只是用于數(shù)據(jù)提交，不能顯示
-->
<input type="checkbox" name="instr" id="" value="教育" checked="checked"/><font>教育</font>
<input type="checkbox" name="instr" id="" value="互聯(lián)網(wǎng)" /><font>互聯(lián)網(wǎng)</font>
<input type="checkbox" name="instr" id="" value="食品" /><font>食品</font>
<br />
<!--5.button:普通按鈕
value - 對應的值會顯示在按鈕上
-->
<input type="button" name="" id="" value="登錄" />
<!--6.submit：提交按鈕
這個按鈕的點擊事件是將當前所在的form標簽中厂画，
設置了name屬性的相關的標簽的數(shù)據(jù)以"name=value"的形式提交
-->
<input type="submit" name="" id="" value="提交" />
<!--7.reset
這個按鈕的點擊事件是將當前所在的form標簽中凸丸，所有標簽設置成初始狀態(tài)
-->
<input type="reset" name="" id="" value="重置" />
</form>
<!--2.button標簽-->
<button>注冊</button>
</body>
</html>
二、下拉列表和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.下拉列表(菜單)
select標簽 - 代表整個下拉列表
option標簽 - 代表列表中的每個選項袱院；
可以通過設置selected屬性的值為"selected",來讓這個選項默認選中
optgroup標簽 - 設置label的值來對當前下拉菜單的內(nèi)容進行分組
-->
<select name="省">
<optgroup label="省"></optgroup>
<option value="四川省">四川省</option>
<option value="云南省">云南省</option>
<option value="吉林省">吉林省</option>
<option selected="selected" value="遼寧省">遼寧省</option>
<option value="黑龍江省">黑龍江省</option>
<optgroup label="直轄市"></optgroup>
<option value="北京">北京</option>
<option value="重慶">重慶</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
</select>
<select name="市">
<option value="">成都市</option>
<option value="">綿陽</option>
<option value="">巴中</option>
<option value="">宜賓</option>
<option value="">達州</option>
</select>
<!--2.多行文本域
textarea標簽 - 輸入框屎慢，可以同時顯示多行內(nèi)容(可以自動換行和上下滾動)
name屬性 - 區(qū)分和提交
rows - 行數(shù)（不滾動最多能顯示的行數(shù)，影響輸入框的高度）
cols - 列數(shù) (一行顯示的文字的數(shù)量忽洛， 影響輸入框的寬度)
placeholder - 占位符
maxlength - 限制輸入的文字的個數(shù)
-->
<textarea name="message" rows="4" cols="40" maxlength="200" placeholder="輸入你的問題">默認文字</textarea>
</body>
</html>
三腻惠、div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/CSS基礎.css"/>
</head>
<body>
<!--
1.div和span都是無語義標簽:網(wǎng)頁中內(nèi)容分組很快，都可以使用div作為容器
1.html中標簽分類：行內(nèi)標簽欲虚、塊級標簽
塊級標簽: 一個占一行,例如：div集灌、h1、p复哆、列表,table欣喧、tr腌零、form， option...
行內(nèi)標簽: 一行顯示多個,例如：span唆阿、font益涧、td、input驯鳖、select闲询、textarea...
-->
<textarea name="" rows="" cols=""></textarea>
<textarea name="" rows="" cols=""></textarea>
<div id="">
div1
</div>
<div>
div2
</div>
<span id="">
span1
</span>
<span id="">
span2
</span>
</body>
</html>
四、CSS基礎
1.什么是CSS(層疊樣式表臼隔，簡稱樣式表)
css是web標準中的表現(xiàn)標準嘹裂，主要用來設置網(wǎng)頁中內(nèi)容的布局和樣式
2.怎么寫css（語法）
a.語法
選擇器{屬性名1:屬性值1;屬性名2:屬性值2...}
b.說明
選擇器 - 選中想要設置樣式的標簽
{} - 固定寫法
屬性 - 屬性名和屬性值用冒號連接妄壶，多個屬性之間用分號隔開(如果沒有分號摔握，會導致后面的樣式無效)
屬性名必須是css提供的屬性（大概兩百多個）
屬性值：表示大小的數(shù)值必須加單位， px - 像素丁寄， em - 空格數(shù)氨淌；也可以使用百分比(相對父標簽)，100%, 20%
c.常用屬性
color - 字體顏色
background-color - 背景顏色
font-size - 字體大小
width - 寬度
height - 高度
3.css寫在哪兒
a.內(nèi)聯(lián)樣式表:將樣式表寫在標簽的style中伊磺； 注意：這種樣式表不需要寫"選擇器{}"盛正，直接給屬性賦值
b.內(nèi)部樣式表:將樣式表寫在style標簽中（這個標簽可以放在head中，可以放在body中）
c.外部樣式表:將樣式表寫在一個css文件中屑埋，然后在head中通過link導入
內(nèi)聯(lián)樣式表不管在什么情況下豪筝，優(yōu)先級都是最高的。
內(nèi)部樣式和外部樣式摘能，誰后寫续崖，誰的優(yōu)先級高
4.css中的值
顏色：顏色的英文單詞, #16進制顏色值, rgb(紅,綠,藍), rgba(紅,綠,藍,透明度)；透明度的范圍：0-1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--3.外部樣式表
link標簽 - 導入外部文件
rel屬性 - 導入的文件的作用团搞，stylesheet -> 樣式表严望，icon->設置網(wǎng)頁圖標
type屬性 - 導入的文件的類型說明， 類型/文件后綴
text/css - 導入一個文本文件逻恐，文件后綴是css
href屬性 - 文件路徑
-->
<!--導入一個外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/CSS基礎.css"/>
<!--設置網(wǎng)頁圖標-->
<link rel="icon" type="image/jpg" href="img/QQ圖片20190122144740.jpg"/>
<!--2.內(nèi)部樣式表-->
<style type="text/css">
/*在這寫css代碼*/
div{
background-color: sandybrown;
}
/*一個style標簽中可以寫多個樣式表*/
p{
color: slateblue;
}
</style>
</head>
<body>
<!--1.內(nèi)聯(lián)樣式表-->
<div style="color: rgba(0, 255, 0,0.5); font-size: 40px;">
我是div1
</div>
<p>我是段落</p>
<div id="">
我是div2
</div>
<h1>我是標題</h1>
</body>
</html>
五像吻、選擇器(選中標簽)
1.元素選擇器(標簽選擇器)：
直接將標簽名作為選擇器，選中所有指定標簽复隆；
例如：div{}, p{},a{}....
2.id選擇器
將標簽的id屬性值前面加#作為選擇器拨匆，選中id屬性值是指定的值的標簽
注意：一個頁面中id值要唯一(不同標簽的id值不一樣)
例如：#p2
3.class選擇器(類選擇器)
將標簽的class屬性值前面加.作為選擇器，選中所有class屬性值是指定值的標簽
4.*(通配符)
直接將作為選擇器挽拂，選中當前頁面中所有的標簽
例如:
5.群組選擇器
將多個選擇器用逗號隔開作為一個選擇器惭每，選中每個單獨的選擇器選中的所有標簽
例如：a,p{} - 選中所有的a標簽和p標簽
#p1,div{} - 選中id是p1的標簽和所有的div標簽
.c1,#p1,a{} - 選中所有class值是c1，id值是p1的標簽和所有a標簽
6.層級選擇器（后代選擇器）
將多個選擇器用空格隔開作為一個選擇器轻局，按層級選中最后一個選擇器選中的標簽
例如：div .c1{} - 選中所有在div中的洪鸭，class是c1的標簽
7.選擇器的權重
不同的選擇器的權重值不一樣样刷，權重值越大優(yōu)先級越高，在權重相同的時候览爵，誰后寫誰優(yōu)先級高置鼻，
不管什么情況，內(nèi)聯(lián)樣式優(yōu)先級最高
元素選擇器： 0001（1）
class選擇器：0010（2）
id選擇器：0100（4）
通配符：0001（1）
群組選擇器：分開看每個選擇器的權重
后代選擇器：用空格分開的所有的選擇器權重之和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**{
margin: 0;
padding: 0;
}*/
*{
width: 300px;
height: 100px;
}
/*元素選擇器*/
p{
color: red;
}
/*id選擇器*/
#p2{
background-color: seagreen;
}
/*class選擇器*/
.c1{
color: deepskyblue;
font-size: 30px;
}
.c2{
background-color: sandybrown;
}
.c1,.c2{
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="c1">我是標題1</h1>
<div id="">
<div id="">
<p>我是段落1</p>
</div>
</div>
<h2 class="c2">我是標題2</h2>
<!--一個標簽可以擁有多個class值蜓竹，多個class值用空格隔開-->
<div id="" class="c1 c2">
我是div
</div>
<p id="p2">我是段落2</p>
</body>
</html>
六箕母、偽類選擇器
普通選擇器是選中某一標簽，偽類選擇器是選中標簽某種狀態(tài)
1.語法：
普通選擇器:狀態(tài){}
2.常見狀態(tài)
a.link - 初始狀態(tài)(對于a標簽來說俱济，初始狀態(tài)指的是標簽對應的地址沒有成功訪問過的時候)
b.visited - 訪問后的狀態(tài)（一般針對a標簽有效）
c.hover - 鼠標懸停在標簽上的時候?qū)臓顟B(tài)
d.active - 鼠標按住標簽不放的時候?qū)臓顟B(tài)
注意：1.狀態(tài)前不是只能寫元素選擇器嘶是，更不是只能寫a標簽
2.需要遵守'愛恨'原則，'LoVeHAte'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*設置a標簽所有狀態(tài)的樣式*/
/*a{
color: saddlebrown;
}*/
a:link{
color: green;
}
a:visited{
color: greenyellow;
}
.a1:hover{
color: red;
background-color: lightgray;
}
a:active{
color: slateblue;
background-color: red;
}
p:hover{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<a >百度一下</a>
<a class="a1" href="05選擇器.html2">百度一下2</a>
</body>
</html>
