HTML 超链接笔记一

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dream_follower/article/details/81274094
1.创建超链接

语法如下:

<a href="链接路径">文本/图片</a>

链接的目标端点使用链接路径来表示,文本/图片为源端点
a标签常用属性:

属性 描述
href 必设属性。用于指定链接路径,用于设置超链接的目标端点
target 定义目标窗口
title 定义链接提示信息。当鼠标移到源端点时会弹出该提示信息

href属性值

属性值 描述
“” 在Chrome浏览器中跳转到当前页面的顶部
# 跳转到当前页面的顶部
javascript:…; 执行javascript后面指定的脚本
URL 跳转到指定页面

注意:“”和#都是跳转到页面顶部,但是含义不同,前者表示查询值,后者表示锚点

1.2设置目标链接窗口

可以通过设置target属性来设置目标窗口的打开方式,设置语法如下:

<a href="URL"   target="目标窗口名称">文本/图片</a>
属性值 描述
_blank 新开一个打开链接文档
_self 在同一个框架或同一窗口中打开链接文档(默认属性)
_parent 在上一级窗口中打开,一般在框架页面中经常使用
框架名称 在指定的浮动框架窗口中打开链接文档
1.3链接路径的设置
  • 相对路径
    以引用文件的网页所在的位置为参考基础建立起来的路径。而且两个文件之间的位置关系,只有三种:

    • 两文件在同一目录下
    • 链接文件在当前文件的某个下层目录中
    • 链接文件在当前文件的某个上层目录中

文件位置的路径表示符号

符号 含义
“.”或”./” 表示当前目录
“..”(两个点) 表示当前目录的父目录
“/” 进入下一层目录
“../” 代表上一层目录
  • 绝对路径
    绝对路径有两种展现形式,一种是网页的地址,另一种是目录在本地硬盘上的地址

2.使用base标签设置链接基准URL

设置语法如下:

<base href="URL" target="" />

说明:该标签是单标签,并且在文档中,最多只能出现一次,而且必须放到head标签内,它有href和target两个属性,使用时必须至少设置一个属性。taeget属性值和a标签的一样,并且它的属性会被每个链接中的target属性覆盖。

3.链接类型

根据目标端点的内容,可以将链接分为以下5种类型

  • 内部链接
  • 外部链接
  • 书签(锚点)链接
  • 脚本链接
  • 文件下载链接

按照源端点的内容,可将链接分为以下3种类型

  • 文本链接
  • 图像链接
  • 图像映
3.1内部链接

内部链接是指在同一个网站内部,不同网页之间的链接关系,基本语法如下:

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

**语法说明:**file_url表示链接文件的路径,使用相对路径

3.2外部链接

外部链接是指跳转到当前网站外部,和其他网站种的页面或其他元素之间的链接关系,设置语法如下:

<a href="URL">文本/图片</a>

语法说明:“URL”表示链接文件的路径,该路径需要使用以网址形式表示的绝对路径
常用URL格式如下表所示:

URL格式 描述
http:// 进入万维网
mailto: 启动邮件发送系统
ftp:// 进入文件传输服务器
telnet:// 启动远程登录方式
news:// 启动新闻讨论组

邮件链接设置基本语法如下:

<a href="mailto:邮址1?subject=content&&cc=邮址2&bcc=邮址3">文本/图片</a>

语法说明:邮址1代表收件人地址,subject属性用于设置邮件主题,cc属性用于设置抄送邮箱地址,bcc属性用于设置暗抄送邮箱地址,例如:

<a href="mailto:[email protected]?subject=咨询&&cc=tom.126.com">联系我们</a>
3.3书签(锚点)链接

a标签除了可以实现在页面之间的跳转,用户还可以实现在页面中进行位置之间的跳转,这样的链接称为书签链接或锚点链接。
创建书签链接包括以下两个步骤:
第一步创建书签
在HTML5中,直接使用id属性创建书签,即id属性值就是书签名。
第二步创建书签链接
创建语法如下:

  • 内部书签链接:链接到同一页面中的书签
    语法如下:
<a href="#书签名">源端点</a>
  • 外部书签链接(链接到其他页面中的书签)
    创建语法如下:
<a href="file_url#书签名">源端点</a>

语法说明:如果书签与书签链接在同一页面,则链接路径为#号加上书签名,如果书签和书签链接分处在不同的页面,则必须在#号前加上书签所在的页面路径。

3.4脚本链接

脚本链接,指的是使用脚本作链接目标端点的链接,基本设置语法如下:

<a href="javascript:...">文本/图片</a>

语法说明:在javascript后面编写的就是具体的脚本

3.5文件下载链接

用于创建文件下载,设置语法如下:

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

**语法说明:**file_url指定的文件的类型必须为.doc、.mp3等类型

猜你喜欢

转载自blog.csdn.net/dream_follower/article/details/81274094