4、超链接和路径

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

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

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

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

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

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

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

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

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

<code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"#1"</code><code>&gt;第一章&lt;/</code><code>a</code><code>&gt; &lt;</code><code>a</code> <code>href</code><code>=</code><code>"#2"</code><code>&gt;第二章&lt;/</code><code>a</code><code>&gt; &lt;</code><code>a</code> <code>href</code><code>=</code><code>"#3"</code><code>&gt;第三章&lt;/</code><code>a</code><code>&gt;</code>

<code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>&lt;</code><code>a</code> <code>name</code><code>=</code><code>"1"</code><code>&gt;这是第一张内容&lt;/</code><code>a</code><code>&gt; </code>

<code>&lt;</code><code>a</code> <code>name</code><code>=</code><code>"2"</code><code>&gt;这是第二章内容&lt;/</code><code>a</code><code>&gt; </code>

<code>&lt;</code><code>a</code> <code>id</code><code>=</code><code>"3"</code><code>&gt;这是第三章内容&lt;/</code><code>a</code><code>&gt;</code>

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

<a href="https://s5.51cto.com/wyfs02/M02/8D/91/wKioL1iicnPwwLpMAAAZiBQ0U_M542.png" target="_blank"></a>

<a href="https://s5.51cto.com/wyfs02/M00/8D/94/wKiom1iicnPReS9zAAAY3SHjyP4221.png" target="_blank"></a>

本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/1897537，如需转载请自行联系原作者