Web前端——HTML中的超链接

技术2023-11-21 84

一.超链接

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="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超链接<a>之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>  <a href="07.列表.html" target="_self">超链接1</a> <br><br> <a href="07.列表.html" target="_blank">超链接2</a>  <br> <a href="javascript:;">这是一个新的超链接</a>  <br> <a href="#bottom">去底部</a> <br> <a id="bottom" href="#">回到顶部</a> </body> </html>

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超链接<a>之mailto链接</h3><br>  <p> 电子邮件发送及抄送地址:   <a href="mailto:10000@qq.com">10000@qq.com</a>   .<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> 电子邮件发送及抄送地址:   <a href="mailto:10000@qq.com?cc=10001@qq.com">10000@qq.com?cc=10001@qq.com</a>   .<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> 电子邮件标题与正文:   <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>   <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>  <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. 绝对路径

文件的完整路径

例如：

三. 超链接的类型

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

(1). 内部链接

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

语法

(2). 外部链接

跳转到当前网站外部

语法：

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

(3). 书签链接

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

举例：网页的回到顶部

创建书签方式：

创建书签

语法：

创建书签链接

语法：

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

(4). 脚本链接

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

基本语法

(5). 文件下载链接

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

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

语法：

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

(1). 文本链接

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

语法

(2). 图像链接

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

语法

四. 超链接与浮动框架

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

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

基本语法

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

设置浮动框架大小

基本语法

设置浮动框架的边框

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

语法：

浮动框架作为超链接目标

应用方法：首先需要给浮动框架命名，然后将框架名作为超链接的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>

Processed: 0.023, SQL: 9