挖掘经典：几乎被人遗忘的HTML七种用法 (转)
生活随笔
收集整理的這篇文章主要介紹了
挖掘经典：几乎被人遗忘的HTML七种用法 (转)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉來學習http://www.cnblogs.com/netWild/archive/2010/11/30/1892418.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>??
?
?
效果：
?
二、元素標注：<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>???
?
?
效果：
?
?
總結
以上是生活随笔為你收集整理的挖掘经典：几乎被人遗忘的HTML七种用法 (转)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring+ibatis配置
- 下一篇： 利用HTML中的XML数据岛记录浏览