HTML教程:幾個不常用的HTML標記使用方法

Xhtml有很多不常用卻很有用的標簽。有的能事半功倍，有的能改進語義，有的則能提高易用性，我總結了一些，總結的原則是有用而且能用，就是大多數瀏覽器得支持，否則就不算“上上簽”了。只能望“簽”興歎又有什麼用呢？

<base>標簽

作用：標簽為頁面中所有鏈接指定默認鏈接地址或鏈接目標。有時候我們需要讓首頁的鏈接全部在新窗口中打開，使用這個標簽就能一下搞定了！

屬性：href:鏈接地址，target:目標，他的值可以是_blank,_parent,_self,_top,可以在除Strict模式下使用，這個用法我最先是在163.com上發現的。

用法：

<head><!--寫在head標簽之間-->  
<base href="http://www.webjx.com/" /> <!--將默認鏈接定義為http://www.webjx.com/-->  
<base target="_blank" /> <!--將默認鏈接目標定義為新窗口中打開-->  
</head>  
<head><!--寫在head標簽之間-->
<base href="http://www.webjx.com/" /> <!--將默認鏈接定義為http://www.webjx.com/-->
<base target="_blank" /> <!--將默認鏈接目標定義為新窗口中打開-->
</head>

<caption>標簽

作用：caption標簽用來定義表格的標題，給表格定義一個標題，來說明這個表格是幹什麼的，豈不是很有“語義”，caption應該寫在table之後，默認的樣式是居中顯示在表格的頂部。你可以通過css來改變它的樣式。

用法：

<table width="200" border="1" >  
<caption> <!--caption應該寫在table之後-->  
其實我是caption
</caption>  
<tr>  
<td> </td>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
<td> </td>  
</tr>  
</table>  
<table width="200" border="1" >
<caption> <!--caption應該寫在table之後-->
其實我是caption
</caption>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

<thead>標簽、<tbody>標簽、<tfoot>標簽

作用：thead、tfoot 以及 tbody標簽跟他們的名字那樣，分別是表格的頭部（很多人只是用th）、主題、和底部，他們能讓表格更加語義化的同時，也能讓我們更加方便的控制表格的表現。國外還有人用很變態地方法用這三個表其做出標題能跟隨表格，或者tbody固定高度，多出的行數出現滾動條。有興趣的可以搜素下或者是這做一下。

注意：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。

用法：

<table border="1">  
<thead>  
<tr>  
<th>科目</th>  
<th>分數</th>  
</tr>  
</thead>  
<tfoot>  
<tr>  
<td>總分</td>  
<td>159</td>  
</tr>  
</tfoot>  
  
<tbody>  
<tr>  
<td>語文</td>  
<td>99</td>  
</tr>  
<tr>  
<td>數學</td>  
<td>60</td>  
</tr>  
</tbody>  
</table>  
<table border="1">
<thead>
<tr>
<th>科目</th>
<th>分數</th>
</tr>
</thead>
<tfoot>
<tr>
<td>總分</td>
<td>159</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>語文</td>
<td>99</td>
</tr>
<tr>
<td>數學</td>
<td>60</td>
</tr>
</tbody>
</table>

<fieldset>標簽和<legend>標簽

作用：<fieldset>元素用來分類表單中的元素，而<legend>則能給這個組定義一個標題。你一定見過類似下面domo的布局吧！他們也可以通過css定義樣式。

用法:

<form>  
<fieldset>  
<legend>基本信息</legend>  
姓名: <input type="text" />  
性別: <input type="text" />  
</fieldset>  
</form>  
<form>
<fieldset>
<legend>基本信息</legend>
姓名: <input type="text" />
性別: <input type="text" />
</fieldset>
</form>

<sub> 標簽和<sup> 標簽

作用：<sub> 標簽和<sup> 標簽分別是上標和下標，雖然他們在各個瀏覽器的表現不一樣，你同樣可以使用css定義他們的樣式。

用法：

2<sup>我是上標</sup>  
2<sub>我是下標</sub>

<label>標簽

作用：label 標簽的使用可以擴大表單的點擊區域來改進表單的易用性。看看下面的用法：點擊文字的時候相當於點擊了單選控件，這樣用戶體驗是不是會更好一些？

用法：

<form>  
<label for="nan">先生</label>  
<input type="radio" name="sex" id="nan" />  
<br />  
<label for="nv">女士</label>  
<input type="radio" name="sex" id="nv" />  
</form>  
<form>
<label for="nan">先生</label>
<input type="radio" name="sex" id="nan" />
<br />
<label for="nv">女士</label>
<input type="radio" name="sex" id="nv" />
</form>

<optgroup> 標簽

作用：標簽可以給select中的option進行分組，這在下拉項目很多的時候很有用，配合label標簽給每組命名。你也可以像淘寶那樣給每組用css定義不同的顏色。

用法：

<select>  
<optgroup label="自駕遊"> <!--配合label標簽給每組命名-->  
<option>省內</option>  
<option>省外</option>  
</optgroup>  
<optgroup label="旅行社">  
<option>省內</option>  
<option>省外</option>  
<option>國外</option>  
</optgroup>  
</select>