被忽略卻很有用的html標簽


<base>標簽    

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

屬性:Href:鏈接地址    target:目標,他的值可以是_blank,_parent,_self,_top,可以在除Strict模式下使用。    

用法:

<head><!—寫在head標簽之間-->
<base href="http://www.qq.com/"/> <!—將默認鏈接定義為http://www.qq.com/-->
<base target="_blank"/> <!—將默認鏈接目標定義為新窗口中打開-->
</head>
<body>
<a href="#">我可沒寫鏈接地址哦</a>
</body>

 

<caption>標簽    

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

用法:

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

 

 

<thead>標簽、<tbody>標簽、<tfoot>標簽    
作用:thead、tfoot 以及 tbody標簽跟他們的名字那樣,分別是表格的頭部(很多人只是用th)、主題、和底部,他們能讓表格更加語義化的同時,也能讓我們更加方便的控制表格的表現。國外還有人用很變態地方法用這三個表其做出標題能跟隨表格,或者tbody固定高度,多出的行數出現滾動條。有興趣的可以搜素下或者是這做一下。    
用法:
 1 <table border="1">
 2   <thead>
 3     <tr>
 4         <th>科目</th>
 5         <th>分數</th>
 6     </tr>
 7   </thead>
 8   <tbody>
 9     <tr>
10       <td>語文</td>
11       <td>99</td>
12     </tr>
13     <tr>
14       <td>數學</td>
15       <td>60</td>
16     </tr>
17   </tbody>
18   <tfoot>
19     <tr>
20       <td>總分</td>
21       <td>159</td>
22     </tr>
23   </tfoot>
24 </table>

 

<fieldset>標簽和<legend>標簽    
作用:<fieldset>元素用來分類表單中的元素,而<legend>則能給這個組定義一個標題。你一定見過類似下面domo的布局吧!他們也可以通過css定義樣式。    
用法:
<form>
  <fieldset>
    <legend>基本信息</legend>
    姓名: <inputtype="text"/> 
    性別: <inputtype="text"/>
  </fieldset>
</form>

 

<sup> 標簽和<sub> 標簽    

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

用法:

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

 

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


<optgroup> 標簽    

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

用法:

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

運行結果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM