HTML图像、超链接标签的运用（保姆级教学）

一、图像

1.定义

图像是美化网页最常用的元素之一。HTML的一个重要特性就是可以在文本中加入图像，既可以把图像作为文档的内在对象加入，又可以通过超链接的方式加入，还可以将图像作为背景加入到文档中。

2.图像标签

在HTML中，，用<img>标签网页中添加图像，图像以嵌入的方式添加到网页中。

<img>的语法：

<img src="url" alt="">

① <img>标签

src：指定图像的 url，可以是相对路径或绝对路径，是必需的属性
alt：在图像无法显示时，在图像位置代替图像的说明文字
title：指定图像的标题，鼠标放在图像上显示的文字
width：指定图像的宽度
height：指定图像的高度
border：指定图像的边框大小、宽度和高度，用数字表示
align：指定图像在页面中的对齐方式。包括：left（左对齐）、right（右对齐）、top（顶部对齐）、middle（中央对齐）、bottom（底部对齐）
hspace：设定图片左侧和右侧的空白像素（水平边距）
vshape：设定图片顶部和底部的空白像素（垂直边距）

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签测试页面</title>
</head>
<body>
    <h1>picture text</h1>
    <img src="https://www.image.com" alt="" width="400" height="300" border="10">
</body>
</html>

代码运行结果：

②绝对路径和相对路径

绝对路径的起点是根目录，相对路径的起点是当前目录
绝对路径以“ http:// ” 或 “ / ” 开头，相对路径以 “ . . ” 开头

示例：绝对路径

<img src="http://www.abc.com/images/photo.jpg">
或
<img src="/images/photo.jpg">

相对路径

<img src="../images/photo.jpg">

二、超链接

1.定义

超链接（hyperlink）是指从一个网页指向一个目标的连接关系。超链接通常是带蓝色下划线的文字或图像，当用户点击该文字或图像时，会跳转到相应位置。

2.超链接的应用

①创建超链接

我们通常使用<a>标签在HTML中创建超链接。

<a>的语法：

<a href="url" title="指向链接显示的文字" target="窗口名称">链接文本</a>

其中 href 属性指定链接的目标 url ，链接文本是用户点击时看到的文本
示例：要创建一个跳转到百度网页的超链接
```
<a href="https://www.baidu.com">百度</a>
```
新标签页的打开：
使用 target 属性将链接在新标签页中打开
target：指定链接在何处打开。常用取值包括_blank（在新标签页中打开链接）、_self（在当前标签页中打开链接）等
title：指定链接的提示文本，鼠标悬停在链接上时会显示

示例：

<a href="page.html" target="_blank">在新标签页中打开</a>

②页面内锚点链接

书签链接：书签链接也叫锚点链接，通过单击书签链接能指向页面里的特定段落，便于浏览者快速查看网页内容
使用 href 属性将链接指向当前页面内的某个具体位置

创建锚点：

<a href="#section1">跳转到第一部分</a>

目标位置：
```
<a id="section1">第一部分</a>
```

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签测试页面</title>
</head>
<body>
    <h2>《水果图鉴》</h2>

    <a href="#橘子"><h4>查看橘子图片</h4></a>

    <a href="#苹果"><h4>查看苹果图片</h4></a>
 
    <a href="#香蕉"><h4>查看香蕉图片</h4></a>


    <a name="橘子">
        <p>这是橘子</p>
    </a>
    <img src="../图片/orange.jpg" alt="?" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx">

    <a name="苹果">
        <p>这是苹果</p>
    </a>
    <img src="../图片/apple.jpg" alt="??" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx">

    <a name="香蕉">
        <p>这是香蕉</p>
    </a>
    <img src="../图片/banana.jpg" alt="????" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx">

</body>
</html>

代码运行结果：

三、总结

在HTML中，图像标签和超链接标签都是网页设计不可或缺的部分，能更加方便浏览者访问网页，也是前端设计师在设计网页中的重要因素，需要好好掌握这些标签的运用。