HTML:自闭合标签简单介绍

1. 什么是自结束标签？

• 定义：自结束标签（Self-closing Tag）是指 不需要单独结束标签 的 HTML 标签，它们通过自身的语法结构闭合。
• 语法形式：
  • 在 HTML5 中：直接写作 <tag>，例如 <img>、<br>。
  • 在 XHTML 中：必须写作 <tag />，例如 <img />、<br />（HTML5 兼容这种写法，但非强制）。
• 关键特点：
  • 没有内容：自结束标签通常不包裹任何文本或子元素，所有功能通过属性（如 src、alt）实现。
  • 单个标签：它们本身就是一个完整的元素，不需要配对的结束标签（如 </tag>）。

---

2. 自结束标签的用途

自结束标签用于表示那些 没有内容或内容由属性定义 的元素。以下是常见用途：

(1) 嵌入外部资源

• <img>：插入图片。

  html复制代码

  <img src="photo.jpg" alt="风景图片">

  • src 属性指定图片路径，alt 属性提供替代文本（图片无法加载时显示）。

• <link>：链接外部资源（如 CSS 文件）。

  html复制代码

  <link rel="stylesheet" href="style.css">

(2) 输入控件

• <input>：创建输入框、按钮等。

  html复制代码

  <input type="text" placeholder="请输入用户名">
  <input type="checkbox" id="agree">

(3) 元数据或功能性元素

• <meta>：定义文档元数据（如字符编码、视口设置）。

  html复制代码

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• <br>：强制换行。

  html复制代码

  <p>第一行文本<br>第二行文本</p>

(4) 分隔线

• <hr>：创建水平分隔线。

  html复制代码

  <p>第一部分内容</p>
  <hr>
  <p>第二部分内容</p>

---

3. 自结束标签 vs 双标签

特征	自结束标签	双标签
语法	<tag> 或 <tag />	<tag>内容</tag>
内容	无内容，通过属性定义功能	包裹文本或子元素
常见元素	<img>, <input>, <br>	<div>, <p>, <a>
示例	<img src="cat.jpg" alt="猫">	<p>这是一个段落</p>

---

4. 注意事项

1. HTML5 的宽松性：

   • HTML5 允许自结束标签不写闭合斜杠（如 <img>），但兼容 <img /> 写法。
   • XHTML 严格要求闭合斜杠（如 <img />）。

2. 不要滥用自结束标签：

   • 如果元素需要包裹内容（如 <div>、<span>），必须使用双标签。
   • 错误示例：<div />内容</div>（会导致解析错误）。

3. 属性替代内容：

   • 自结束标签的功能完全依赖属性，例如 <input> 的 type 属性决定了输入框类型。

---

总结

• 自结束标签是单个标签，无需闭合，用于表示没有内容的元素。
• 常见场景：嵌入资源（图片、CSS）、输入控件（文本框、复选框）、元数据（字符编码）、功能性符号（换行、分隔线）。
• 记住：有内容用双标签，无内容用自结束标签。