常用標籤的使用
容器級別的標籤可以嵌套容器級別的，可以嵌套文本級別的，可以是文本內容。
也就是說，容器級別的標籤內部什麼都可以放，但是不能違背語義原則。
文本級別的標籤可以嵌套文本級別的，可以是文本內容，但是不能嵌套容器級別的。也就是說文本級別的標籤除了容器級別的標籤之外的什麼都可以放。但是不能違背語義原則。
1、h標籤
h是heading的縮寫，就是標題的意思。它是一個標籤家族，可以從h1~h6，它的作用：可以給網頁添加標題語義。h標籤是一個容器級別的雙標籤。
2、p標籤
p是paragraph的縮寫，是段落的意思，它是用來對網頁文本添加段落語義的。p標籤是一個文本級別的雙標籤。
3、img標籤
img是image的縮寫，就是圖像的意思，img是一個文本級別的單標籤。
img標籤天生兩個屬性：
- src屬性用來填寫圖片的地址，可以是相對或絕對路徑，和href用法一樣。
- alt屬性用來填寫一段文本，替換當圖片因爲某些原因加載不成功時的狀態。
4、a標籤
a是anchor的縮寫，是錨的意思。a標籤是超級鏈接，它是用來給文本添加超級鏈接語義，a標籤是一個文本級別的雙標籤。
a標籤有三個屬性：
- href屬性，用來填寫超級鏈接的目標地址，可以是相對路徑或者絕對路徑。
- target屬性，用來決定鏈接的目標網頁是覆蓋自己打開還是新建窗口打開。target記住兩個值：
_blank和_self。_blank代表新建窗口，_self代表覆蓋自己。默認a標籤是覆蓋自己打開的。所以a標籤基本都是需要把target屬性改爲_blank。 - title屬性，這個屬性是用來和客戶進行交流。當鼠標懸停在超級鏈接上的時候，會彈出這個屬性的屬性值。一般用來告訴客戶，這個超級鏈接的目標是什麼。
a標籤的常用方法：
- 以一句話作爲點擊內容
- 以一個段落作爲點擊內容
- 以一張圖片作爲點擊內容，圖片以後當成文字文本對待
- a標籤可以製作站內錨點
在網頁當中有空白摺疊現象，網頁不認識空格和換行。如果想要空格，那麼需要運用實體字符 ，一個這樣的實體字符代表一個空格。如果想要換行，需要運用強制換行標籤<br/>。標籤表示在網頁上加一個分割線。
瞭解性標籤：
- q標籤，表示引用一句話，對這句話添加引用語義，附帶效果加雙引號。
- blockquote標籤，表示整段引用，對整段話添加引用語義，附帶效果居中。
- strong標籤，表示着重強調，附帶效果加粗。
- em標籤，表示輕微強調一個詞或者一句話，附帶效果文本傾斜。
- i b u 這三個標籤分別是給文本添加傾斜、加粗、下劃線語義。但是這幾個標籤違背了w3c的初衷，所以準備廢棄。以後不用。
5、三種列表
ol：ordered list的縮寫。有序列表。
ol需要和li標籤配合使用，它是我們見到的第一種組標籤，ol 中除了li標籤之外什麼都不可以放。li標籤裏面什麼都可以放。
ol，li都是容器級別的雙標籤。
ul：unordered list的縮寫。無序列表。
ul需要和li標籤配合使用，它是我們見到的第一種組標籤，ul 中除了li標籤之外什麼都不可以放。li標籤裏面什麼都可以放。
ul，li都是容器級別的雙標籤。
dl：definition list的縮寫。自定義列表。
dl 一般需要和dt dd標籤配合時使用，至少要有一個dt，它也是一個組標籤，在dl當中只能出現dt或者dd。
dt是definition title的縮寫，是自定義主題的意思。
dd是definition description的縮寫，是自定義描述的意思。每一個dt可以有多個dd進行描述。
dl，dt，dd都是容器級別的雙標籤。
- dl用法：以前dl當中會定義多個主題，但是因爲佈局不方便，所以很少用。現在都會使用上述方式。也就是說一個dl標籤裏面只定義一個主題。
6、表單類元素（標籤）
5種輸入框3種按鈕
input 標籤，它的功能非常多，它根據type屬性值的不同所展現出來的表現形式不一樣。
文本級別的單標籤。
①文本輸入框
<input type="text" placeholder="輸入賬號" value="123"/>
文本輸入框，type值爲text。
placeholder屬性，是用來填寫輸入框當中的提示信息。
value這個屬性很重要，當我們在輸入框中填寫內容的時候，其實是把這些內容當做一個值傳給了value，以後我們可以用js從這個輸入框的value屬性當中拿到所填寫的值，也就是說，value的值就是輸入框中填寫的東西，因此，在輸入框中，顯式的更改value屬性值，就是在給輸入框當中填寫指定的內容。
②密碼輸入框
<input type="password" placeholder="輸入密碼"/>
文本輸入框，type值爲password。
placeholder屬性，是用來填寫輸入框當中的提示信息。
密碼輸入框中也是有value屬性的，當你輸入密碼的時候，密碼也會自動的傳給value，從輸入框的value當中就可以拿到你填寫的密碼。但是密碼框一般不會顯式的去更改自己的密碼。
③單選輸入框
單選輸入框，type值radio。
單選輸入框一般是成組出現的，所以，單選輸入框要讓瀏覽器認出誰和誰是一組。如何讓多個單選輸入框成爲一組由name屬性決定，這多個單選輸入框擁有相同的name屬性值就代表他們是一組。他們之間同一時刻只能選擇一個。
單選框的checked屬性可以讓頁面默認選擇。
單選輸入框和文本綁定：如果想點擊文字選中單選框，那麼你就要綁定：綁定有以下兩種方式：
<!--1-->
<label for="rd1">男：</label>
<input type="radio" name="sex" id="rd1"/>
<!--2-->
<label>女：<input type="radio" name="sex" id=""/></label>
-
第一種方式，需要用到label中的for屬性，for屬性需要填寫綁定的表單類元素的id值。因此表單類元素也要添加一個id屬性。這種方式比較麻煩
-
第二種方式比較簡單，只要把文本和表單類元素全部放在label標籤內部就可以實現綁定。因此它用的比較多。
從上我們可以看到label標籤是一個文本級別的雙標籤，它無語義。一般用來防止文字文裸奔，因此通常情況會把文字放在label當中，這樣就可以單獨用label對這個文字進行css修飾。
label標籤通常還會用來綁定文本信息和表單類元素。
④多選輸入框（複選框）
多選輸入框，type值爲checkbox。
在這個輸入框當中，我們也要多記一個屬性，checked。他會經常用到默認選擇的功能。
⑤日期輸入框
日期輸入框，type值爲date
注：日期輸入框在IE瀏覽器中不兼容，在主流瀏覽器中沒問題。
⑥普通按鈕
普通按鈕，type值爲button。
假如想讓按鈕上出現你想的文字，value屬性可以給按鈕添加文字。
⑦提交按鈕
提交按鈕，type值爲submit。
假如想讓按鈕上出現你想的文字，value屬性可以給按鈕添加文字。默認的文字是提交。
⑧普通按鈕
重置按鈕，type值爲reset。
假如想讓按鈕上出現你想的文字，value屬性可以給按鈕添加文字。默認的文字是重置。
7、下拉菜單
<select>
<option value="">天安門</option>
<option value="">盧溝橋</option>
<option value="">後海</option>
</select>
select是英文選擇的意思，它是添加下拉菜單的語義，它也是組標籤，一般也會和option配合使用，option是下拉選項的意思。
下拉菜單和無序列表用法很類似。
select是文本級別的雙標籤。
8、文本域
textarea是文本域的意思。它可以提供一片輸入文本的區域。默認這個區域右下角可以改變它的大小。但一般不常用。學了css會經常把它去掉。
textarea也是文本級別的雙標籤。
9、表格
table是表格的意思，在製作表格時，先把表格手畫出來，然後一行一行去寫代碼。
border屬性決定這個表格有沒有邊框，border如果沒寫出來默認無邊框。
cellspacing屬性，可以改變單元格和單元格之間的距離。
cellpadding屬性，可以改變單元格內部內容和單元格邊框之間的距離。
table標籤是一個容器級別的雙標籤。
<table border="1" cellspacing="10px" cellpadding="10px">
<tr>
<th>一班</th>
<th>二班</th>
<th>三班</th>
</tr>
<tr>
<td>張三</td>
<td>老王</td>
<td>狗蛋</td>
</tr>
<tr>
<td>李四</td>
<td>老趙</td>
<td>狗剩</td>
</tr>
</table>
10、div 和 span
div是division的縮寫，意思是切割分割的意思。我們通常把它稱作盒子。
它是容器級別的雙標籤。
span也有分割切割的意思。
它是文本級別的雙標籤。
標籤的分類
容器級別：h1`h6 ol ul dl li dt dd table div
文本級別：p img a input select textarea label span
除了p以外其他的文本級別的標籤都可以當做一個文本去處理。