a标签

a标签作用

<a href="http://www.w3school.com.cn">W3School</a>

 

超链接

用于从一个页面链接到另一个页面，通过href 属性指定链接的目标。

当无href属性时，a标签只是普通文本，移上去光标是文本光标。有href属性时，可上焦点，移上去是默认的手势光标。

href值为#，点击会在本页地址上加上#，如http://localhost:63342/practice/test.html#

提示：

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

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

 

锚点

定位到本页面某个位置，比如点击导航让页面自动滚动到指定位置，如：电商网站的楼层。这就涉及到<a>标签的锚点应用，把它称为“锚点标签”。

锚点标签运用

1、两个a标签配合，根据a标签的name属性定位

<a href="#mao" target="_blank" rel="nofollow">点击此处到目标位置</a>
。。。。省略长篇内容
<a name="mao" target="_blank">目标位置</a>

2、a标签和其他标签配置，根据其他标签的id定位

<a href="#mao" target="_blank" rel="nofollow">点击此处到目标位置</a>
。。。。省略长篇内容
<div  id="mao">目标位置</div>

可以从一个页面链接到另一个页面的锚记位置，代码如下：

页面1
<a href="maodian2.html#other_page" target="_blank">另一个页面传送门</a>

 

页面2
<div id="other_page">这里是另一个页面的位置</div>

提示：

定位的锚点能居顶可能是因为后面还有内容，要是定位的锚点后面内容不足再滑一屏，定位的锚点是不会居顶的 

要想使它距离顶部一定距离

设置一个容器加margin或者paading——失效

给元素本身设置margin——失效

给元素本身设置padding——成功

a标签属性

 

a标签样式

 链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

提示：

 a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

a:active 必须被置于 a:hover 之后，才是有效的。

顺序巧记：lvha

其余样式杂记

text-decoration:none代 不显示下划线

改变鼠标一上去的样式，使用cursor属性，cursor取值：

 1   auto                     ：标准光标   
 2   default               ：标准箭头   
 3   hand                     ：手形光标   
 4   wait                     ：等待光标   
 5   text                     ：I形光标   
 6   vertical-text   ：水平I形光标   
 7   no-drop               ：不可拖动光标   
 8   not-allowed       ：无效光标   
 9   help                     ：?帮助光标   
10   all-scroll         ：三角方向标   
11   move                     ：移动标   
12   crosshair           ：十字标   
13   e-resize   
14   n-resize   
15   nw-resize   
16   w-resize   
17   s-resize   
18   se-resize   
19   sw-resize