超链接标签与热点地图的应用-CSDN博客

本文链接：https://blog.csdn.net/Thefallscold/article/details/149529887

超链接标签

普通链接

基础语法：<a href="链接地址" target="blank | self" title="描述">文本或图片</ a>

href：连接路径

target：标的意思，跳转后的网站是否在新标签页打开；

blank新窗口跳转， self当前窗口跳转

title：鼠标悬浮显示文字

几种比较特殊的超链接

空链接 <a href="##"></a >

返回页面顶部 <a href="#"></a>

保持原位置 <a href=“javascript:; ></a >

脚本链接 <a href="javscript:alert('hello world')"></a>

电子邮件链接 <a href="mailto:邮箱地址"></a>

拨打电话 <a href="tel:电话号码"></a>

注意： a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

相对路径

相对路径是相对于当前 HTML 文件的位置，它不依赖于固定的根目录，而是基于当前文件的所在位置来寻找目标文件

相对路径主要有以下几种：

同级目录（Same Directory）
子目录（Subdirectory）
父目录（Parent Directory）
根目录（Root Directory，相对）

案例1:同级目录

<img src="logo.png" alt="Logo"> <a href="about.html">关于我们</a>

说明：文件 logo.png 和 about.html 与当前 HTML 文件位于同一目录

案例2:子目录

<img src="images/logo.png" alt="Logo"> 
<a href="pages/about.html">关于我们</a>

说明：images/logo.png 表示 logo.png 位于 images 文件夹下。
适用场景：将资源文件分类管理，如 images、css、js 目录。

返回上一级目录（`../`）

<img src="../logo.png" alt="Logo"> <a href="../index.html">返回首页</a>

说明：../ 表示回到上一级目录，然后再寻找目标文件。
适用场景：在子目录中的 HTML 文件需要引用上一级目录的资源。

返回多级目录

<img src="../../images/logo.png" alt="Logo">

说明：../../ 表示返回两级目录，然后进入 images 目录。
适用场景：在多层嵌套的文件结构中引用公共资源。

根目录（`/`，站点相对路径）

<img src="/images/logo.png" alt="Logo"> <a href="/contact.html">联系我们</a>

说明：/images/logo.png 是相对于网站根目录的路径。
适用场景：适用于服务器部署的网站，确保路径固定，但在本地打开时可能无法访问。

绝对路径

绝对路径是从根目录（Root Directory）开始的完整路径。它不依赖于当前文件的位置，始终指向同一个资源。

绝对路径有两种：

URL 绝对路径（基于网站的完整 URL）
本地绝对路径（基于磁盘的完整路径）

URL 绝对路径

<img src="https://www.example.com/images/logo.png" alt="网站 Logo"> 
<a href="https://www.example.com/contact.html">联系我们</a>

特点：使用完整的网址（包含 http:// 或 https://）。
适用场景：引用外部资源，如CDN、远程图片、第三方 API。

本地文件的绝对路径

<img src="/var/www/html/images/logo.png" alt="网站 Logo">

特点：从根目录 / 开始的完整文件路径。
适用场景：服务器上的本地文件，但不推荐使用，因为在不同环境中（如本地和服务器），路径可能不同。

优缺点

✅优点：

资源位置固定，不受当前页面位置影响。
适用于跨网站引用资源（如 CDN、API）。

❌ 缺点：

网址过长，不便于维护。
如果网站域名改变，所有路径都需要修改。
可能会增加外部资源的加载时间。

URL的组成

协议://主机:端口号/文件/附加资源

http://www.yunhedata.com.cn/info.html?uname=tina&age=20&sex=female

锚点链接

使用 name 属性创建 HTML 页面中的锚点
当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
步骤
- 创建锚点 <a name="锚点名称"></ a>
- 链接到锚点同一页面 : < a href="#锚点名称"></a> 不同页面 : <a href="目标文档URL# 锚点名称">< /a>

案例：唯品会锚点链接https://www.vip.com/

基础格式

<img src='./imgs/banner.png' title='图片标题' width="300" height="300" border="1"/>

基础语法：

src：source的缩写，来源，表示图⽚的来源、路径，必须的属性

alt：图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片

width：图片宽度

height：图片高度

border：图片边框

设计网页时经常使用的图片有三种格式：

GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG | JPG-- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.256_256_256
PNG | PNEG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画
SVG 是一种基于 XML（可扩展标记语言）的矢量图形格式。图形在放大或缩小后不会出现失真的情况，能够始终保持清晰的图像质量。

热点地图的用法

热点地图（Image Map）允许在图片上定义可点击区域，每个区域可以链接到不同URL。通过<map>和<area>标签实现，需配合<img>的usemap属性关联。

实现步骤

1. 定义图片和映射关系
在<img>标签中通过usemap属性关联地图名称，名称前需加#：

<img src="example.jpg" alt="示例图片" usemap="#imageMap">

2. 创建<map>和<area>
<map>的name属性需与usemap的值一致。<area>定义热点形状（shape）、坐标（coords）和链接（href）：

<map name="imageMap">
  <area shape="rect" coords="x1,y1,x2,y2" href="page1.html" alt="区域1">
  <area shape="circle" coords="x,y,radius" href="page2.html" alt="区域2">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="page3.html" alt="区域3">
</map>

坐标说明

矩形（rect）：x1,y1为左上角，x2,y2为右下角。
圆形（circle）：x,y为圆心，radius为半径。
多边形（poly）：按顺序列出所有顶点坐标。

以下为area的语法属性：

以下面图片举例：

以图片中最高处中间坐着的青蛙为例想要点击它跳转到指定网址可以这么写：

 <img src="./img/qingwa.jpg" alt="" usemap="#qingwa">
    <map name="qingwa" id="qingwa">
        <area shape="rect" coords="440,58,500,230" href="https://pixabay.com/zh/photos/frogs-lots-frog-gathering-cute-1371297/" alt="">
    </map>

选择位置时可以同window自带的画图工具查看坐标（如下图左下角）

示例代码

完整的热点地图实现

<img src="worldmap.png" alt="世界地图" usemap="#worldMap">
<map name="worldMap">
  <area shape="rect" coords="100,50,200,150" href="europe.html" alt="欧洲">
  <area shape="circle" coords="300,200,50" href="asia.html" alt="亚洲">
  <area shape="poly" coords="400,100,450,150,400,200" href="africa.html" alt="非洲">
</map>