这是我参与「第五届青训营」伴学笔记创作活动的第 3 天。
一、本堂课重点内容：
- HTML 链接
- HTML 图像
- HTML 表格
- HTML 列表
二、详细知识点介绍：
大家好，今天我们来学习HTML中的几个重要元素：链接、图像、表格和列表。
HTML 链接
概念：
首先是HTML链接它允许你在网页上放置一个可以链接到其他网页或文件的链接。你可以使用<a>标签来创建一个链接。
实例：
该标签的href属性是必需的，它指定你想要链接到的目标。例如：
<a href="http://www.example.com/about">About Us</a>
在上面的代码中，“href”是链接的属性，它指定了链接的目标URL。你可以指定任何网址作为目标，包括另一个网页、图像或电子邮件地址。你也可以在当前页面内部创建链接，使用“#”后跟目标元素的ID实现。
HTML 图像
概念
接下来是HTML图像，你可以使用<img>标签在网页上显示图像。
实例
你可以指定图像的URL或本地文件路径，例如：
<img src="image.jpg" alt="A sample image">
在上面的代码中，“src”是图像的属性，它指定了图像的URL。“alt”是图像的另一个重要属性，它定义了图像无法显示时的替代文本。这对于访问者使用屏幕阅读器访问你的网页非常重要，因为它们无法看到图像，但可以读取替代文本。
HTML 表格
概念
接下来是HTML表格，表格是在网页上显示表格数据的方法。你可以使用<table>标签创建表格，并使用<tr>标签（表格行）和<td>标签（表格数据）来定义表格内容。
实例
例如，以下代码显示了一个含有三行和两列的表格：
<table>
<tr>
<td>一行一列</td>
<td>一行两列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行两列</td>
</tr>
<tr>
<td>三行一列</td>
<td>三行两列</td>
</tr>
</table>
上述代码的显示效果如下：
| 一行一列 | 一行两列 |
| 二行一列 | 二行两列 |
| 三行一列 | 三行两列 |
你还可以使用<th>标签（表头）在表格顶部定义列标题，例如：
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行两列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行两列</td>
</tr>
<tr>
<td>三行一列</td>
<td>三行两列</td>>
</tr>
</table>
上述代码的显示效果如下：
>| 表头1 | 表头2 |
|---|---|
| 一行一列 | 一行两列 |
| 二行一列 | 二行两列 |
| 三行一列 | 三行两列 |
HTML 列表
概念
列表是另一种常用的组织数据的方法。你可以使用<ul>标签（无序列表）或<ol>标签（有序列表）创建列表，并使用<li>标签（列表项）定义列表内容。
实例
例如，以下代码显示了一个无序列表：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
上述代码的显示效果如下：
- Item 1
- Item 2
- Item 3
以下代码显示了一个有序列表：
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
上述代码的显示效果如下：
- Item 1
- Item 2
- Item 3
注意
列表项可以是复杂的，例如包含链接、图像或其他内容。你可以在列表项内部使用任何HTML元素。
课后总结
这就是关于HTML链接、HTML图像、HTML表格和HTML列表的基本介绍。这些是HTML的基础元素，学习这些元素可以帮助你更好地理解和使用HTML。如果你想了解更多关于HTML的知识，请参阅相关资源，了解更多详情。
