热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> 网页标准>>正文内容

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

发布时间:2010年12月01日点击数: 佚名

当今的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>  

效果:

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作