幾個不常用的html標(biāo)記使用方法

字號:


    xhtml有很多不常用卻很有用的標(biāo)簽。有的能事半功倍,有的能改進語義,有的則能提高易用性,我總結(jié)了一些,總結(jié)的原則是有用而且能用,就是大多數(shù)瀏覽器得支持,否則就不算“上上簽”了。只能望“簽”興嘆又有什么用呢?
    <base>標(biāo)簽
    作用:標(biāo)簽為頁面中所有鏈接指定默認鏈接地址或鏈接目標(biāo)。有時候我們需要讓首頁的鏈接全部在新窗口中打開,使用這個標(biāo)簽就能一下搞定了!
    屬性:href:鏈接地址,target:目標(biāo),他的值可以是_blank,_parent,_self,_top,可以在除strict模式下使用,這個用法我最先是在163.com上發(fā)現(xiàn)的。
    用法:
    <head><!--寫在head標(biāo)簽之間-->
    <base href=http://www.webjx.com/ /> <!--將默認鏈接定義為http://www.webjx.com/-->
    <base target=_blank /> <!--將默認鏈接目標(biāo)定義為新窗口中打開-->
    </head>
    <head><!--寫在head標(biāo)簽之間-->
    <base href=http://www.webjx.com/ /> <!--將默認鏈接定義為http://www.webjx.com/-->
    <base target=_blank /> <!--將默認鏈接目標(biāo)定義為新窗口中打開-->
    </head>
    <caption>標(biāo)簽
    作用:caption標(biāo)簽用來定義表格的標(biāo)題,給表格定義一個標(biāo)題,來說明這個表格是干什么的,豈不是很有“語義”,caption應(yīng)該寫在table之后,默認的樣式是居中顯示在表格的頂部。你可以通過css來改變它的樣式。
    用法:
    <table width=200 border=1 >
    <caption> <!--caption應(yīng)該寫在table之后-->
    其實我是caption
    </caption>
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    <table width=200 border=1 >
    <caption> <!--caption應(yīng)該寫在table之后-->
    其實我是caption
    </caption>
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    <thead>標(biāo)簽、<tbody>標(biāo)簽、<tfoot>標(biāo)簽
    作用:thead、tfoot 以及 tbody標(biāo)簽跟他們的名字那樣,分別是表格的頭部(很多人只是用th)、主題、和底部,他們能讓表格更加語義化的同時,也能讓我們更加方便的控制表格的表現(xiàn)。國外還有人用很變態(tài)地方法用這三個表其做出標(biāo)題能跟隨表格,或者tbody固定高度,多出的行數(shù)出現(xiàn)滾動條。有興趣的可以搜素下或者是這做一下。
    注意:如果您使用 thead、tfoot 以及 tbody 元素,您就必須使用全部的元素。它們的出現(xiàn)次序是:thead、tfoot、tbody,這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。
    用法:
    <table border=1>
    <thead>
    <tr>
    <th>科目</th>
    <th>分數(shù)</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>總分</td>
    <td>159</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>語文</td>
    <td>99</td>
    </tr>
    <tr>
    <td>數(shù)學(xué)</td>
    <td>60</td>
    </tr>
    </tbody>
    </table>
    <table border=1>
    <thead>
    <tr>
    <th>科目</th>
    <th>分數(shù)</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>總分</td>
    <td>159</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>語文</td>
    <td>99</td>
    </tr>
    <tr>
    <td>數(shù)學(xué)</td>
    <td>60</td>
    </tr>
    </tbody>
    </table>
    <fieldset>標(biāo)簽和<legend>標(biāo)簽
    作用:<fieldset>元素用來分類表單中的元素,而<legend>則能給這個組定義一個標(biāo)題。你一定見過類似下面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> 標(biāo)簽和<sup> 標(biāo)簽
    作用:<sub> 標(biāo)簽和<sup> 標(biāo)簽分別是上標(biāo)和下標(biāo),雖然他們在各個瀏覽器的表現(xiàn)不一樣,你同樣可以使用css定義他們的樣式。
    用法:
    2<sup>我是上標(biāo)</sup>
    2<sub>我是下標(biāo)</sub>
    <label>標(biāo)簽
    作用:label 標(biāo)簽的使用可以擴大表單的點擊區(qū)域來改進表單的易用性??纯聪旅娴挠梅ǎ狐c擊文字的時候相當(dāng)于點擊了單選控件,這樣用戶體驗是不是會更好一些?
    用法:
    <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> 標(biāo)簽
    作用:標(biāo)簽可以給select中的option進行分組,這在下拉項目很多的時候很有用,配合label標(biāo)簽給每組命名。你也可以像淘寶那樣給每組用css定義不同的顏色。
    用法:
    <select>
    <optgroup label=自駕游> <!--配合label標(biāo)簽給每組命名-->
    <option>省內(nèi)</option>
    <option>省外</option>
    </optgroup>
    <optgroup label=旅行社>
    <option>省內(nèi)</option>
    <option>省外</option>
    <option>國外</option>
    </optgroup>
    </select>