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

2021年1月12日   |   by tgcode

　　一、元素分组：

、

示例：

1fieldset>
2legend>健康信息：legend>
3form>
4label>身高：inputtype=”text”/>label>
5label>体重：inputtype=”text”/>label>
6form>
7fieldset>

效果：

　　二、元素标注：

示例：

1form>
2labelfor=”male”>Malelabel>
3inputtype=”radio”name=”sex”id=”male”/>
4br/>
5labelfor=”female”>Femalelabel>
6inputtype=”radio”name=”sex”id=”female”/>
7form>

效果：

　　三、所有链接规定默认地址或默认目标：

示例：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1html>
2head>
3basehref=”http://www.w3school.com.cn/i/”mce_href=”http://www.w3school.com.cn/i/”/>
4basetarget=”_blank”/>
5head>
6
7body>
8imgsrc=”eg_smile.gif”mce_src=”eg_smile.gif”/>br/>
9p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在head部分规定了一个基准URL，浏览器将在如下地址寻找图片：p>
10p>“http://www.w3school.com.cn/i/eg_smile.gif”p>
11
12br/>br/>
13p>ahref=”http://www.w3school.com.cn”mce_href=”http://www.w3school.com.cn”>W3Schoola>p>
14p>请注意，链接会在新窗口中打开，即使链接中没有target=”_blank”属性。这是因为base元素的target属性已经被设置为”_blank”了。p>
15
16body>
17html>

　　四、上标与下标：^、

示例：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1p>
2Thistextcontainstgcodesub>subscriptsub>
3p>
4
5p>
6Thistextcontainssup>superscriptsup>
7p>

效果：

　　五、分层列表：

、

、

示例：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1dl>
2dt>咖啡dt>
3dd>黑色的热饮料dd>
4dt>Milkdt>
5dd>白色的冷饮料dd>
6dl>

效果：

　　六、选项组：

示例：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1select>
2optgrouplabel=”SwedishCars”>
3optionvalue=”volvo”>Volvooption>
4optionvalue=”saab”>Saaboption>
5optgroup>
6optgrouplabel=”GermanCars”>
7optionvalue=”mercedes”>Mercedesoption>
8optionvalue=”audi”>Audioption>
9optgroup>
10select>

效果：

　　七、图像映射：

示例：

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>1html>
2body>
3
4p>请点击图像上的星球，把它们放大。p>
5
6img
7src=”/i/eg_planets.jpg”
8border=”0″usemap=”#planetmap”
9alt=”Planets”/>
10
11mapname=”planetmap”id=”planetmap”>
12
13area
14shape=”circle”
15coords=”180,139,14″
16href=”/example/html/venus.html”
17target=”_blank”
18alt=”Venus”/>
19
20area
21shape=”circle”
22coords=”129,161,10″
23href=”/example/html/mercur.html”
24target=”_blank”
25alt=”Mercury”/>
26
27area
28shape=”rect”
29coords=”0,0,110,260″
30href=”/example/html/sun.html”
31target=”_blank”
32alt=”Sun”/>
33
34map>
35
36p>b>注释：b>imgtgcode元素中的”usemap”属性引用map元素中的”id”或”name”属性（根据浏览器），所以我们同时向map元素添加了”id”和”name”属性。p>
3tgcode7
38body>
39html>

效果：