HTML 中的容器和空标签

在 HTML 中，容器元素用于包装其他 HTML 元素，而空标签则仅用于标识自身。本文将介绍 HTML 中常见的容器元素和空标签。

容器元素

HTML 中的容器元素用于包装其他 HTML 元素，使它们作为一个整体进行样式控制或行为控制。

以下是一些常见的 HTML 容器元素：

1.

<div> 元素用于创建一个容器，可以包含任何其他 HTML 元素。它通常用于组织页面结构、样式和脚本等。

示例代码：

<div>
  <h1>这是一个标题</h1>
  <p>这是一段文字。</p>
</div>

2.

<span> 元素用于创建一个内联容器，可以包含任何其他 HTML 元素。它通常用于在段落中突出显示某个文本。

示例代码：

<p>这是一段 <span style="color:red;">突出显示的</span> 文字。</p>

3.

和

<ul> 元素用于创建一个无序列表，每个列表项使用 <li> 元素来表示。而 <ol> 元素用于创建一个有序列表，每个列表项也是使用 <li> 元素来表示。

示例代码：

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

4.

<table> 元素用于创建一个表格，其中每一个单元格使用 <td> 元素表示。同时，可以使用 <tr> 元素来表示表格的一行，使用 <th> 元素表示表格中的表头。

示例代码：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

空标签

HTML 中的空标签仅用于标识自身，没有内容。它们通常用于插入图片、换行等操作。

以下是一些常见的 HTML 空标签：

1.

<img> 元素用于插入图片，通过 src 属性来指定图片的 URL。

示例代码：

<img src="https://example.com/image.jpg" alt="图片描述">

2.

<br> 元素用于换行。

示例代码：

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

3.

---

<hr> 元素用于绘制一条水平线。

示例代码：

<p>这是一段文字。</p>
<hr>
<p>这是另一段文字。</p>

以上就是 HTML 中的容器元素和空标签的介绍。对于程序员而言，了解并熟练使用这些元素和标签非常重要，可以有效提高开发效率和页面质量。