HTML5网页中的链接

最新推荐文章于 2023-08-27 23:23:12 发布

而又何羡乎

最新推荐文章于 2023-08-27 23:23:12 发布

阅读量7.5k

点赞数 1

分类专栏： WEB前端学习文章标签： html5

本文链接：https://blog.csdn.net/qq_44285092/article/details/108621100

版权

WEB前端学习专栏收录该内容

12 篇文章 4 订阅

订阅专栏

1 网页超链接的概念

1.1 什么是网页超链接

指的是从一个网页向一个目标的链接关系，以特殊的编码的文本或者图形的形式来实现链接，点击该链接，会传送到某个位置，或者打开新的网站。网页中的链接，一般以蓝色字体，文字下有下换线，鼠标放在上面会出现小手的情况，单击即可跳转。如果访问过该链接，其文本则会变色(默认为紫色)。

1.2 超链接的URL

URL是Uniform Resource Locator的缩写，由以下四部分组成：协议、主机名、文件夹名和文件名，网页文件以.html或.htm为扩展名。

超文本传输协议	主机名	文件夹名	文件名
http://	www.webDesign.com/	pages/	computer.html

1.3 超链接的URL类型

绝对URL超链接：网络上站点的完整路径。
相对URL超链接：链接到其它网页的URL。
书签超链接：同一网页的超链接，又称为书签。

2 建立网页超链接

建立超链接所用的标记为(a(锚)：anchor)，超链接是网页中的灵魂，其中最重要的两个因素为网页元素(文字、图片)和超链接的目标地址。

<a herf=URl>网页元素</a>

2.1 创建超文本链接

herf属性(文档外的链接)：<a herf=URl>文档外链接文本</a>
name/id属性(文档内的链接)：<a name=“value”>文档内链接文本</a>与<a id=“value”>文档内链接文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本链接</title>
</head>
<body>
友情链接----
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.163.com">网易</a>
</body>
</html>

注：链接前超文本传输协议不可省略，若没有添加，则默认为当前网页所在目录。

2.2 创建图片链接

浏览网页时，当鼠标移至图片上，鼠标指针变为手形时，单击会打开一个网页，即为图像链接。使用格式如下：

<a herf="链接目标"><img src="图片"></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像链接</title>
</head>
<body>
音乐无限
<a href="mp3.html"><img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=05d233d2d258ccbf1be9bd3c29e89006/9213b07eca806538badb3e7394dda144ad348299.jpg" width=5%></a>
<br>
<br>
<br>
哈哈哈
<a href="3.html"><img src="https://tse2-mm.cn.bing.net/th/id/OIP.S-JIvxFRXS5JN8tHjNvI_wHaHd?pid=Api&rs=1"></a>
</body>
</html>

2.3 创建下载链接

链接目标为各种类型的文件，若文件能被浏览器识别则会显示，否则会弹出下载框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下载链接</title>
</head>
<body>
<p><a href="1HTML简介.md">md文档</a> </p>
</body>
</html>

2.4 使用相对路径和绝对路径

绝对URL一般访问的是非同一台服务器上的资源，相对路径则是访问同一台服务器上的文件夹或不同文件夹的资源。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对与绝对路径链接</title>
</head>
<body>
单击<a href="https://www.fabiaoqing.com/">绝对URL</a>链接到表情包网站首页<br>
单击<a href="1HTML简介.md">相同文件夹的URL</a>链接到md文件<br>
单击<a href="../WebGIS/百度地图.html">不同文件夹的URl</a>链接到不同文件夹的URL
</body>
</html>

2.5 设置新窗口显示超链接页面

默认情况下，单击超链接会在当前窗口显示，替换到当前页面的内容。若想以新窗口打开连接则需要使用target属性，用法如下：

<a target="value"></a>

value的参数及说明如下：

