當今的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七種用法
寵辱不驚,看庭前花開花落;去留無意,望天上雲卷雲舒