一、图像标签
在HTML中，用<img>标签在网页中添加图像，图像以嵌入的方式添加到网页中图像标签的格式为：<img scr="图像文件名" alt="替代文字 " title="鼠标悬停提示文字 " width="图像宽度 " height="图像高度 " border="边框宽度 " hspace="水平空白 " vspace="垂直空白 " align="环绕方式或对齐方式 " />
标签中的属性说明见表，其中scr是必要的属性
| 属性 | 说明 |
| src | 图像来源，即图像的URL路径 |
| alt | 如果图像无法显示，则用文字代替 |
| title | 提供额外的提示，方便用户的使用 |
| width | 图像的显示宽度（像素数或百分数），通常设图像的真实大小以免是真 |
| height | 图像的显示高度（像素数或百分数） |
| border | 图片的边框大小，默认情况下图片没有边框，即border=0 |
| hespace | 图片左侧或右侧的空白像素数（水平边距） |
| vspace | 图片顶部或底部的空白像素数（垂直边距） |
| align | 图像在水平（环绕方式）或垂直方向（对齐方式），包括left（图像居左）、righe（图像居右）、top（文本与图像在顶部对齐）、middle（文本与图像在中央对齐）或bottom（文本与图像在底部对齐） |
2、图像标签的例题
题目：在HTML中导入一个星空的图片
解答：首先需要构建好html的基本框架，这里运用快捷方式，输入“！”，接着在<body></body>中运用图像标签<img>就可以了，其中要在scr中输入图像的URL路径，接下来图像的位置、大小、提示等根据常用属性操作即可。
示例代码：
<p>星空图片</p>
<img src="https://img95.699pic.com/photo/40248/3133.jpg_wh860.jpg" alt="图片加载失败" width="200" height="200">运行结果：
二、超链接
1、超链接的定义
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页的不同位置，还可以是一个图片、一个电子邮件地址、一个文件甚至是一个应用。
2、路径
创建超链接时必须了解链接与被链接对象的路径，在网站中路径通常有3种表达方式：绝对路径（它包括通信协议名、服务器名、路径及文件名的完全路径）、根目录相对路径（它指本地站点文件夹（根目录），以“/”开头，路径是从当前站点的根目录开始算的）、文档目录相对路径（以当前文档所在的文件夹为基础开始寻找路径）。
3、创建超链接
在HTML中可以通过<a>标签创建超链接，其中<a>标签有2种使用方式：
①通过使用href属性创建指向另一个文档的超链接；
②通过使用name属性创建文档内的书签。
超链接的语法格式为：<a href="url" title="指向链接时显示的文字" target="窗口名称">热点文本</a>
注：href属性定义了这个链接所指的路径，如果一个链接不到其他位置的空超链接，可以用符号“#”代替URL
4、超链接的例题
题目：创建一个直接到百度网页的超链接
解答：跟图像标签一样，首先需要构建好html的基本框架，这里运用快捷方式，输入“！”，接着在<body></body>中运用超链接标签<a>就可以了，其中要在href输入超链接的路径
示例代码：
<p>跳转到百度的超链接</p>
<a href="https://www.baidu.com/">点击跳转百度</a>运行结果： 
5、书签链接
书签链接常用于内容庞大复杂的网页，通过单击书签链接能指向页面里的特定段落，便于浏览者快速查看网页内容。
书签就是用<a>标签对网页元素做的一个记号，锚点与链接可以在同一页面，也可以在不同页面。在实现锚点链接之前，需要先创建锚点，格式为
<a name="记号名（锚点名称）"锚（显示在页面中的文本）</a>
三、实践例题——《水果图鉴》
题目：创建一个水果书签链接（页面内书签的链接）
解答：首先需要构建好html的基本框架，这里运用快捷方式，输入“！”，接着在<body></body>中运用超链接的标签<a>，然后在href创建锚点“这是某种水果”，再然后输入热点文本：查看某某水果，最后点击“查看某某水果”，将跳转到“记号名”开始的网页元素。
为了更好的浏览，热点文本中将加入图片，这需要加入图像标签，图像标签的使用方法在最开头那里。
示例代码：
<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" width="480rpx" height="500rpx">
<br>
<a name="这是苹果图片">
<p>这是苹果</p>
</a>
<img src="./水果图鉴/图片/apple.jpg" width="480rpx" height="500rpx">
<br>
<a name="这是香蕉图片">
<p>这是香蕉</p>
</a>
<br>
<img src="./水果图鉴/图片/banana.jpg" width="480rpx" height="500rpx">
运行结果：
四、总结
本篇文章主要介绍图像标签与超链接的基本使用方法，外加网页内的书签链接的例题，文献参考Web前端开发技术。
