Day2-超链接

六、超级链接

6.1 基本写法

一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。

语法：

1           <a href="1.html">结婚照</a>

 

效果图：

 

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

 

href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

 

6.2 a标签的另外两个属性

title 悬停文本

 

1           <a href="09_img.html" title="很好看哦">结婚照</a>

 

 

target 是否在新窗口中打开

target实际上是“目标”的意思。

1           <a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>

blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_ ，就是规定，没啥好解释的。

也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。

完整的超级链接：

1           <a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

 

 

分清楚img和a标签的各自的属性：

1           <img src="1.jpg" />

2           <a href="1.html"></a>

6.3 页面内的锚点

页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。

锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

1           <a name="wdzp">我的作品</a>

2           或者：

3           <a id="wdzp">我的作品</a>

那么网址：

1           1.html#wdzp

就能够让这个锚点在页面最顶端显示，此时页面有卷动。

这样子，用户体验会好一点，用户可以直接看到页面的内容。

 

如果有一个超级链接，指向页面中的锚点，那么就是：

1           <a href="#wdzp">点击我就查看我的作品</a>

 

 

6.4 a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该：

p包裹a：

1           <p>

2                  <a href="">段落段落段落段落段落段落</a>

3           </p>

而不是a包裹p：

1           <a href="">

2                  <p>

3                         段落段落段落段落段落段落

4                  </p>

5           </a>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字