博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
4、超链接和路径
阅读量:5963 次
发布时间:2019-06-19

本文共 3048 字,大约阅读时间需要 10 分钟。

<a>元素术语文本元素,有一些私有属性或者叫做局部属性。那么,相对应的还有通用属性,或者叫全局属性。

href:指定<a>元素所指资源的URL

hreflang:指向的链接资源所使用的语言

media:说明所链接资源用于哪种设备

rel:说明文档与所链接资源的关系类型

target:执行用以打开所链接资源的浏览环境

type:说明所链接资源的MIME类型(比如text/html)

这这几个属性当中,只有href和target一般比较常用。href是必须的。

href属性

<a href="

解释:href是必须属性,否则<a>元素就变成空元素了。如果属性值是“http://”开头的,意味着点击跳转到指定的外部链接

target属性:

<a href="http://www.baidu.com" target="_blank">百度</a>

解释:target属性告诉浏览器希望将所链接的资源显示在哪里。如果不写,默认是_self,在当前窗口打开超链接

相对路径和绝对路径

所谓相对路径,就是相对于链接页面而言的另一个页面的路径。而绝对路径,就是直接从

file://磁盘开始的完整路径。我们在同一个目录下做上两个页面,其中一个页面链接到另一个页面。

1、绝对路径

<a href="file:Users/cengchengpeng/Documents/html_test/index.html">index</a>

解释:首先是file:///开头,然后是路径。

2、相对路径

<a href="index.html">index.html</a>

解释:相对路径的条件是必须文件都在同一个目录中或磁盘中。如果是在同一个主目录中,中间有多个子目录层次,则需要使用目录结构语法

3、目录语法

同一个目录:index2.html或者./index2.html

在子目录中:xxx/index2.html

在父目录中:../xxx/index2.html

锚点设置

超链接也可以将同一个文档中的另一个元素移入视野,通过属性id或者name实现锚点定位。

//链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<
a 
href
=
"#1"
>第一章</
a
> <
a 
href
=
"#2"
>第二章</
a
> <
a 
href
=
"#3"
>第三章</
a
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
a 
name
=
"1"
>这是第一张内容</
a
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
a 
name
=
"2"
>这是第二章内容</
a
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
a 
id
=
"3"
>这是第三章内容</
a
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>
<
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
><
br
>

当在页面上点击“第一章”时,页面会自动跳转到“这是第一章内容”这里。

本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1897537,如需转载请自行联系原作者
你可能感兴趣的文章
Qt中使用QToolBox实现抽屉效果
查看>>
双活数据中心建设之光大实践
查看>>
张晓辉:大众点评的分布式架构是怎样炼成的
查看>>
张军-大数据的理解与分布式进化计算方法
查看>>
spring基础
查看>>
微信用户名乱码问题
查看>>
dubbo remoting(2)
查看>>
maya pyside 多个窗口实例 报错 解决
查看>>
关于文件上传请求第一次为post,后面为get的问题
查看>>
【Qt笔记】QDialog--模态和非模态
查看>>
nginx 0.8.54/1.0.0 在cygwin环境下的编译(包括 nginx_mod_h264
查看>>
PowerDesigner生成Excel版本的数据库文件
查看>>
Oracle 查找常见耗性能的语句
查看>>
java 通过反射获取调用类方法及属性
查看>>
thinkphp 开启页面的Trace信息
查看>>
mysql 链接数满了的错误 ERROR 1040 (HY000): Too many connections
查看>>
android textview字体加下划线
查看>>
springMVC 定时任务
查看>>
Mint8(ubuntu16.04) 搭建微信Web开发工具
查看>>
PostgreSQL数据类型-数据类型简介和布尔类型
查看>>