HTML基础学习（2）——超链接和使用图像_web前端技术超链接和图像教案-优快云博客

本文是HTML基础学习的第二部分，主要讲解超链接和图像的使用。超链接涉及URL、<a>标签、锚点及其应用，图像标签<img>的属性包括alt、src、height、width等，并介绍了图像热区链接的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

往期文章

HTML基础学习（1）——HTML基础标签

1. 超链接

点击超链接可以跳转到新的网页或当前网页某部分，HTML文档中的任何文字和图像都可以被设置为超链接。

超链接包括：外部链接、电子邮件链接、锚点链接、空链接、脚本链接。

1.1 路径概念（URL）

每个网页都有唯一的地址，称为统一资源定位符（url）,也就是网页的绝对路径。绝对路径是包括服务器规范在内的完全路径。
在网页中创建内部链接时候，一般会指定一个相对路径。

URL的写法上级目录：…/表示源文件所在目录的上一级目录，…/…/表示源文件所在目录的上两级目录，以此类推。

下级目录：引用下级目录的文件，直接写下级目录文件的路径即可。

同级目录：./表示文件当前所在的目录。在书写路径的时候，开头的./可以省略掉。

注意:
绝对路径的斜线“\”和相对路径的斜线“/”方向不同，书写的时候应该特别注意。

1.2 <a>标签

//语法
<a href="url"> 可以填充的文字在这里 </a>

<a>标签的常用属性见下表：

属性	值	描述
href	url	规定链接指向的网址，可以是任何有效文档的相对或绝对路径
rel	text	规定当前文档与被链接文档之间的关系
target	_blank _parent _self _top framename	规定在何处打开链接文档
type	MIME type	链接文档的MIME类型
download	filename	下载的超链接目标
hreflang	language_code	被链接文档的语言
media	media_query	规定被链接文档是为何种媒介/设备优化的

1.3 锚点

在同一个网页中创建指向该锚点的链接:

//语法
<a href="#锚点的名称">有用的提示</a>

在其他网页中创建指向该锚点的链接：

//语法
<a href="锚点所在网页的路径#锚点的名称">有用的提示</a>

1.3.1 锚点的使用

copy下来看效果

 <!-- 链接到同一网页中的锚点 -->
    <a href="#p6">书签：第6小节</a>
    <h3>第1小节</h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>
    <h3>第2小节</h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>
    <h3>第3小节</h3>
    <p>
        荒芜，还能再生！<br>
        淡淡的明悟，自林动的心中流淌而开，而后便是有着强者感觉到，下方大地那狂暴的能量突然间变得温和起来，再接着，他们便是见到，枯黄的大地，突然有着点点碧绿之sè浮现出来，那是细小的嫩芽，嫩芽以一种惊入的速度长大，最后化为青草覆盖。
        短短十数息的时间，这片大沙漠，竞然便是变成了一望无际的大草原，一种盎然的生机，弥漫而开。<br>
        “将你们白勺力量，再借给我吧。”<br>
        林动低头望着下方那看不见尽头的大草原，轻声自语，而后只见得那草原，再度开始变得荒芜，可怕的力量，与之前林动所汲取的那股恐怖能量，开始汇聚。<br>
    </p>
    <br>
    <h3>第4小节</h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>
    <h3>第5小节</h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>
    <h3><a href="" name="p6">第6小节</a></h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>

1.4. 常见链接实例

    <!-- 链接到外部网址 -->
    <a href="https://www.baidu.com">百度</a> <br><br>

    <!-- 链接到e-mail -->
    <a href="mailto:852333743@qq.com" target="_top">发送邮件</a> <br><br>

    <!-- 链接到FTP -->
    <a href="ftp://IP地址或域名">XXXX</a> <br><br>

    <!-- 链接到Telnet -->
    <a href="telnet://服务器IP地址或域名">链接的文字</a><br><br>

    <!-- 链接到下载文件 -->
    <a href="img/liu.gif" download="liu">下载图片</a><br>

2. 图像标签<img>

2.1 基础使用

<img>标签的必需属性：

alt:规定图像的替代文本
src:规定显示图像的URL

//语法
<img src="图像地址" alt="替代文本">

//示例
<img src="img/img_0.jpg" alt="567">

2.2 <img>标签可选属性

height：定义图像的高度
width：定义图像的宽度
ismap：将图像定义为服务器端的图像映射
usemap：将图像定义为客户器端图像映射
longdesc：指向包含长的图像描述文档的URL

2.3 图像热区链接

HTML中可以把图像划分多个热点区域，每一个热区链接到不同的网页。


<img src="图像地址" alt="" usemap ="映射图像名称">
<map name="映射图像名称">
    <area shape="热区形状" coords="热区坐标" href="链接地址">
</map>

代码示例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
	<!-- 固定宽度的img -->
    <a href="https://www.baidu.com">
        <img src="img/img_0.jpg" alt="567" width="100px">
    </a>
    <hr>
    <!-- 热区示例 -->
    <img src="img/night_star.jpg" alt="星空大地" usemap="#map" width="800px" height="600px">
    <map name="#map">
        <area shape="rect" coords="0,0,800,300" href="star.html">
        <area shape="rect" coords="0,300,800,600" href="land.html">
    </map>
</body>

</html>