HTML入门教程：第2篇 | 创建超链接与图像

在上一篇教程中，我们介绍了HTML的基础概念和常见标签。现在，让我们继续深入学习HTML，学会如何创建超链接和插入图像，这些是构建互联网上信息丰富页面的关键元素。

创建超链接

超链接（Hyperlink）是将不同网页或网页内的不同部分相互连接的一种方式。在HTML中，我们使用<a>标签来创建超链接。以下是创建超链接的基本语法：

1
<a href="目标链接">链接文本</a>
  • href 属性定义了链接的目标，可以是另一个网页的URL，也可以是文件的路径。
  • 链接文本是用户在页面上看到的可点击文本。

外部链接

要创建指向外部网页的链接，只需将目标URL放在href属性中，如下所示：

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

内部链接

如果你想在同一网站内链接到另一个页面，可以使用相对路径。假设你有一个名为about.html的页面，位于与当前页面相同的目录中，你可以这样创建内部链接：

1
<a href="about.html">关于我们</a>

在新窗口中打开链接

有时，你可能希望链接在新窗口或标签页中打开，而不是在当前窗口中。为了实现这一点，可以使用target属性：

1
<a href="https://www.example.com" target="_blank">在新窗口中打开链接</a>

target="_blank"告诉浏览器在新窗口中打开链接。

插入图像

插入图像是丰富网页内容的关键之一。在HTML中，我们可以使用<img>标签来插入图像，并可以通过属性来设置图像的宽度（width）和高度（height）。

以下是更详细的图像插入语法：

1
<img src="图像路径" alt="替代文本" width="宽度" height="高度">
  • src 属性定义了图像的路径，可以是相对路径或绝对URL。
  • alt 属性用于提供图像的替代文本，当图像无法加载时，替代文本将显示。
  • width 属性定义了图像的宽度，以像素（px）为单位。
  • height 属性定义了图像的高度，以像素（px）为单位。

插入本地图像

如果图像位于与HTML文件相同的目录中，可以使用相对路径插入图像，并设置宽度和高度：

1
<img src="my-image.jpg" alt="我的图片" width="300" height="200">

插入远程图像

要插入来自远程服务器的图像，只需提供图像的完整URL，并设置宽度和高度：

1
<img src="https://www.example.com/images/my-image.jpg" alt="我的图片" width="400" height="300">

通过设置宽度和高度属性，你可以控制图像在页面上的显示尺寸，确保图像在不失真的情况下适应页面布局。

实际示例

现在，让我们通过实际示例来演示创建超链接和插入图像。

以上示例中，我们创建了两个超链接分别指向外部网站和内部页面，并插入了一张远程图像。你可以根据需要修改链接的目标URL和图像的路径。

希望这篇教程对你有所帮助。如果你需要进一步的指导或有其他问题，请随时用邮件联系我：z@zigao.xyz。