（一）常用標(biāo)簽
div
span
ul
ol
a
img
form
button
input
table
h1, h2, h3
pre
em, i
（二）用法詳解
- 1、
<div>——可定義文檔中的分區(qū)或節(jié)
- 語法：
<div>
...
</div>
- NOTE：
如果用id或class來標(biāo)記<div>壁顶，那么該標(biāo)簽的作用會(huì)變得更加有效移剪。
<div>元素沒有特定的含義，屬于塊級(jí)元素
- 2、
<span>——組合文檔中的行內(nèi)元素
- 語法：
<span> some text </span>
- NOTE：
<span>元素沒有特定的含義
<span>元素是內(nèi)聯(lián)元素忿危，可用作文本的容器。
- 3没龙、
<ul>——ul-li是沒有前后順序的信息列表(無序列表) - 語法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
- NOTE：
1铺厨、常用屬性 type（項(xiàng)目符號(hào)的類型）取值：disc(小黑點(diǎn))、circle(空心圓)硬纤、square(實(shí)心方塊)
2解滓、默認(rèn)樣式為：小黑點(diǎn)
3、ul標(biāo)簽是用來給一堆數(shù)據(jù)添加列表語義的, 而不是用來給他們添加小圓點(diǎn)的
4筝家、ul標(biāo)簽和li標(biāo)簽是一個(gè)組合洼裤，一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn), 不會(huì)單個(gè)出現(xiàn)
5、ul標(biāo)簽中不推薦包含其它標(biāo)簽溪王，但是li標(biāo)簽中還可以繼續(xù)放其它的標(biāo)簽
- 4腮鞍、
<ol>—— ol-li是有前后順序的信息列表(有序列表)- 語法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
NOTE：
1、常用屬性type（編號(hào)類型）取值：1莹菱、a移国、A、i芒珠、
2桥狡、默認(rèn)樣式為：從1開始5、
<a>——可實(shí)現(xiàn)超鏈接使用
<a>標(biāo)簽的方式：
1皱卓、通過使用href屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接(href：Hypertext Reference的縮寫)
2裹芝、通過使用name屬性 - 創(chuàng)建文檔內(nèi)的書簽(可以使用 id 屬性來替代 name 屬性，命名錨同樣有效）語法：
<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本"> 鏈接顯示的文本 </a>
-
target屬性的值：- _blank --在新窗口中打開鏈接
- _parent --在父窗體中打開鏈接
- _self --在當(dāng)前窗體打開鏈接
- _top --在當(dāng)前窗體打開鏈接娜汁，并替換當(dāng)前的整個(gè)窗體
默認(rèn)情況下：在當(dāng)前瀏覽器窗口中打開
-
title屬性的作用：
鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容嫂易。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）
- NOTE：
a標(biāo)簽不僅可以讓文字可以點(diǎn)擊, 還可以讓圖片也能夠被點(diǎn)擊
- 6掐禁、
<img>——插入圖片- 語法：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
- NOTE：
* 1怜械、`src`：標(biāo)識(shí)圖像的位置
* 2、`alt`：指定圖像的描述性文本傅事，當(dāng)圖像不可見時(shí)（下載不成功時(shí)）缕允，可看到該屬性指定的文本
* 3、`title`：提供在圖像可見時(shí)對(duì)圖像的描述（鼠標(biāo)滑過圖片時(shí)顯示的文本）
* 4蹭越、圖像可以是GIF障本，PNG，JPEG格式的圖像文件
* 5、路徑有兩種填寫方式：絕對(duì)路徑驾霜、相對(duì)路徑
* 6案训、相對(duì)路徑：相對(duì)于我們當(dāng)前 html 文件的位置來寫路徑
* 7、./表示當(dāng)前目錄粪糙，../表示上一級(jí)目錄
* 8强霎、加載圖片是需要時(shí)間的，所以建議：慎用圖片
* 9蓉冈、`<img>` 是空標(biāo)簽城舞，意思是說，它只包含屬性洒擦，并且沒有閉合標(biāo)簽
- 7椿争、
<form>——與用戶進(jìn)行交互
- 語法：
<form method="傳送方式" action="服務(wù)器文件">
- 舉例：
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>
-
NOTE：
- 1、action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)熟嫩。
- 2秦踪、method ： 數(shù)據(jù)傳送的方式（get/post）。
- 3掸茅、所有表單控件（文本框椅邓、文本域、按鈕昧狮、單選框景馁、復(fù)選框等）都必須放在<form></form>標(biāo)簽內(nèi)，否則用戶輸入的信息提交不到服務(wù)器上
- 4逗鸣、表單可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端合住，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)
8、
<input>——用于搜集用戶信息語法：
<form>
<input type="text / password" name="名稱" value="文本" />
</form>
根據(jù)不同的 type 屬性值撒璧，輸入字段擁有很多種形式透葛。輸入字段可以是文本字段、復(fù)選框卿樱、掩碼后的文本控件僚害、單選按鈕、按鈕等等
type屬性：
type="text"定義文本輸入框
type="password"定義密碼輸入框
type="hidden"定義隱藏輸入字段
type="image "定義圖像作為提交按鈕
type="number "定義帶有 spinner 控件的數(shù)字字段
type="password"定義密碼字段繁调，字段中的字符會(huì)被遮蔽
type="radio "定義單選按鈕
type="checkbox"定義復(fù)選框按鈕
type="range"定義帶有 slider 控件的數(shù)字字段
type="reset"定義重置按鈕萨蚕。重置按鈕會(huì)將所有表單字段重置為初始值
type="search"定義用于搜索的文本字段
type="submit"定義提交按鈕舉例：
<form>
姓名： <input type="text" name="myName" placeholder="請(qǐng)輸入姓名"/> <br/>
密碼： <input type="password" name="pass"/>
</form>
- NOTE:
1、name：為文本框命名蹄胰，以備后臺(tái)程序使用岳遥。
2、value：為文本輸入框設(shè)置默認(rèn)值裕寨。(一般起到提示作用)
3寒随、placeholder：提供可描述輸入字段預(yù)期值的提示信息，該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失妻往。
4、placeholder屬性適用于以下的<input>類型：text, search, url, telephone, email ,password
5试和、同一組的單選按鈕讯泣，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用
- 9阅悍、
<table>——定義表格
- 語法：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
常用屬性
1好渠、border：規(guī)定表格邊框的寬度
2、cellpadding：?jiǎn)卧裰械奈谋九c單元格邊框的間距
3节视、cellspacing：?jiǎn)卧裰g的間距創(chuàng)建表格的四個(gè)元素：table拳锚、tbody、tr寻行、th霍掺、td
1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開始拌蜘、</table>標(biāo)記結(jié)束
2杆烁、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)简卧，但如果加上<tbody>標(biāo)簽后兔魂，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示
3、<tr>…</tr>：表格的行
4举娩、<td>…</td>：表格的列
5析校、<th>…</th>：表格表頭
6、colspan：規(guī)定單元格可橫跨的列數(shù)铜涉，rowspan：規(guī)定單元格可橫跨的行數(shù)NOTE：
1智玻、th標(biāo)簽中的文本默認(rèn)顯示為：粗體且居中
2、表格標(biāo)簽有一個(gè)邊框?qū)傩?骄噪，這個(gè)屬性決定了邊框的寬度尚困，默認(rèn)情況下這個(gè)屬性的值是 0 ， 所以看不到邊框可用 css 樣式链蕊，為表格加入邊框
- 10事甜、
<h1>……<h6>——標(biāo)題標(biāo)記
- 語法：
<h1 align = “l(fā)eft | center | right”>標(biāo)題</h1>
- NOTE:
1、屬性：align水平對(duì)齊方式
2滔韵、取值：left逻谦、center、right
- 11陪蜻、
<pre>——預(yù)格式化的文本
- 語法：
<pre>內(nèi)容</pre>
- 舉例：
<pre>
var message="歡迎";
for(var i=1;i<=10;i++) {
alert(message);
}
</pre>
- NOTE：
1邦马、被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符
2、標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它滋将，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼
