本篇文章我們來(lái)共同學(xué)習(xí)下HTML文檔中的常用標(biāo)簽及其使用方法；下圖為簡(jiǎn)寫(xiě)內(nèi)容的HTML文檔：
第一部分：文檔結(jié)構(gòu)
1伤靠、文檔聲明：<!DOCTYPE html>捣域，聲明該文檔為HTML文檔啼染，告知瀏覽器文本的解讀方式。
2焕梅、HTML頁(yè)面：表示HTML頁(yè)面的開(kāi)始與結(jié)束
語(yǔ)法：<html></html>
位于<!doctype html>之下;
3迹鹅、頁(yè)面頭部：定義頁(yè)面全局信息
<head></head>
緊跟在html之后，是html中的首個(gè)子元素
頭部所包含的內(nèi)容（子元素）
（1）網(wǎng)頁(yè)標(biāo)題：<title>標(biāo)題內(nèi)容</title>
（2）定義網(wǎng)頁(yè)的編碼格式,關(guān)鍵字贞言，描述
網(wǎng)頁(yè)的編碼格式：<meta charset="utf-8">(utf-8:支持中英文斜棚、標(biāo)點(diǎn)、符號(hào))
關(guān)鍵字：<meta name="keywords" content="關(guān)鍵字">
描述：<meta name="description" content="描述內(nèi)容">
（ 3）定義或引用javascript：<script></script>
（4）<style></style>定義內(nèi)部樣式
（5）<link>引入外部樣式
4该窗、頁(yè)面主體：網(wǎng)頁(yè)顯示的主體內(nèi)容中包含大量的標(biāo)簽如下：
（1）鏈接 a標(biāo)簽
（2）文本樣式
斜體：<i></i>
粗體：<b></b>
刪除線：<s></s>
下劃線：<u></u>
上標(biāo)：<sup></sup>
下標(biāo)：<sub></sub>
（3）以標(biāo)題的形式來(lái)顯示文本內(nèi)容
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
【特點(diǎn)】
- 改變字號(hào)（一級(jí)最大弟蚀，六級(jí)最小）
- 加粗顯示
- 上下有垂直的空白距離
- 獨(dú)立成行
（4）段落元素
【標(biāo)簽】<p></p>【特點(diǎn)】- 默認(rèn)文字大小- 獨(dú)立成行- 上下垂直空白
（5） 換行元素
【標(biāo)簽】<br>
（6）分隔線元素
【標(biāo)簽】<hr>
【屬性】
size：尺寸酗失，取值單位為 px（像素）义钉，可以省略
width：寬度，取值單位為px（像素）可以省略或百分比
color：顏色规肴，取值自然顏色值
align：水平對(duì)齊方式捶闸，取值：left/center/right
分區(qū)元素
（7）塊分區(qū)元素：<div></div>
【特點(diǎn)】獨(dú)立成行
【作用】頁(yè)面布局
（8）行內(nèi)分區(qū)元素：<span></span>
【特點(diǎn)】多個(gè)元素在一行內(nèi)顯示
【作用】設(shè)置同一行文字內(nèi)的不同格式
（9）- 圖像
路徑
URL：Uniform Resource Locator（統(tǒng)一資源定位器，俗稱：路徑）
作用：標(biāo)識(shí)網(wǎng)絡(luò)任何資源的位置
絕對(duì)路徑：從文件所在的最高級(jí)目錄下開(kāi)始查找資源文件所經(jīng)過(guò)的路徑
-包括網(wǎng)絡(luò)資源&本地資源（如：E:\mmper\練習(xí)\img\flower.jpg）
相對(duì)路徑：從當(dāng)前文件位置處開(kāi)始拖刃，查找資源文件所經(jīng)過(guò)的路徑
- 同目錄删壮，直接用， 直接通過(guò)資源文件名稱進(jìn)行引用（a.jpg）
- 子目錄序调，進(jìn)入到子目錄中醉锅，然后再對(duì)資源文件進(jìn)行引用（img/a.jpg）
- 父目錄兔簇，返回到父級(jí)目錄再對(duì)資源文件進(jìn)行引用（../a.jpg）
【標(biāo)簽】<img>
【屬性】
src：圖片地址（絕對(duì)/相對(duì)）
width：圖像寬度
height：圖像高度
（10）表格
由<table>元素定義发绢。
【標(biāo)簽】<table></table>
【屬性】
width ：設(shè)置表格的寬度
height：設(shè)置表格的高度
align：設(shè)置表格的對(duì)齊方式，取值: left/center/right
border：設(shè)置表格邊框?qū)挾? cellpadding：內(nèi)邊距（單元格邊框與內(nèi)容之間的距離）
cellspacing：外邊距（單元格之間的距離）
bgcolor：設(shè)置表格的背景顏色
table中包含的子元素
<table></table>中包含的子元素：
【標(biāo)簽】<tr></tr> （創(chuàng)建表行）
【屬性】
align：該行內(nèi)容水平對(duì)齊方式垄琐，取值: left/center/right
valign：該行內(nèi)容的垂直對(duì)齊方式边酒，取值: top/middle/bottom
bgcolor：設(shè)置表格的背景顏色
【標(biāo)簽】<td></td> （創(chuàng)建單元格）
【屬性】
align：內(nèi)容水平對(duì)齊方式
valign：內(nèi)容垂直對(duì)齊方式
width ：寬度
height ：高度
【標(biāo)簽】<caption></caption> （表格標(biāo)題）
【標(biāo)簽】<th></th> （列標(biāo)題）
行標(biāo)題或列標(biāo)題，字體有加粗的效果狸窘，放在tr中
【標(biāo)簽】<thead></thead> （表頭）
【標(biāo)簽】<tbody></tbody> 表主體）
【標(biāo)簽】<tfoot></tfoot> （表尾）
一個(gè)完整的表格
有序列表
<ol>
<li></li>
</ol>
【屬性】
type:指定列表項(xiàng)標(biāo)志的類型墩朦，默認(rèn)為數(shù)字排列
取值：1（默認(rèn)值）/a/A/i/I
start:定義起始值(數(shù)字)，默認(rèn)從1開(kāi)始
取值：數(shù)字翻擒，如：start:1; start:i;等
無(wú)序列表
<ul>
<li></li>
</ul>
【屬性】
type：指定無(wú)序列表的列表項(xiàng)標(biāo)識(shí)
取值： disc,默認(rèn),實(shí)心圓/circle氓涣，空心圓/square，實(shí)心矩形none陋气，不顯示標(biāo)識(shí)
自定義列表
<dl>
<dt>列表中的標(biāo)題內(nèi)容</dt>
<dd>列表中的數(shù)據(jù)</dd>
</dl>
使用場(chǎng)合：圖文混排時(shí)使用
6- 表單
由<form>定義劳吠，將用戶輸入的數(shù)據(jù)提交給后臺(tái)。
【常見(jiàn)屬性】
action：提交的服務(wù)器地址
method：表單數(shù)據(jù)提交的方式巩趁，取值： get：明文提交/post：隱式提交
name：定義表單名稱痒玩，JS用到的比較多
id： 獨(dú)一無(wú)二的標(biāo)識(shí)
如：<form action="url" method="get/post"> </form>
<input>元素
【主要屬性】
type：根據(jù)不同的type屬性值可以創(chuàng)建各種類型的輸入字段
value：最終提交給服務(wù)器的值
name：控件的名稱，提供給服務(wù)器使用，沒(méi)有name蠢古，控件則無(wú)法提交
id：唯一標(biāo)識(shí)奴曙，只能在當(dāng)前頁(yè)面使用，服務(wù)器不能用
disabled：禁用草讶，不能被提交
常用的表單控件：
（1）文本框：<input type="text">
（2）密碼框：<input type="password">
【專有屬性】
maxlength：限制輸入的字符數(shù)洽糟，取值：數(shù)字
readonly：設(shè)置文本控件只讀
（3）單選按鈕：<input type="radio">
（4）復(fù)選框：<input type="checkbox">
【專有屬性】
checked，設(shè)置默認(rèn)被選中
（5）提交按鈕：<input type="submit">
（6）重置按鈕：<input type="reset">
（7）普通按鈕：<input type="button">
（8）圖片按鈕：<input type="image" src="">
（9）隱藏域：<input type="hidden">
（10）文件選擇框：<input type="file">
按鈕（提交按鈕）
<button>內(nèi)容</button>
下拉選擇框select 和 option
<section name="">
<option value="" selected></option>
</section>
