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

　　一、元素分组：

、

示例：

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

效果：

　　二、元素标注：

示例：

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 >  

效果：

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

示例：

 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 >  

　　四、上标与下标：^、

示例：

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

效果：

  

　　五、分层列表：

、

、

示例：

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

效果：

  

　　六、选项组：

示例：

 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 >  

效果：

  

　　七、图像映射：

示例：

 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 >    

效果：

  

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