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

最新推荐文章于 2024-08-24 14:55:09 发布

netWild

最新推荐文章于 2024-08-24 14:55:09 发布

阅读量579

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web Client JAVA Web 文章标签： html input xhtml 浏览器 border html5

本文链接：https://blog.youkuaiyun.com/netWild/article/details/6032633

Web Client 同时被 2 个专栏收录

9 篇文章

订阅专栏

JAVA Web

5 篇文章

订阅专栏

本文介绍了HTML中七个不常用但实用的标签及其用法，包括元素分组、元素标注、上标与下标等，有助于提升网页设计的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当今的WEB领域，新概念、新技术不断涌现 -- WEB2.0、AJAX、HTML5.0... ...

但在几乎被我们忽略的HTML和XHTML里，还有许多并不为人所知的，但却非常有用的一些TAG

以下就是其中的七种用法：

一、元素分组：<fieldset>、<legend>

示例：

效果：

二、元素标注：<label>

示例：

<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>

效果：

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

示例：

<html> <head> <base href="http://www.w3school.com.cn/i/" mce_href="http://www.w3school.com.cn/i/" /> <base target="_blank" /> </head> <body> <img src="eg_smile.gif" mce_src="eg_smile.gif" /><br /> <p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p> <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p> <br /><br /> <p><a href="http://www.w3school.com.cn" mce_href="http://www.w3school.com.cn">W3School</a></p> <p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p> </body> </html>

四、上标与下标：<sup>、<sub>

示例：

<p> This text contains <sub>subscript</sub> </p> <p> This text contains <sup>superscript</sup> </p>

效果：

五、分层列表：<dl>、<dt>、<dd>

示例：

<dl> <dt>咖啡</dt> <dd>黑色的热饮料</dd> <dt>Milk</dt> <dd>白色的冷饮料</dd> </dl>

效果：

六、选项组：<optgroup>

示例：

<select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>

效果：

七、图像映射：<map>

示例：

<html> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> </body> </html>

效果：