第3节课：超链接与图片——HTML中的导航与视觉元素

在网页设计中，超链接和图片是两个至关重要的元素。超链接允许用户从一个页面跳转到另一个页面，而图片则为网页增添了视觉吸引力。在本节课中，我们将深入探讨如何在HTML中创建超链接和图片，并了解它们的相关属性和用法。

超链接 `<a>`：网页间的桥梁

创建超链接

超链接是HTML中最基本的导航元素之一。使用<a>标签可以创建一个超链接，用户点击这个链接时会被引导到指定的URL。

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

在这个例子中，href属性指定了链接的目标地址。https://www.example.com是链接的目标URL，用户点击链接时会被重定向到这个地址。

超链接的属性

除了href属性，<a>标签还支持其他一些有用的属性：

title：提供链接的额外信息，通常显示为鼠标悬停时的提示。
target：指定在何处打开链接。常用的值有_blank（在新标签页中打开）和_self（在当前标签页中打开）。
rel：定义链接和当前文档之间的关系。常用的值有nofollow（告诉搜索引擎不要跟踪此链接）。

<a href="https://www.example.com" title="示例网站" target="_blank" rel="nofollow">访问示例网站</a>

图片 `<img>`：为网页增添视觉元素

使用图片

图片是网页中常见的视觉元素，可以吸引用户的注意力并提供额外的信息。在HTML中，使用<img>标签来插入图片。

<img src="image.jpg" alt="示例图片">

在这个例子中，src属性指定了图片的来源地址，而alt属性提供了图片的替代文本，当图片无法显示时，这个文本会被显示出来。

图片的属性

除了src和alt属性，<img>标签还支持其他一些属性：

width 和 height：指定图片的宽度和高度。
title：提供图片的额外信息，通常显示为鼠标悬停时的提示。
class 和 id：用于CSS样式和JavaScript操作。

<img src="image.jpg" alt="示例图片" width="300" height="200" title="示例图片" class="image-style">

锚点和页面导航

锚点的使用

锚点是HTML中的一种特殊链接，允许用户在同一页面内跳转到不同的部分。通过给元素添加id属性，并创建指向该id的超链接，可以实现锚点导航。

<!-- 定义锚点 -->
<h2 id="section1">第1节</h2>
<p>这是第1节的内容。</p><!-- 创建指向锚点的链接 -->
<a href="#section1">跳转到第1节</a>

在这个例子中，点击“跳转到第1节”链接会将用户滚动到页面中id为section1的元素。

实践：创建一个包含超链接和图片的网页

让我们通过一个示例来实践这些标签的使用。假设我们要创建一个包含超链接和图片的个人博客页面。

<!DOCTYPE html>
<html>
<head><title>我的个人博客</title>
</head>
<body><h1>欢迎来到我的个人博客</h1><p>这是我的个人博客，这里记录了我的生活和学习经历。</p><!-- 创建一个超链接 --><a href="https://www.example.com" title="示例网站" target="_blank" rel="nofollow">访问我的个人网站</a><!-- 插入一张图片 --><img src="blog-image.jpg" alt="博客图片" width="600" height="400" title="博客图片" class="blog-image"><h2 id="section1">关于我</h2><p>我是一名网页设计师，热衷于创造美观且实用的网页。</p><!-- 创建一个指向锚点的链接 --><a href="#section1">了解更多关于我</a><h2>我的作品</h2><p>以下是我设计的一些网页作品。</p><!-- 创建指向其他页面的超链接 --><a href="portfolio.html">查看我的设计作品</a>
</body>
</html>