HTML 元素

引言

HTML（超文本标记语言）是构建网页的基础，而 HTML 元素是构成 HTML 文档的基本单位。每个元素由开始标签、内容和结束标签组成。理解 HTML 元素的结构和用法是学习网页开发的第一步。在本教程中，我们将深入探讨 HTML 元素的组成、类型以及如何使用它们来创建网页。

1. HTML 元素的基本结构

一个 HTML 元素通常由以下几部分组成：

<标签名>内容</标签名>

例子：

<p>这是一个段落。</p>

在这个例子中：

• <p> 是开始标签，标识一个段落元素。
• 这是一个段落。 是元素的内容。
• </p> 是结束标签，表示段落元素的结束。

1.1 自闭合元素

有些 HTML 元素没有内容，称为自闭合元素，这些元素不需要结束标签。它们通常包括图像、水平线等。

<img src="image.jpg" alt="描述性文字">
<hr>

在上面的例子中，<img> 是自闭合元素，表示一张图片，而 <hr> 表示一条水平线。

2. 常见的 HTML 元素

2.1 标题元素

HTML 提供六个级别的标题元素，分别为 <h1> 到 <h6>。它们的使用顺序从最重要到最不重要。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2.2 段落元素

段落元素使用 <p> 标签定义，用于表示文本段落。

<p>这是一个段落，包含一些文本信息。</p>

2.3 链接元素

链接元素使用 <a> 标签，href 属性定义链接目标。

<a href="https://www.example.com">访问示例网站</a>

2.4 图像元素

图像元素使用 <img> 标签，src 属性指定图像路径，alt 属性提供替代文本。

<img src="image.jpg" alt="描述性文字">

2.5 列表元素

HTML 支持有序列表和无序列表。

• 无序列表使用 <ul> 标签和 <li> 列表项标签：

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

• 有序列表使用 <ol> 标签和 <li> 列表项标签：

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

2.6 表格元素

表格使用 <table> 元素定义，包含表头 <thead>、表体 <tbody> 和表格行 <tr>。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

2.7 强调和粗体元素

• 强调元素使用 <em> 标签，通常以斜体显示：

<p>这是一个 <em>强调</em> 的文本。</p>

• 粗体元素使用 <strong> 标签，通常以粗体显示：

<p>这是一个 <strong>重要</strong> 的文本。</p>

3. 属性

HTML 元素可以包含属性，以提供额外的信息。属性通常在开始标签中定义，格式为 属性名="属性值"。