当今的WEB领域,新概念、新技术不断涌现 -- WEB2.0、AJAX、HTML5.0... ...
但在几乎被我们忽略的HTML和XHTML里,还有许多并不为人所知的,但却非常有用的一些TAG
以下就是其中的七种用法:
一、元素分组:<fieldset>、<legend>
示例:
- <fieldset>
- <legend>健康信息:</legend>
- <form>
- <label>身高:<input type="text" /></label>
- <label>体重:<input type="text" /></label>
- </form>
- </fieldset>
效果:

二、元素标注:<label>
示例:
- <form>
- <label for="male">Male</label>
- <input type="radio" name="sex" id="male" />
- <br />
- <label for="female">Female</label>
- <input type="radio" name="sex" id="female" />
- </form>
效果:

三、所有链接规定默认地址或默认目标:<base>
示例:
- <html>
- <head>
- <base href="http://www.w3school.com.cn/i/" mce_href="http://www.w3school.com.cn/i/" />
- <base target="_blank" />
- </head>
- <body>
- <img src="eg_smile.gif" mce_src="eg_smile.gif" /><br />
- <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>
- <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
- <br /><br />
- <p><a href="http://www.w3school.com.cn" mce_href="http://www.w3school.com.cn">W3School</a></p>
- <p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
- </body>
- </html>
四、上标与下标:<sup>、<sub>
示例:
- <p>
- This text contains <sub>subscript</sub>
- </p>
- <p>
- This text contains <sup>superscript</sup>
- </p>
效果:

五、分层列表:<dl>、<dt>、<dd>
示例:
- <dl>
- <dt>咖啡</dt>
- <dd>黑色的热饮料</dd>
- <dt>Milk</dt>
- <dd>白色的冷饮料</dd>
- </dl>
效果:

六、选项组:<optgroup>
示例:
- <select>
- <optgroup label="Swedish Cars">
- <option value="volvo">Volvo</option>
- <option value="saab">Saab</option>
- </optgroup>
- <optgroup label="German Cars">
- <option value="mercedes">Mercedes</option>
- <option value="audi">Audi</option>
- </optgroup>
- </select>
效果:

七、图像映射:<map>
示例:
- <html>
- <body>
- <p>请点击图像上的星球,把它们放大。</p>
- <img
- src="/i/eg_planets.jpg"
- border="0" usemap="#planetmap"
- alt="Planets" />
- <map name="planetmap" id="planetmap">
- <area
- shape="circle"
- coords="180,139,14"
- href ="/example/html/venus.html"
- target ="_blank"
- alt="Venus" />
- <area
- shape="circle"
- coords="129,161,10"
- href ="/example/html/mercur.html"
- target ="_blank"
- alt="Mercury" />
- <area
- shape="rect"
- coords="0,0,110,260"
- href ="/example/html/sun.html"
- target ="_blank"
- alt="Sun" />
- </map>
- <p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
- </body>
- </html>
效果:
