1. 表單標簽（form）
- 專門用來進行用戶信息收集的一個標簽，一般要結合表單相關的標簽來使用才有意義
- 表單相關標簽：input、select、textarea等
- 主要提供form中子標簽的內容的提交和重置功能
- action屬性：提交路徑（接口）
- method屬性：提交方式（post/get）
<form action="" method="get">
</form>
2.input標簽
- input標簽是表單相關標簽，可以在form標簽中使用，也可以單獨使用
-
type屬性：input標簽會因為type的不同，功能完全不一樣
-
name屬性：用于區分或者提交（相當于字典的key）；要不要給這個屬性賦值，主要看：a.需不需要區分不同的內容 b.需不需要提交這個input標簽的值
-
value屬性：value的意義會根據type值的不同而不一樣；但是表單提交的時候提交的都是value的值
1）文本輸入框：type="text"
- value屬性：給這個屬性賦值是在設置輸入框的默認值; 修改輸入框中的內容，會改變這個屬性的值
- placeholder屬性：輸入框為空的時候的默認顯示信息
- maxlength屬性：輸入框最多能輸入的內容的長度
<font>賬號:</font>
<input type="text" name="tel" value="" placeholder="請輸入手機號碼" maxlength="6"/>
2）密碼輸入框：type="password"
- value屬性：給這個屬性賦值是在設置輸入框的默認值; 修改輸入框中的內容，會改變這個屬性的值
- placeholder屬性：輸入框為空的時候的默認顯示信息
- maxlength屬性：輸入框最多能輸入的內容的長度
<font>密碼:</font>
<input type="password" name="pw" id="" value="123456" maxlength="10"/>
3）單選按鈕：type="radio"
- name屬性：如果多個選項是一組數據必須保證它們的name屬性值一樣才能做到多個選項單選
- value屬性：不能顯示，只能用來提交的
- checked屬性：給這個屬性賦值為checked讓按鈕處于默認選中狀態
- 可以通過將label的for屬性和input的id屬性保持一致，讓label和input進行關聯
<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>
4）復選按鈕：type="checkbox"
- name屬性：如果多個選項是一組數據必須保證它們的name屬性值一樣
- value屬性：不能顯示，只能用來提交的
- checked屬性：給這個屬性賦值為checked讓按鈕處于默認選中狀態
<input type="checkbox" name="interest" id="in1" value="餐飲" /><label for="in1">餐飲</label>
<input type="checkbox" name="interest" id="in2" value="游戲" /><label for="in2">游戲</label>
<input type="checkbox" name="interest" id="in3" value="旅游" /><label for="in3">旅游</label>
5）普通按鈕：type="button"
<input type="button" id="" value="登錄" />
// 補充：button標簽
<button>登錄</button>
<button><img src="img/aaa.ico"/></button>
6）重置按鈕：type="reset"
- 重置當前重置按鈕所在的form標簽中的所有的相關標簽的值
<input type="reset" name="" id="" value="重置" />
7）提交按鈕：type="submit"
- 以 “name=value” 的方式提交當前form標簽的內容
<input type="submit" value="提交"/>
8）其他類型
<input type="color" name="color" id="" value="" />
<input type="date" name="date" id="" value="" />
<input type="file" name="file" id="" value="" />
<input type="datetime-local" name="date-time" id="date-time" value="" />
3.下拉菜單（select）
- select標簽：整個下拉列表
- option標簽：列表中的選項
- optgroup標簽：一個列表選項分組，通過label屬性值來設置分組名(只是在顯示上對選項進行分區，不影響提交結果)
<select name="city">
<optgroup label="四川省"></optgroup>
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="綿陽">綿陽</option>
<option value="宜賓">宜賓</option>
<optgroup label="廣東省"></optgroup>
<option value="廣州">廣州</option>
<option value="中山">中山</option>
<option value="珠海">珠海</option>
<option value="佛山">佛山</option>
<option value="惠州">惠州</option>
</select>
4.多行文本域（textarea）
- 提供一個可以換行輸入的輸入框
- rows屬性：行數，影響輸入框的默認高度
- cols屬性：列數, 影響輸入框的寬度
- maxlength屬性：輸入的內容的最大長度
- autofocus屬性：值設置為autofocus，頁面刷新和加載的時候自動成為焦點
<textarea autofocus="autofocus" name="comment" rows="10" cols="200" maxlength="200" placeholder="輸入你的意見">
</textarea>
5.無語義標簽
-
div標簽和span標簽都是無語義標簽，使用div一般用于對網頁中的內容分塊和分組
<div id="">
<a >百度一下</a>
</div>
<div id="">
<a >百度一下</a>
</div>
<span id="">
<a >百度一下</a>
</span>
<span id="">
<a >百度一下</a>
</span>
二、CSS基礎
1.什么是CSS
- CSS又叫樣式表（層疊樣式表），是web標準中的表現標準，專門用來針對網頁中內容的布局和樣式
- 現在絕大部分使用的是CSS3
2.怎么寫CSS
1）語法
- 選擇器{屬性1：屬性值1；屬性2：屬性值2；...}
2）說明
-
選擇器：選中需要設置樣式的標簽；在內聯樣式表中“選擇器{}”需要省略
-
{} ：固定寫法
-
屬性：屬性是以“屬性：屬性值”的形式成對兒出現，多個屬性之間要用分號隔開；順序不影響
-
屬性值：如果是數字表示大小，數字后邊必須加單位：px（像素）、em（1em=16px）、顏色值
- 補充-顏色值：
顏色的英文單詞、#十六進制顏色值、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,255) == #0000ff == blue
rgb(0,0,0) == #000000 == black
rgb(255,255,255) == #ffffff == white
透明度：0（完全透明）~1（完全不透明）
3. 寫在哪兒
1）內聯樣式表
- 將樣式寫在標簽的style屬性中
- 只作用于一個固定的標簽
2）內部樣式表
- 將樣式寫在style標簽中
- 作用于當前html中的所有標簽
3）外部樣式表
- 將樣式寫在CSS文件中，然后在html中通過link標簽導入
- 可以作用于所有的html中的所有標簽
4）復用性：
5）優先級：
- 內聯樣式表的優先級不管什么情況都是最高的
- 內部和外部的優先級看順序，誰后寫誰優先級高（類似于賦值，后賦值的為最后的值）
4. 常見屬性
- color：設置標簽中的字體顏色
- background-color：設置標簽的背景顏色
- font-size：字體大小
- width：標簽寬度
- height：標簽高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--3.外部樣式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
<!--2.內部樣式-->
<style type="text/css">
/*這個里面寫css代碼*/
div{
color: orange;
background-color: darkolivegreen;
}
h1{
color: purple;
background-color: yellow;
}
</style>
</head>
<body>
<!--1.內聯樣式-->
<p style="color: red; font-size: 30px;">hello CSS1</p>
<p>hello CSS2</p>
<div id="">
我是div1
</div>
<h1>我是標題</h1>
<div id="">
我是div2
</div>
</body>
</html>
5. 什么是選擇器
6. 選擇器的寫法
1）元素選擇器（標簽選擇器）
- 直接將標簽名作為選擇器，選中當前html中對應的所有標簽
- 例如：a{}：選中當前html中所有的a標簽
2）id選擇器
- 所有標簽都有一個id屬性，值自己設置，但是要保證一個html中id值唯一
- 將標簽的id屬性的值前面加 # 作為選擇器，選中id屬性值是指定值的標簽
- 例如：#a{}：選中當前html中id值是a的標簽
3）類選擇器（class選擇器）
- class屬性：一個html中相同的class值可以有多個；同一個標簽的class屬性值可以多個(多個之間用空格隔開)
- 將標簽的class屬性的值前面加 . 作為選擇器，選中class屬性值是指定值的標簽
- 例如：.a{}：選中當前html中class值是a的所有標簽
4）通配符選擇器
- 將 * 作為選擇器，選中當前html中所有的標簽
- *{}：選中當前html中所有的標簽
5）群組選擇器
- 將多個選擇器用逗號隔開來作為一個選擇器，選中每個獨立選擇器對應的標簽
- p,a{}：選中所有的p標簽和a標簽
- div,#a{}：選中所有的div標簽和id值是a的標簽
- #p1,.c1,.c2{}：選中id值是p1，class值是c1和c2的所有標簽
6）后代選擇器
- 將多個選擇器用空格隔開來作為一個選擇器
- div p{}：選中所有div標簽中的p標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
/*width: 200px;*/
}
/*1.元素選擇器*/
p{
color: red;
background: yellow;
}
/*2.id選擇器*/
#a{
font-size: 30px;
}
/*3.class選擇器*/
.c1{
background-color: yellowgreen;
}
.c2{
font-size: 40px;
}
/*4.群組選擇器*/
a,font{
color: fuchsia;
}
font,.c3{
background-color: lightblue;
}
/*5.后代選擇器*/
div label{
color: darkblue;
}
div div label{
background-color: burlywood;
}
#div1 label{
color: red;
}
</style>
</head>
<body>
<!--class屬性:
1.一個html中相同的class值可以有多個
2.同一個標簽的class屬性值可以多個(多個之間用空格隔開)
-->
<p class="c1">我是段落1</p>
<div id="">
<div id="">
<p id="a">我是段落2</p>
<!--這兒的h1標簽有兩個class值，分別是c1和c2-->
<h1 class="c1 c2">我是標題1</h1>
</div>
</div>
<p class="c2">我是段落3</p>
7）偽類選擇器
- 普通選擇器選中的是html中不同的標簽，偽類選擇器選中的是標簽的不同狀態
- 語法：普通選擇器：狀態{屬性1：屬性值1；屬性2：屬性值2；...}
-
link：初始狀態，對于a標簽來說，link對應的狀態是a標簽中的鏈接從來沒有成功訪問過時的狀態（一般只在a標簽進行設置）
-
visited：超鏈接成功訪問過的狀態（一般只用于a標簽）
-
hover：鼠標懸停在標簽上對應的狀態（不只針對超鏈接，其他標簽也常用）
-
active：鼠標安住標簽不放對應的狀態（主要作用在超鏈接和按鈕）
- 遵守“愛恨原則”：LoVeHAte，按LVHA順序寫
7. 選擇器的權重值
- 權重越大優先級越高，但是內聯樣式表的優先級永遠最高
- 元素選擇器的權重：0001 == 1
- class選擇器的權重：0010 == 2
- id選擇器的權重：0100 == 4
- 偽類選擇器的權重：0001 == 1
- 群組選擇器的權重：看單獨每個選擇器的權重
- 后代選擇器的權重：所有選擇器的權重之和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1)link*/
a:link{
color: rgb(150,150,150);
}
/*#a1:link{}*/
a:visited{
color: green;
}
a:hover{
color: red;
font-size: 30px;
}
p:hover{
background-color: lightgoldenrodyellow;
}
a:active{
color: blueviolet;
}
button:active{
background-color: lightseagreen;
}
.h1{
color: blue;
}
h1{
color: red;
}
#h1{
color: green;
}
div #h1{
color: yellow;
}
#div2 #div1 #h1{
background-color: hotpink;
}
</style>
</head>
<body>
<div id="div2">
<div id="div1">
<h1 style="background-color: yellowgreen;" id="h1" class="h1">我是標題</h1>
</div>
</div>
<a id="a1" >百度一下</a>
<p>段落</p>
<button>按鈕</button>
<a href="04-CSS基礎.html">打開選擇器</a>
</body>
</html>
