表單標簽
表單標簽
一般用來作用戶信息收集的，單獨用沒有意義，一般是結合相關標簽來使用
表單標簽可以對包含在這個標簽中的其他標簽做信息的提交和重置
action -- 提交位置（接口相關）
metho -- 請求方式
<form action="" method="">
</form>
--input標簽
單標簽
a.type屬性
text - 普通的文本輸入框，默認值
password-密碼輸入框
radio --單選按鈕
checkbox -- 復選按鈕
button -- 普通按鈕
submit -- 提交按鈕
reset -- 重置按鈕
b.name屬性 --主要用來區分數據的，提交的時候是以name=value形式提交的
value值只能是文本
c.value屬性--設置value屬性其實就是設置輸入框中默認顯示的內容，修改內容就是在修改value值
d.placehoder -- 文本輸入框的提示信息
e.maxlength -- 輸入的最長長度
<form action="" method="get">
<input type="text" name="tel" id="" value="" placeholder="輸入電話哈嘛" maxlength="6" />
<input type="text" name="email" id="" value="" />
密碼輸入框
password
-->
<input type="password" name="密碼" id="" value="" placeholder="請輸入密碼" maxlength="12"/>
<br />
radio -- 單選按鈕
name -- 同一組數據對應的name值設置成一樣的才能做到單選
value -- 這兒的value只是用于提交，不能顯示出來的
checked -- 設置為checked讓按鈕處于默認選中狀態
-->
<input type="radio" name="sex" id="" value="男生" checked="checked"/> <font>男</font>
<input type="radio" name="sex" id="" value="女生" /> <font>女</font>
讓文字和按鈕關聯
文字用lable標簽顯示，設置for屬性的值為想要關聯的按鈕的id值
這樣做，點擊文字和按鈕的效果一樣
-->
<input type="radio" name="m" id="m1" value="已婚" /><label for="m1">已婚</label>
<input type="radio" name="m" id="" value="未婚" /><font>未婚</font>
<input type="radio" name="m" id="" value="保密" checked="checked"/><font>保密</font>
4復選按鈕 -- checkbox
name--同一組數據的name值要一樣
value--只能用于數據的提交不能顯示
-->
<input type="checkbox" name="x" id="" value="教育" checked="checked"/><font>教育</font>
<input type="checkbox" name="x" id="" value="互聯網" /><font>互聯網</font>
<input type="checkbox" name="x" id="" value="食品" /><font>食品</font>
<input type="checkbox" name="x" id="" value="電競" /><font>電競</font>
5普通按鈕 -- button
value--對應的值會顯示在按鈕上
-->
<input type="button" value="登錄" />
submit--提交按鈕
這個按鈕的點擊事件是將當前所在的form標簽中，
設置了name屬性的相關的標簽數據以name=value的形式提交
-->
<input type="submit" name="" id="" value="提交" />
重置--reset
-->
<input type="reset" name="" id="" value="重置" />
下拉列表
下拉列表（菜單）
select標簽 --代表整個下拉列表
option標簽 -- 代表列表中的每個選項
可以通過設置selected屬性的值為selected來讓這個選項默認選中
optgroup標簽 -- 設置lable的值來對當前下拉菜單內容進行分組
-->
<select name="省">
<optgroup label="省"></optgroup>
<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>
</select>
多行文本域
textarea標簽 -- 輸入框，可以同時顯示多行內容，可以自定換行和上下滾動
name屬性--區分和提交
rows -- 行數（不滾動最多能顯示的行數，影響輸入的高度）
cols -- 列數（一行顯示的文字的數量，影響輸入框的寬度）
placeholder -- 站位符
maxlenth--限制最多的文字的個數
-->
<br />
<textarea name="message" rows="8" cols="34" placeholder="問題"></textarea>
div和span
div和span都是無語意標簽
div -- 一個div占一行。網頁中內容分組，分塊都可以用div作為容器
html中標簽分類：行內標簽、快級標簽
塊級標簽：一個占一行 例如：div、h1、p、
行內標簽：一行顯示多個 例如：span、font、
CSS基礎
.什么是css（層疊樣式表）
css是web標準中的表現標準，主要用來對網頁中的內容布局和樣式
2.css基本語法
a.語法結構
選擇器{屬性名1：屬性值1；屬性名2：屬性值2....}
b.說明
選擇器--選中想要設置樣式的標簽
{} -- 固定寫法
屬性 -- 屬性名和屬性值用冒號連接，多個屬性之間用分號隔開，如果沒有分號會導致后面的樣式無效
屬性名必須是css提供的屬性
屬性值：表示大小的數值必須加單位，px--像素、
em -- 空格數
也可以使用百分比（相對父標簽）
c.常用屬性
color--字體顏色
background-color --背景顏色
font-size --字體大小
width -- 寬度
height -- 高度
3.css寫在哪兒
a.內聯樣式表: 將樣式表寫在標簽的style屬性中 這種樣式表不需要選擇器{}，直接給屬性賦值
b.內部樣式表: 將樣式表寫在style標簽中（這個標簽可以放在head中，也可以放在body中）
c.外部樣式表: 吧css代碼寫在一個css文件中，然后在html中通過link去導入
內聯樣式表不管在什么情況下優先級都是最高的
外部和內部的樣式表一樣，誰后寫，誰的優先級高
4.css中的值
顏色：英文單詞，#加16進制顏色值，rgb（紅，綠，藍） rgba(紅，綠，藍，透明度)
3.外部樣式表
link -導入外部文件
rel屬性 -- 導入文件的作用 stylesheet -》樣式表，icon->網頁圖標
type -- 導入的文件類型說明
herf -- 文件路徑
-->
<link rel="stylesheet" type="text/css" href="css/04css基礎.css"/>
<link rel="icon" type="img/jpg" href="img/QQ圖片20190122144811.jpg"/>
2.內部樣式表-->
<style type="text/css">
/*在這兒寫css代碼*/
div{
background-color: blanchedalmond;
}
/*一個style標簽中可以寫多個樣式表*/
p{
color:purple;
}
</style>
<body>
1.內聯樣式表-->
<div style="color:rgb(0,255,0);font-size: 40px;">
我是div1
</div>
<p>我是段落</p>
<div id="">
我是div2
</div>
<h1>我是標題</h1>
</body>
選擇器
1.選擇器 --選中相應的標簽
aa.元素選擇器（標簽選擇器）：
直接將標簽名作為選擇器，功能就是將所有標簽名的對應的標簽選中
比如：div{}，p{}，a{}
b.id選擇器
將標簽的id屬性值前面加#作為選擇器，選中id屬性值是指定值的標簽
注意：一個頁面中id值要唯一
c class選擇器（類選擇器）
將標簽的class屬性值千米那加 . 作為選擇器，選中所有class屬性值是指定的
一個標簽可以同時擁有多個class值，讓多個class值用空格隔開。
d. *(通配符)
直接將*作為選擇器，選中當前頁面中所有的標簽
e. 群組選擇器
將多個選擇器用逗號隔開，作為一個選擇器，選中每個單獨的選擇器選中的所有標簽
a,p{}---選中所有的a標簽和p標簽
#p1，div{}--選中id是p1的標簽和所有的div標簽
.c1，#p1，a{}選中所有class值是c1，id是p1的標簽和所有a標簽
f.層級選擇器（后帶選擇器）
將多個選擇器用空格隔開作為一個選擇器
g.選擇器的權重
不同的權重值不一樣，權重值越大，優先級越高，權重相同的時候，誰后寫誰有效
內聯優先級最高
元素選擇器：0001（1）
通配符：0001（1）
class選擇器：0010（2）
id選擇器：0100（4）
通配符：0001（1）
群組選擇器：分開看每個選擇器的權重
后代選擇器：所有的選擇器權重之和
<head id="">
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
*{
width: 500;
height: 100;
}
p{
color:#FF1493
}
#p1{
color: gold;
background-color: #800080;
}
#d1{
height: 100px;
font-size: 50px;
background-color: #00FFFF;
color: gold;
}
.c2{
color: #FFD700;
}
</style>
</head>
<body>
<h1 >我是標題1</h1>
<div id="">
<div id="d1">
<p>我是段落</p>
</div>
<h2 class="c1" >我是標題2</h2>
</div>
<p id="p1">我是段落2</p>
<font class="c2">請叫我帥哥</font>
偽類選擇器
偽類選擇器
普通選擇器是選擇某一個標簽，偽類選擇器是選中標簽某種狀態
1.語法
普通選擇器 ：狀態{}
2.常見狀態
a. link -- 初始狀態 ，對于a標簽來說指的是標簽對應的地址沒有成功訪問過
b. visited -- 訪問過后的狀態
c. hover --鼠標懸停在標簽上的時候的狀態
d. active -- 激活鼠標按住標簽不放的時候
主意：狀態前面不是只能寫元素選擇器，更不是只能寫a標簽
2.需要準守“愛恨”原則
