HTML教程:HTML的七种用法
来源:学生作业帮助网 编辑:作业帮 时间:2024/05/10 19:05:35 HTML
HTML教程:HTML的七种用法HTML
【51Test.NET-HTML教程:HTML的七种用法】:
当今的WEB领域,新概念、新技术不断涌现 --WEB2.0、AJAX、HTML5.0... ...
但在几乎被我们忽略的HTML和XHTML里,还有许多并不为人所知的,但却非常有用的一些TAG
以下就是其中的七种用法:
一、元素分组:
示例:
1 <fieldset>
2 <legend>健康信息:legend>
3 <form>
4 <label>身高:<input type="text" />label>
5 <label>体重:<input type="text" />label>
6 form>
7 fieldset>
效果:
二、元素标注:
示例:
1 <form>
2 <label for="male">Malelabel>
3 <input type="radio" name="sex" id="male" />
4 <br />
5 <label for="female">Femalelabel>
6 <input type="radio" name="sex" id="female" />
7 form>
效果:
三、所有链接规定默认地址或默认目标:
示例:
1 <html>
2 <head>
3 <base href="http://www.w3school/i/" mce_href="http://www.w3school/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/i/eg_smile.gif"p>
11
12 <br /><br />
13 <p><a href="http://www.w3school" mce_href="http://www.w3school">W3Schoola>p>
14 <p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。p>
15
16 body>
17 html>
四、上标与下标:、
示例:
1 <p>
2 This text contains <sub>subscriptsub>
3 p>
4
5 <p>
6 This text contains <sup>superscriptsup>
7 p>
效果:
五、分层列表:、
示例:
1 <dl>
2 <dt>咖啡dt>
3 <dd>黑色的热饮料dd>
4 <dt>Milkdt>
5 <dd>白色的冷饮料dd>
6 dl>
效果:
六、选项组:
示例:
1 <select>
2 <optgroup label="Swedish Cars">
3 <option value="volvo">Volvooption>
4 <option value="saab">Saaboption>
5 optgroup>
6 <optgroup label="German Cars">
7 <option value="mercedes">Mercedesoption>
8 <option value="audi">Audioption>
9 optgroup>
10 select>
效果:
七、图像映射:
HTML示例:
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>
效果: