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>
0 留言:
發佈留言
您使用留言則表示同意及遵守使用條款及守則。
建議: 為方便留言回覆,請不要用匿名方式 留言。