挖掘经典：几乎被人遗忘的HTML七种用法

挖掘经典：几乎被人遗忘的HTML七种用法

当今的WEB领域，新概念、新技术不断涌现 -- WEB2.0、AJAX、HTML5.0... ...

但在几乎被我们忽略的HTML和XHTML里，还有许多并不为人所知的，但却非常有用的一些TAG

以下就是其中的七种用法：

 

---

 

 

一、元素分组：<fieldset>、<legend>

示例：

 

1  < fieldset >    
2  < legend > 健康信息： </ legend >    
3  < form >    
4  < label > 身高： < input  type ="text"   /></ label >    
5  < label > 体重： < input  type ="text"   /></ label >    
6  </ form >    
7  </ fieldset >   

 

 

效果：

 

二、元素标注：<label>

示例：

 

1  < form >    
2     < label  for ="male" > Male </ label >    
3     < input  type ="radio"  name ="sex"  id ="male"   />    
4     < br  />    
5     < label  for ="female" > Female </ label >    
6     < input  type ="radio"  name ="sex"  id ="female"   />    
7  </ form >  

 

 

效果：

 

三、所有链接规定默认地址或默认目标：<base>

示例：

 

 1  < html >    
 2  < head >    
 3  < base  href ="http://www.w3school.com.cn/i/"  mce_href ="http://www.w3school.com.cn/i/"   />    
 4  < base  target ="_blank"   />    
 5  </ head >    
 6    
 7  < body >    
 8  < img  src ="eg_smile.gif"  mce_src ="eg_smile.gif"   />< br  />    
 9  < p > 请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片： </ p >    
10  < p > "http://www.w3school.com.cn/i/eg_smile.gif" </ p >    
11    
12  < br  />< br  />    
13  < p >< a  href ="http://www.w3school.com.cn"  mce_href ="http://www.w3school.com.cn" > W3School </ a ></ p >    
14  < p > 请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。 </ p >    
15    
16  </ body >    
17  </ html >   

 

 

四、上标与下标：<sup>、<sub>

示例：

 

1  < p >    
2  This text contains  < sub > subscript </ sub >    
3  </ p >    
4    
5  < p >    
6  This text contains  < sup > superscript </ sup >    
7  </ p >  

 

 

效果：

 

 

五、分层列表：<dl>、<dt>、<dd>

示例：

 

1  < dl >    
2     < dt > 咖啡 </ dt >    
3     < dd > 黑色的热饮料 </ dd >    
4     < dt > Milk </ dt >    
5     < dd > 白色的冷饮料 </ dd >    
6  </ dl >

 

 

效果：

 

 

六、选项组：<optgroup>

示例：

 

 1  < select >    
 2     < optgroup  label ="Swedish Cars" >    
 3       < option  value ="volvo" > Volvo </ option >    
 4       < option  value ="saab" > Saab </ option >    
 5     </ optgroup >    
 6     < optgroup  label ="German Cars" >    
 7       < option  value ="mercedes" > Mercedes </ option >    
 8       < option  value ="audi" > Audi </ option >    
 9     </ optgroup >    
10  </ select >  

 

 

效果：

 

 

七、图像映射：<map>

示例：

 

 1  < html >    
 2  < body >    
 3    
 4  < p > 请点击图像上的星球，把它们放大。 </ p >    
 5    
 6  < img   
 7  src ="/i/eg_planets.jpg"    
 8  border ="0"  usemap ="#planetmap"    
 9  alt ="Planets"   />    
10    
11  < map  name ="planetmap"  id ="planetmap" >    
12    
13  < area   
14  shape ="circle"    
15  coords ="180,139,14"    
16  href  ="/example/html/venus.html"    
17  target  ="_blank"    
18  alt ="Venus"   />    
19    
20  < area   
21  shape ="circle"    
22  coords ="129,161,10"    
23  href  ="/example/html/mercur.html"    
24  target  ="_blank"    
25  alt ="Mercury"   />    
26    
27  < area   
28  shape ="rect"    
29  coords ="0,0,110,260"    
30  href  ="/example/html/sun.html"    
31  target  ="_blank"    
32  alt ="Sun"   />    
33    
34  </ map >    
35    
36  < p >< b > 注释： </ b > img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。 </ p >    
37    
38  </ body >    
39  </ html >    

 

 

效果：