常用元素
鏈接
簡單的鏈接語法
<a href="url">鏈接文本</a>
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
<a target="_blank">訪問菜鳥教程!</a>
鏈接到頁內某個元素
通常這種方法可以作為書簽來使用。
以某個元素創建一個錨點，只需要指定該元素的id即可：
<h1 id="first">第一個標題</h1>
創建一個鏈接，當點擊該鏈接的時候，會轉到錨點處：
<a href="#first">轉到第一個標題</a>
也可以轉到其他頁面的錨點，只需要指明網頁即可：
<a >轉到第一個標題</a>
也可以使用name來代替id屬性，不過可能會出現name不唯一的情況，具體有待補充。
注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：
< >
就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求。
圖像
簡單的圖像語法
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
- src：數據源
- alt：無法顯示圖像時的替代文本
- width與height：圖像尺寸
圖像映射
圖像映射可以在圖像中綁定一個區域，當鼠標點擊這些區域后，會執行一個鏈接。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
img元素利用屬性usemap調用了一個map元素，這個元素是一系列area的集合。每個area可以規定一個特定形狀和坐標的區域，每個區域綁定一個鏈接。這樣當點擊img元素中的某個區域，就可以觸發該鏈接。
表格
表格常見語法
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data）。
<table border="1">
<tr>
<td>D1</td>
<td>D2</td>
</tr>
<tr>
<td>D3</td>
<td>D4</td>
</tr>
</table>
邊框
border可以指定邊框寬度，默認為0.
<table border="1"></table>
表頭
表頭需要單獨占一行（通常為第一行），因而包含在一組<tr>之內,利用<th>指定表頭內容。通常會自動顯示為粗體居中的文本。
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
標題
標題由caption指定，緊跟在table開始標簽之后。
<table border="1">
<caption>標題</caption>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
</table>
表格跨行或跨列
- 跨行
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
原本是2行3列的表格，第一行的第二個元素指定colspan屬性為2，橫跨兩行。
2.跨列
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
跨列的情況理解起來較難：
單元格的邊距與間距
- 邊距:表格內文字距離邊界的距離
<table border="1" cellpadding="10"></table> - 間距:表格內部分界線的厚度
<table border="1" cellspacing="0"></table>
列表
列表是一系列左對齊的條目。
無序列表
條目前默認為一個圓點。可以手動指定type屬性來更改：
- list-style-type:disc 圓點
- list-style-type:circle 圓圈
- list-style-type:square 正方形
<ul style="list-style-type:disc">
<li>條目1</li>
<li>條目2</li>
</ul>
有序列表
條目前默認為數字(1,2,3...)。可以手動指定type屬性來更改：
- A 大寫字母(A B C...)
- a 小寫字母(a b c...)
- I 大寫羅馬數字(I II III...)
- i 小寫羅馬數字(i ii iii...)
<ol type="A">
<li>條目1</li>
<li>條目2</li>
</ol>
自定義列表
條目前無內容，但可擁有注釋。注釋會縮進顯示。
<dl>
<dt>條目1</dt>
<dd>條目1注釋</dd>
<dt>條目2</dt>
<dd>條目2注釋</dd>
</dl>
列表嵌套
<ul>
<li>條目1</li>
<li>條目2
<ul>
<li>條目2下級條目1</li>
<li>條目2下級條目2</li>
</ul>
</li>
<li>Milk</li>
</ul>
區塊
HTML 區塊元素
大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素可以包含其他元素，內聯元素只能包含自身。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
實例: <h1>, <p>, <ul>, <table>
HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素，它可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。
<div style="color:red">
<p>this is p1. </p>
<p>this is p2. </p>
</div>
<div> 元素的另一個常見的用途是文檔布局(見下節)。它取代了使用表格定義布局的老式方法。
使用div元素進行布局
div元素可以指定高度和寬度，因而可以用來布局。
<div id="container" style="width:200px">
<div id="header" style="background-color:red;">TOP</div>
<div style="background-color:#FFD700;height:200px;width:100px;float:left;">LEFT</div>
<div id="content" style="background-color:#EEEEEE;height:100px;width:100px;float:left;">RIGHT</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">BOTTOM</div>
</div>
div元素如果沒有指定尺寸，會根據內部的元素自動調整。
float(浮動)屬性：只有left，right，none這些值，用于橫向div元素間的排列。如果書寫：
元素A，元素B
則元素A與B在網頁中為上下排列的。即，后續元素會在之前元素的下方尋找可用位置。
如果元素A指定float為left,則A會在可用空間盡量靠左排列，后續元素會放置在它的右側，即某元素的float屬性會控制后續元素的定位。但后續元素使用clear:both可以強制不允許左右存在浮動的元素，以消除前者的這種控制。
簡單來說，處在同一水平位置上的div元素，擁有相同的float屬性值，按次序和方向進行浮動，原理不做深究。
HTML <span> 與元素
HTML <span> 元素是內聯元素，可用作文本的容器，也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
<p>
this is <span style="color:red">red</span>
</p>
表單和輸入
簡單的文本和密碼輸入框
<form>
Name: <input type="text" name="name"/><br/>
PassWord: <input type="password" name="pwd"/>
</form>
單選按鈕（Radio Buttons）
<input type="radio"> 標簽定義了表單單選框選項
<input type="radio" name="sex" value="male"/>Male
</form>```
##### 復選框（Checkboxes）
```<input type="checkbox">``` 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
```<form>
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike
</form>```
##### 提交按鈕(Submit Button)
```<input type="submit">``` 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>
##### 下拉菜單
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
對于某個選項，當指定selected表示預選。
##### 帶邊框的表單
<form action="">
<fieldset>
<legend>表單標題:</legend>
Name: <input type="text" size="30">
E-mail: <input type="text" size="30">
Date of birth: <input type="text" size="10">
</fieldset>
</form>
#### 框架
框架可以顯示一個子頁面
```<iframe src="demo_iframe.htm" width="200" height="200"></iframe>```
構造一個框架，使用鏈接將特定內容在指定框架中顯示：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>
<a target="iframe_a">RUNOOB.COM</a></p>```
