HTML13_有语义的标签2_a标签（超链接，锚点，伪类）

5.关于超链接（W3chool a标签用法介绍：http://www.w3school.com.cn/tags/tag_a.asp）

　　（1）所有浏览器都支持 <a> 标签。

　　（2）在html4.01 与 html5.0之间的差异：

　　　　在 HTML 4.01 中，<a> 标签可以是超链接或锚；

　　　　在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。

　　3）注意的点：

　　　　1. 如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性；

　　　　2. 被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）；

　　　　3. 最好是使用 CSS 来设置链接的样式；

　　　　4. 一般来说，如果不确定其链接，写在页面里面的时候都是这样子的： <a href="#">一些文字</a>

　　（4）禁止 a 标签的跳转：

　　　　方法一（亲测有效）： <a href="javascript:void(0);">一些文字</a>

　　　　方法二（没试哇，暗暗觉得应该有用的）： e.preventDefault();

　　（5）基本用法： <a href="url">页面上的链接文字提示</a> 其中url 可以是本地的html文件，也可以是网页。

　　进阶用法： <a href="url" target="_blank" title="xxx">页面上的链接文字提示</a>

target = "_blank" 那部分意思是在一个新窗口打开链接；title的部分是，把鼠标放在链接提示文字上面时，会出现“xxx”的提示文字，如例2所示。

　　如下例1所示，“http”千万不可以省略。

例1

效果如下，其中link5是没有办法连接到百度的，出现报错（因为在当前的目录下，找不到baidu）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>链接练习</title>
 6 </head>
 7 <body>
 8     <a href="http://wwww.baidu.com/" target="_blank" title="百度首页">百度1ink 1</a>   <!完整的表示->
 9     <a href="http:www.baidu.com/">百度link 2</a>      <!去掉"//"->
10 </body>
11 </html>

例2

title的提示文字“百度首页”，注：在鼠标放在“百度link1”文字上时才会显示。

新窗口打开效果：

6.锚点

　　语法： <a name="xx"></a>

通过name后面的内容，对页面的某处做标记，利用锚点对标记处做链接，如下例所示，若页面过长，不方便浏览时，可以通过锚点建立链接。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>链接练习</title>
 6 </head>
 7 <body>
 8     <a href="link.html#锚点1">锚点1链接</a>  
 9     <a href="link.html#锚点2">锚点2链接</a>  
10     <a href="link.html#锚点3">锚点3链接</a>  
11 
12     <a name="锚点1"></a>
13     <p>锚点1</p>
14     </br>
15     </br>
16     </br>
17     </br>
18     </br>
19     </br>
20     </br>
21     </br>
22     </br>
23     <a name="锚点2"></a>
24     <p>锚点2</p>
25     </br>
26     </br>
27     </br>
28     </br>
29     </br>
30     </br>
31     </br>
32     </br>
33     <a name="锚点3"></a>
34     <p>锚点3</p>
35     </br>
36     </br>
37     </br>
38     </br>
39     </br>
40     </br>
41     </br>
42     </br>
43     </br>
44     </br>
45     </br>
46     </br>
47     </br>
48     </br>
49     </br>
50     </br>
51     </br>
52 </body>
53 </html>

例3

当点击链接文字时，页面会自动跳到相应锚点处

7.伪类

　　CSS允许对a标签的4种状态进行设置各自的CSS特性，叫做CSS的伪类;

四种状态(必须按照顺序写LVHA)：一般的链接(link,这个link可以省略不写)，点击后的链接(visited)，鼠标放上去未点(hover)，鼠标点下去还没放开(active,一般不太用)

例子会在后续的网页实际制作中体现~