Web前端——HTML中的超链接

最新推荐文章于 2024-05-22 16:22:12 发布

巧克力code

最新推荐文章于 2024-05-22 16:22:12 发布

阅读量3.5w

点赞数 24

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/qq_44853882/article/details/107109202

版权

Web前端专栏收录该内容

15 篇文章 5 订阅

订阅专栏

一.超链接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a>中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

1. 格式的写法

(1). href属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>

    <!-- 
        超链接可以让我们从一个页面跳转到其他页面，
            或者是当前页面的其他位置

        使用标签<a>来定义超链接
            属性：
                href指定跳转的目标路径
                    - 值可以是一个外部网站的地址
                    - 也可以写一个内部页面的地址
				
				当超链接href属性值为href="#" 表示链接到本页面

        超链接也是一个行内元素，在a标签中可以嵌套除他自身外的任何的元素
     -->
    
     <a href="https://www.baidu.com">超链接</a>
     <br><br>
     <a href="07.列表.html">超链接2</a>

     
</body>
</html>

结果：
在这里插入图片描述

(2). name属性

通过name属性来规定锚（anchor）的名称，锚可以用于创建HTML页面中的书签

通过name属性定义了三个超链接，name属性定义了三个锚点"anchor01"、“anchor02”、“anchor03”，这三个锚点相当于书签的作用

其中href属性值分别设定为"#anchor01"、"#anchor02"、"#anchor03"，分别链接到这三个锚点

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>超链接</title>
</head>

<body>
    
    <h3>HTML5 + CSS + JS --- HTML超链接&lt;a&gt;之name属性</h3><br>
    <!-- 添加文档主体内容 -->
    <ul>
        <li>
            <a href="#anchor01">anchor01</a>
        </li>
        <li>
            <a href="#anchor02">anchor02</a>
        </li>
        <li>
            <a href="#anchor03">anchor03</a>
        </li>
    </ul>
    <p>
        <a name="anchor01">锚点 - 01</a>
    </p>
    <br><br><br><br><br><br>
    <p>
        <a name="anchor02">锚点 - 02</a>
    </p>
    <br><br><br><br><br><br>
    <p>
        <a name="anchor03">锚点 - 03</a>
    </p>
    <br><br><br><br><br><br>
</body>

</html>

在这里插入图片描述

(3). target属性

指定超链接打开的位置和跳转到页面的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        target属性，用来指定超链接打开的位置
            可选值：
                _self 默认值 在当前页面中打开超链接
                _blank 在一个新的页面中打开超链接

     -->
    <a href="07.列表.html" target="_self">超链接1</a>
    <br><br>
    <a href="07.列表.html" target="_blank">超链接2</a>

    <!-- 
        可以使用 JavaScript:;来作为href的属性，此时点击这个超链接什么也不会发生
        相当于是超链接的路径展位符使用
     -->
     <br>
     <a href="javascript:;">这是一个新的超链接</a>
    

    <!-- 
        可以直接将超链接的href属性设置为#，这样点击超链接以后
            页面不会发生跳转，而是转到当前页面的顶部位置

        可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
        
        id属性（唯一不重复的）
            - 每一个标签都可以添加一个id属性
            - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
            - id属性可用于创建在一个HTML文档书签标记。
			提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的
     -->
     
    <br>
    <a href="#bottom">去底部</a>
    <br>
    <a id="bottom" href="#">回到顶部</a>

</body>
</html>

(4). id属性

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"(id=“tips”）"：

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

结果：
在这里插入图片描述

2. 电子邮件链接

电子邮件就是我们常说的E-mail，在HTML中为我们提供了一个mailto链接用于实现电子邮件的发送地址

在HTML中使用mailto链接，需要本机安装电子邮件客户端软件

(1). 发送邮件

mailto关键字用于定义电子邮件发送地址10000@qq.com

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>电子邮件链接</title>
</head>

<body>
    
    <h3>HTML5 + CSS + JS --- HTML超链接&lt;a&gt;之mailto链接</h3><br>
    <!-- 添加文档主体内容 -->
    <p>
        电子邮件发送及抄送地址:&nbsp;&nbsp;
        <a href="mailto:10000@qq.com">10000@qq.com</a> &nbsp;&nbsp;.<br><br>
        通过"mailto:example@emial.com"实现功能.<br><br>
    </p>

</body>

</html>

在这里插入图片描述

(3). 实现抄送功能

抄送，顾名思义就是把你所要发送的邮件copy一份，同时发给别的人，注明“抄送”字样，这是提示对方，他不是主送人，不用答复、批复。

但这样收件人是能够看出来你在发给他的同时还发给谁了。如果不想别人知道，可以选择“暗送”和“密送”，是指在发给收件人的同时，还悄悄地抄送给别的人，收件人是看不出来的。

mailto定义电子邮件发送地址，
？后的cc参数定义了抄送地址

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>电子邮件链接</title>
</head>

<body>
    
    <h3>HTML5 + CSS + JS --- HTML电子邮件之抄送地址</h3><br>
    <!-- 添加文档主体内容 -->
    <p>
        电子邮件发送及抄送地址:&nbsp;&nbsp;
        <a href="mailto:10000@qq.com?cc=10001@qq.com">10000@qq.com?cc=10001@qq.com</a>
        &nbsp;&nbsp;.<br><br>
        通过"mailto:example@emial.com?cc=@email.com"实现抄送功能.<br><br>
    </p>

</body>

</html>

在这里插入图片描述

(4). 实现电子邮件标题和正文

subject参数用于定义邮件标题
body参数用于定义邮件正文
各参数之间通过&字符连接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>电子邮件链接</title>
</head>

