目录

1、什么是 标签

2、 标签的重要属性

href ------规定链接指向的页面的 URL。

 target ----- 指定链接页面的打开方式。

name ------定义锚的名称。（Html5不支持）

3、 标签的常用协议

4、超链接标签的样式问题——a标签的伪类选择器的书写顺序

4.1 标签的多重状态

4.2 链接（a标签状态）定义的顺序   

5、关于图形映射：

other：

a标签的某个功能：协议限定符：（小小的黑客功能）


1、什么是 <a> 标签

　　<a> 标签定义超链接，用于从一个页面链接到另一个页面。

2、<a> 标签的重要属性

href ------规定链接指向的页面的 URL。

链接分类:
①外部链接，记得加上http://

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



②内部链接:网站内部页面之间的相互链接。
直接链接内部页面名称即可,例如

< a href="index.html">首页</a >。



③空链接:如果当时没有确定链接目标时。

<a href="#">首页</a>。



④下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

<a href="xiazai.zip">下载文件</a>



⑤网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接:点我们点击链接，可以快速定位到页面中的某个位置。

⑥锚点链接:点我们点击链接，可以快速定位到页面中的某个位置。

  • 在链接文本的href属性中,设置属性值为#名字的形式,
如<a href= " #two"> 52集 </a>
  • 找到目标位置标签,里面添加一个id属性=刚才的名字，
如: <h3 id= "two"> 第52集介绍 </h3>

href: 用于指定链接目标的url地址， (必须属性) 当为标签应用href属性时， 它就具有了超链接的功能。

HTML5float标签_超链接

说明：href 属性是用来指向你点击需要访问链接的地址，后面的写的”百度一下“是来告诉用户的
即：
点击之后就会自动跳转href后面所写的地址。

HTML5float标签_html_02

注意：不一定非要点击所写的文字进行访问链接，可以是图片，下面展示

<body>
    
        <a href="https://www.baidu.com/"  style="width: 100px; height: 100px; background-color: chartreuse; display: block;">    </a>

</body>

改成上面的代码之后，就会出现一个块元素，点击块元素就能够跳转网址

HTML5float标签_html_03

display一般设置为block 或者inline 或者是none，首先你应该理解元素默认是内联还是块，如：a标签为内联元素，但是有时为了让他变成块元素，就要使用display：block来转变了！

<body>
    
        <a href="https://www.baidu.com/" >  
        
                <img src="images/dilireba.jpg">

        </a>

</body>

将代码改写成上面的代码，就可以通过图片就行访问地址链接了：

HTML5float标签_前端_04

 target ----- 指定链接页面的打开方式。

_top 跳出框架打开网页。

_parent 在父窗口打开网页。

_ framename 在指定的框架中打开网页。

_self为默认值当前页面打开。

_blank为在新窗口中打开方式。

name ------定义锚的名称。（Html5不支持）

锚——（定在某个点上）

关于name和id

id和name都可以与href结合起来使用，同理name的值在同一文档必须是唯一的

a标签中还有一个title属性，和img中的提title一样，都是用来控制鼠标悬停显示的提示文本。
 

3、<a> 标签的常用协议

        ① file协议（文件协议）

        ② 邮件的协议：mailTo

        ③ 迅雷的协议：thunder

4、超链接标签的样式问题——a标签的伪类选择器的书写顺序

4.1 <a> 标签的多重状态

        对于该标签，它一共有五种状态：:link, :visited, :hover, :focus, :active 

        :link —— 于声明未访问状态链接的样式；

        :visited —— 可以用于声明已经访问链接的样式；

        :hover —— 可以用于声明鼠标悬停在链接上的样式；

        :focus —— 可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；

        :active —— 可以用于声明浏览器点击链接的样式。

        注意：冒号前后不要出现空格

        一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。

        link、visited、active分别对应body元素的link、vlink、alink这三个属性。

        四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。

4.2 链接（a标签状态）定义的顺序   

        没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。
　　老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序：a:link、a:visited、a:hover、a:active。若没有按照这样的顺序的话，有的状态的样式会被放置在后面的样式覆盖而导致像没有触发一样没有效果，如：如果hover放在visited之后，则就算我放上去变色了，但是同时这个标签也具有visited状态以及其的效果，会覆盖了hover的效果。
　　为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中，宜将最一般的条件放在最上面，并依次向下，最下面放最特殊的。
　　在W3C规范中，也规定了链接的声明顺序：
　　在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
　　在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

        即：a:link —— a:visited —— a:hover —— a:active  

5、关于图形映射：

-只有图形可以添加映射，尽量用map元素和area元素设定图像映射
-<a>标签的 shape 和 coords 属性只支持 opera 和 firefox 浏览器

shape 规定链接的形状
shape的值：

        default 全部区域
        rect 矩形
        circle 圆形
        poly 多边形

coords 规定链接的坐标
coords的值：

如果shape是rect，coords的值为x1,y1,x2,y2，规定左上角和右下角的坐标。
如果shape是circle，coords的值为x,y,radius，规定圆心的坐标和半径。
如果shape是poly，coords的值为x1,y1,x2,y2,xn,yn，规定多边形各边的坐标，如果最后一个坐标和第一个不一致，浏览器为了关闭图形，会添加最后坐标。

other：

a标签的某个功能：协议限定符：（小小的黑客功能）

<body>
    
        <a href="javascript:while(1){alert('让你看，看屁')}"> 点击我查询成绩</a>

</body>

说明：
javascript就是协议限定符，在后面可以加文字显示
写上javascript后，a标签就会强制运行javascript代码
javascript是很有逻辑的很有结构的
可以在后面写一个死循环{while（1）}
其中alert属性是弹出框