在前面的学习中,我们接触的大部分标签都是成对出现的,这些标签都有一个“开始符号”和一个“结束符号”。不过细心的小伙伴也发现了,有些标签是没有结束符号的,例如<br />和<hr />。

在HTML中,标签分为两种:一般标签和自闭合标签。那么它们之间有什么区别呢?我们先来看一个例子。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自闭合标签</title> </head> <body> <div> <h3>绿叶学习网</h3> <hr/> <p>“绿叶,给你初恋般的感觉。”</p> </div> </body> </html>

浏览器预览效果如下图所示。

分析:

从上面代码我们可以看出,div标签的“开始符号”和“结束符号”之间是可以插入其他标签或文字的,但是meta标签和hr标签中是不能插入其他标签或文字的。

现在我们来总结一下“一般标签”和“自闭合标签”的特点。

  • (1)一般标签:由于有开始符号和结束符号,因此可以在内部插入其他标签或文字。
  • (2)自闭合标签:由于只有开始符号而没有结束符号,因此不可以在内部插入标签或文字。所谓的“自闭合”,指的是本来要用一个配对的结束符号来关闭,然而它却“自己”关闭了。

在HTML中,常见的自闭合标签如下表所示。

表1 自闭合标签
标签 说明
<meta /> 定义网页的信息(供搜索引擎查看)
<link /> 引入“外部CSS文件”
<br /> 换行标签
<hr /> 水平线标签
<img /> 图片标签
<input /> 表单标签