天天看點

挖掘經典:幾乎被人遺忘的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>  

效果:

挖掘經典:幾乎被人遺忘的HTML七種用法

二、元素标注:<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> 

挖掘經典:幾乎被人遺忘的HTML七種用法

三、所有連結規定預設位址或預設目标:<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> 

挖掘經典:幾乎被人遺忘的HTML七種用法

五、分層清單:<dl>、<dt>、<dd>

1 <dl>   

2   <dt>咖啡</dt>   

3   <dd>黑色的熱飲料</dd>   

4   <dt>Milk</dt>   

5   <dd>白色的冷飲料</dd>   

6  </dl>

挖掘經典:幾乎被人遺忘的HTML七種用法

六、選項組:<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> 

挖掘經典:幾乎被人遺忘的HTML七種用法

七、圖像映射:<map>

 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>   

挖掘經典:幾乎被人遺忘的HTML七種用法

寵辱不驚,看庭前花開花落;去留無意,望天上雲卷雲舒