一、图像标签
1.基本格式
<img src="图像URL" />
scr: 指定图像文件的路径名和文件名，是img标签必要属性。其他的属性还有：
alt:替换文本，图片无法显示时使用
title:鼠标放在图片上提示的文本
width:设置图片宽度
height:设置图片高度
border:设置图像边框粗细
align：指定图像在页面中的对齐方式。
border：定义边框的样式、宽度和颜色
hspace：用于设置图像左右的空白像素
vspace：用于设置图像上下的空白像素
代码示例：
<img src="../picture/orange.jpg" alt="橘子图片加载失败" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx">
2.图像路径
1.相对路径：
同级路径：直接写文件名称
下一级路径：/
上一级路径：…/
就以上面的代码为例子：
代码的路径在wed_2_28下，而orange.jpg在picture路径下，要从代码位置找到orange.jpg。
2.绝对路径
指目录下的绝对路径，如：<img src="D:HTML\picture\orange.jpg">
·注意相对路径和绝对路径的斜杠的正反
二、超链接标签
1.基本格式
<a href=“跳转目标” target=“目标窗口的弹出方式> 文本或者图像 </a>
href: 指定链接目标的URL地址，是a标签必要属性
还有其他属性：
target：指定链接页面的打开方式
2.链接分类
1.外部链接：
- 链接外部
<a href="http://www.baidu.com">百度</a>
2.内部链接：
- 内部文件或网站内部页面的相互链接
- 跳转页面的文件在目标文件夹内，利用相对路径找到目标文件
<a href="D:HTML\picture\orange.jpg">橘子图片</a>
3.锚点链接：
- 在页面内找到所定位的某个位置
锚点链接使用：
- 在href属性的属性值设置为：“#名称”
例如：
<a href="#橘子"><h4>查看橘子图片</h4></a>
- 在目标位置标签添加一个：id属性=“名称”（上面#后的名称）
例如：
<a name="橘子"> <img src="./../picture/orange.jpg" alt="橘子图片加载失败" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx"> </a>
三、《水果图鉴》
1.任务目标
如果看懂了上面的内容，就可以来编写一个网页——使用锚点链接，跳转到相对应网页内图片相关位置
图片素材：
例：
2.代码示例
<!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="./../picture/orange.jpg" alt="橘子图片加载失败" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx"> <a name="苹果"> <p>这是苹果</p> </a> <img src="./../picture/apple.jpg" alt="苹果图片加载失败" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx"> <a name="香蕉"> <p>这是香蕉</p> </a> <img src="./../picture/banana.jpg" alt="香蕉图片加载失败" width="500rpx" height="500rpx" border="2rpx" hspace="100rpx"> </body> </html>
运行后跳转查看苹果图片结果：