<body>
    
    <h3>HTML5 + CSS + JS --- HTML电子邮件之标题和正文</h3><br>
    <!-- 添加文档主体内容 -->
    <p>
        电子邮件标题与正文:&nbsp;&nbsp;
        <a href="mailto:10001@qq.com?cc=10002@qq.com &subject=Email%20Subject &body=Email%20Body%20Text.">
            <p>
                mailto:10000@qq.com?cc=10001@qq.com<br>
                &subject=Email%20Subject<br>
                &body=Email%20Body%20Text.
            </p>
        </a>
        &nbsp;&nbsp;<br>
        通过"subject"和"body"实现电子邮件标题和正文.<br><br>
    </p>

</body>

</html>

在这里插入图片描述

二 .连接路径

1. 相对路径

相对于当前文件的路径

html 相对路径的写法：

 ./		：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的

 ../	：代表文件所在的父级目录

 ../../	：代表文件所在的父级目录的父级目录

 /		：代表文件所在的根目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对路径</title>
</head>
<body>
    
    <!-- 
        当我们需要跳转一个服务器内部页面的时候，一般我们都会使用相对路径
            相对路径都会使用.或者..开头
                ./
                ../
            ./可以省略不写，如果不写./也不写../则就相当于写了./

            ./表示当前文件所在的目录
                - 在这里当前页面就是09.相对路径.html
                - ./就等于 09.相对路径.html所在的目录 
            
            ../表示当前文件所在目录的上一级目录
     -->
     <a href="./07.列表.html">超链接1</a>
     <br><br>
     <a href="../07.列表.html">超链接2</a>
     <br><br>
     <a href=".../target1.html">超链接3</a>

</body>
</html>

2. 绝对路径

文件的完整路径

例如：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

三. 超链接的类型

1. 根据目标端点的内容分类

(1). 内部链接

同一个网站内部，不同网页之间的链接关系

语法

<a href="file_url">源端点</a>

(2). 外部链接

跳转到当前网站外部

语法：

<a href="URL">源端点</a>

URL格式	服务	描述	默认端口号	服务基本作用
http://	www	进入万维网	80	超文本传输
mailto:	E-mail	启动邮件发送系统
ftp://	FTP	进入文件传输服务器	21	文件上传下载
telnet://	Telnet	启动远程登录方式	23	远程登录
news://	News	启动新闻讨论组
	SSH		22	安全的远程登录
	DNS		53	域名解析

(3). 书签链接

指的是目标端点为网页中的某个书签(锚点)的链接。

举例：网页的回到顶部

创建书签方式：

创建书签

语法：
```
<a id="书签名">[文字/图片]</a>
```

创建书签链接

语法：

链接到同一页面中的书签 称为内部书签链接
<a href="#书签名">源端点</a>

链接到其他页面中的书签，称为外部书签链接
<a href="file_url#书签名">源端点</a>

(4). 脚本链接

指的是使用脚本作为链接目标端点的链路。通过HTML语言完成不了的功能

基本语法

<a href="javascript:...">源端点</a>

(5). 文件下载链接

当链接的目标文档类型属于.doc、.rar、.cab、.zip、.exe等时
可以获得文件下载链接

要创建文件下载，只要在链接地址处输入文件路径即可，当用户单击链接后，浏览器会自动判断文件类型，作出不同情况的处理

语法：

<a href="file_url">链接内容</a>

2. 按照源端点的内容，又可将链接分类

(1). 文本链接

指的是源端点为文本的超链接

语法

<a href="file_url">文本</a>

(2). 图像链接

指的是源端点为图片文件的超链接

语法

<a href="file_url"><img src="img_url"...> </a>

四. 超链接与浮动框架

1. 在页面中嵌入浮动框架

浮动框架就像HTML页面中的其他对象一样，可以出现在页面的任何一个位置，但是与其对象不同的是浮动框架在页面中构建了一个区域，在这个区域中可以显示另一个HTML页面的内容，区域中显示的页面使用浮动框架的属性src来指定

基本语法

<iframe src="源文件地址"> </frame>

源文件地址指的是需要在浮动框架中显示的页面的地址，可以是绝对地址，也可以是相对地址

<!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>
    <p>
        浮动框架就像HTML页面中的其他对象一样，可以出现在页面的任何一个位置，
        但是与其对象不同的是浮动框架在页面中构建了一个区域，
        在这个区域中可以显示另一个HTML页面的内容，
        区域中显示的页面使用浮动框架的属性src来指定
    </p>

    <iframe src="http://www.baidu.com" frameborder="1"></iframe>
    <!-- 在此插入一个浮动窗口显示一个网站首页 -->
</body>
</html>

在这里插入图片描述

2. 对浮动框架的属性进行设置

设置浮动框架大小

基本语法

<iframe src="源文件地址" height="高度" width="宽度"> </frame>

设置浮动框架的边框

浮动框架边框的设置使用属性frameborder，可取值0或1

语法：

<iframe frameborder="0|1"> </frame>

浮动框架作为超链接目标

应用方法：首先需要给浮动框架命名，然后将框架名作为超链接的target的属性值

<!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>
    <div align="center">
        <iframe src="http://www.baidu.com" name="iframe" width="700" height="500" frameborder="0"></iframe>
    </div>

    <p align="center">
        <a href="http://www.sina.com" target="iframe">
            链接到新浪网：目标窗口为浮动窗口
        </a>       
    </p>

</body>
</html>

在这里插入图片描述

巧克力code

关注

24
点赞
踩
144

收藏

觉得还不错? 一键收藏
0
评论
Web前端——HTML中的超链接

1.超链接格式的写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接</title></head><body> <!-- 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置使用a标签来定义超链接
复制链接

扫一扫