幾個不常用的HTML標記使用方法
來源:易賢網 閱讀:967 次 日期:2014-09-10 14:24:52
溫馨提示:易賢網小編為您整理了“幾個不常用的HTML標記使用方法”,方便廣大網友查閱!

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

<base>標簽

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

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

用法:

<head><!--寫在head標簽之間-->

<base /> <!--將默認鏈接定義為http://www.webjx.com/-->

<base target="_blank" /> <!--將默認鏈接目標定義為新窗口中打開-->

</head>

<head><!--寫在head標簽之間-->

<base /> <!--將默認鏈接定義為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)、主題、和底部,他們能讓表格更加語義化的同時,也能讓我們更加方便的控制表格的表現。國外還有人用很變態(tài)地方法用這三個表其做出標題能跟隨表格,或者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 標簽的使用可以擴大表單的點擊區(qū)域來改進表單的易用性??纯聪旅娴挠梅ǎ狐c擊文字的時候相當于點擊了單選控件,這樣用戶體驗是不是會更好一些?

用法:

<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>

更多信息請查看IT技術專欄

更多信息請查看網頁制作
下一篇:去掉IE滾動條
易賢網手機網站地址:幾個不常用的HTML標記使用方法

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網