HTML 常用空元素标签

空元素标签，也称为自闭合标签，在 HTML 中没有内容，它们通常用于表示一些简单的结构或功能。

以下是 HTML 中常用的空元素标签：

1. <br>：换行符

• 作用： 在文本中插入一个换行符，强制文本换行到下一行。
• 示例：

<p>这是一段文本。
<br>
这是第二行文本。</p>

2. <hr>：水平线

• 作用： 在页面中插入一条水平线，用于分隔不同的内容区域。
• 属性：
  • size：水平线的厚度。
  • width：水平线的宽度。
  • align：水平线的对齐方式，可选值：left、center、right。
• 示例：

<hr size="5" width="50%">

3. <wbr>：软换行符

• 作用： 在文本中插入一个软换行符，当文本长度超过容器宽度时，会自动换行。
• 示例：

<p>这是一个很长的单词<wbr>，它可能会被自动换行。</p>

4. <img>：图片

• 作用： 在页面中插入图片。
• 属性：
  • src：图片的地址。
  • alt：图片的替代文字，当图片无法显示时，会显示替代文字。
  • width：图片的宽度。
  • height：图片的高度。
  • title：图片的标题，鼠标悬停在图片上时会显示标题。
• 示例：

<img src="image.jpg" alt="图片描述" width="200" height="150">

5. <audio>：音频

• 作用： 在页面中插入音频。
• 属性：
  • src：音频文件的地址。
  • controls：是否显示音频播放控制按钮。
  • autoplay：是否自动播放音频。
  • loop：是否循环播放音频。
• 示例：

<audio controls src="audio.mp3">
  您的浏览器不支持音频播放。
</audio>

6. <video>：视频

• 作用： 在页面中插入视频。
• 属性：
  • src：视频文件的地址。
  • controls：是否显示视频播放控制按钮。
  • autoplay：是否自动播放视频。
  • loop：是否循环播放视频。
• 示例：

<video controls src="video.mp4">
  您的浏览器不支持视频播放。
</video>

7. <source>：视频/音频源

• 作用： 用于指定 <audio> 或 <video> 元素的多个音频或视频源，以便在浏览器不支持当前源的情况下使用其他源。
• 属性：
  • src：音频或视频文件的地址。
  • type：音频或视频文件的类型，例如 audio/mpeg、video/mp4。
• 示例：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

8. <track>：字幕

• 作用： 用于为 <audio> 或 <video> 元素添加字幕或旁白。
• 属性：
  • kind：字幕类型，例如 subtitles、captions 等。
  • src：字幕文件的地址。
  • srclang：字幕语言。
• 示例：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en">
  您的浏览器不支持视频播放。
</video>

9. <input>：输入框

• 作用： 创建各种类型的输入框，例如文本框、密码框、单选按钮、复选框等
• 属性：
  • type：输入框的类型，例如 text、password、radio、checkbox 等
  • name：输入框的名称
  • value：输入框的默认值
  • placeholder：输入框的提示信息
• 示例：

<input type="text" name="username" placeholder="请输入用户名"> 

10. <meta>：元数据

• 作用： 用于定义 HTML 文档的元数据，例如字符集、描述、关键词等。
• 属性：
  • name：元数据的名称。
  • content：元数据的具体内容。
• 示例：

<meta charset="UTF-8">
<meta name="description" content="网站描述">
<meta name="keywords" content="关键词1, 关键词2">

11. <link>：链接外部资源

• 作用： 用于链接外部资源，例如 CSS 文件、图标文件等。
• 属性：
  • rel：链接关系，例如 stylesheet、icon 等。
  • href：外部资源的地址。
• 示例：

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">