HTML 空元素

最新推荐文章于 2025-05-07 21:29:09 发布

原创最新推荐文章于 2025-05-07 21:29:09 发布 · 8.3k 阅读

10 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

概念：首先啥是空元素呢？就是字面意思：没有内容的HTML元素，比较常见的空元素像<img> <link> <meta> <br> <hr>这种，他们往往没有关闭标签(从表面上看是自己关闭自己233，像<br />),听说在未来的趋势里这种没有关闭标签的情况会被取消掉.。

一、area元素

作用:形成矩形，圆形，多边形可点击区域

特点:属于图像映射，被包含在map标签中，与img元素对应，而不能成为一个div的映射（可以用手段合并如绝对定位，但注意同样不能成为div中的映射，要么div会把该区域挡住，要么改div的z-index就会被挡住orz)

参数说明(coords是点坐标):

圆形：shape="circle"，coords="x,y,z" 圆的圆心坐标和半径

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..." 多个顶点的坐标

矩形：shape="rectangle"，coords="x1,y1,x2,y2" 左上和右下角的顶点坐标

基础举例：

http://www.runoob.com/try/try.php?filename=tryhtml_areamap

测试div和map合并样例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
	div{
		color:#ffffff;
		background-color:black;
		position:absolute;
		top:100px;
		left:100px;
		z-index:0;
	}
	</style>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>
	<div >bulaili</div>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

二、base元素
规定页面上所有链接的默认 URL 和默认目标，便于路径书写

三、col元素

用于table的列统一css样式

四、embed元素

可用于插入flash动画

还有<command> <keygen> <param><source><track><wbr>这种超冷门的