参数	说明
_blank	浏览器总在一个新打开，未命名的窗口载入文档
_self	载入并显示在相同框架或者窗口作为源文档，与默认相同打开百度。
_top	清除所有包含的框架并将文档整个载入浏览器窗口
_parent	载入父窗口或者包含在超链接应用的框架的框架集。若在窗口和顶级框架中，作用同_self

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置新窗口显示链接页面</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">新窗口打开百度</a><br>
<a href="http://www.baidu.com" target="_parent">载入父窗口或者包含在超链接应用的框架的框架集。若在窗口和顶级框架中，作用同_self</a><br>
<a href="http://www.baidu.com" target="_self">载入并显示在相同框架或者窗口作为源文档，与默认相同打开百度。</a><br>
<a href="http://www.baidu.com" target="_top">清除所有包含的框架并将文档整个载入浏览器窗口</a><br>
</body>
</html>

2.6 设置电子邮件地址

使用格式：<a href=“mailto:电子邮件地址”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子邮件链接</title>
</head>
<body>
<img src="http://wx3.sinaimg.cn/large/bf976b12gy1gibjy1t86ng207s06waad.gif" width="119" height="49">【免费注册】【登录】
<a href="mailto:kfdzsj@126.com">邮箱</a>
</body>
</html>

3 浮动框架iframe的使用

可以自由控制窗口的大小，配合表格随意在网页中任何位置插入窗口，即在窗口中在窗一个窗口。使用格式如下：

<iframe src="链接对象">

其链接对象可以是绝对路径也可以是相对路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动架构</title>

    <style>
        iframe{
            width:1200px; /*宽度*/
            height:600px; /*高度*/
            border:none;  /*无边框*/
        }
    </style>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>

4 精确定位热点区域

当点击一张图片的不同区域时，会显示不同的链接内容，这就是图片的热点区域。即通过将图片划分为若干个链接区域，访问者点击不同的区域会链接到不同的目标页面。热点区域类型有矩形、圆形和多边形。新建热点区域用和，其使用格式如下：

<img src="图片地址" usemap="#名称">
<map id="名称">
    <area shape="rect" coords="10,10,100,100" herf="#">
    <area shape="circle" coords="120,120,50" herf="#">
    <area shape="poly" coords="120,120,50,20,30,30,30,40" herf="#">
</map>

建立热点区域时，必须先插入图片，且必须添加usemap属性，其属性值以#开头，如#pic。
map属性只有一个属性id，其作用是为区域命名，其设置值必须与usemap的属性值相同。
area标记主要是定义热点区域的形状及超链接，他有3个必须的属性。

area属性	值	说明
shape	rect（矩形）、circle（圆）、poly（多边形）	控件划分区域的形状
coords	rect(矩形的左上角和右下角x与y的坐标)、circle(圆形的圆形坐标点x与y和半截子)、ploy(各个点x与y的坐标)	控制划分坐标
herf	URL（超链接目标）	为区域设置超链接，当设置为#时，表示为空链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置热点区域</title>
</head>
<body>
<img src="http://img.51miz.com/Element/00/22/59/18/0c933276_E225918_60ee8865.png%21
/quality/90/unsharp/true/compress/true/format/png" width="1200" height="800" border="2" usemap="#map">
<map name="map">
    <area shape="rect" coords="200,200,400,400" href="http://www.baidu.com">
    <area shape="circle" coords="500,500,100" href="设置新窗口显示链接页面.html">
    <area shape="poly" coords="600,600,700,1000,600,800,700,800" href="https://www.zhihu.com/question/21949948">
</map>
</body>
</html>

5 用锚制作电子阅读器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子书阅读器</title>
</head>
<body>
<h1>文学鉴赏</h1>
<ul>
    <li><a href="#第一篇">再别康桥</a> </li>
    <li><a href="#第二篇">雨&emsp;&emsp;巷</a> </li>
    <li><a href="#第三篇">荷塘月色</a> </li>
</ul>
<h3><a name="第一篇">再别康桥</a> </h3>
hhh
<ul>
    <li>轻轻地我走了，</li>
    <li>正如我轻轻地来。</li>
</ul>
<h3><a name="第二篇">雨&emsp;&emsp;巷</a> </h3>
<ul>
    <li>轻轻地我走了，</li>
    <li>正如我轻轻地来。</li>
</ul>
<h3><a name="第三篇">荷塘月色</a> </h3>
<ul>
    <li>轻轻地我走了，</li>
    <li>正如我轻轻地来。</li>
    <li>轻轻地我走了，</li>
    <li>正如我轻轻地来。</li>
</ul>
</body>
</html>