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

2019-10-16 00:00| 发布者: adminiot| 查看: 483| 评论: 0

　　一、元素分组：<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>

效果：