在前面的学习中，我们接触的大部分标签都是成对出现的，这些标签都有一个“开始符号”和一个“结束符号”。不过细心的小伙伴也发现了，有些标签是没有结束符号的，例如<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）自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

需要注意的是，在HTML5标准中，自闭合标签中的“/”，加与不加都是可行的。小伙伴们不需要纠结这一点。

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

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