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:nch@163.com?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等类型