码迷,mamicode.com
首页 > Web开发 > 详细

HTML <a> 标签

时间:2017-06-11 15:43:29      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:上下文   声明   腾讯   锚点   height   不同   联系   属性表   注意   

今天系统复习了一下<a> 标签,对于 <a> 的使用有更加深刻的认识。

 

<a> 超链接 

 

<a href=""></a>

这是<a>标签的最基本结构。

 

href属性 引号中写网页链接

 

1.href引号中可加绝对链接,比如已做好的网络地址,百度。

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

2.相对路径,在你的HTML文件同文件或者其他文件链接

<a href="test.html">这是另一个HTML文件</a>

 

title属性 当你鼠标移向超链接时显示文字

 

    <a href="http://www.baidu.com" title="点击打开百度">百度</a>

 

target属性  点击超链接网页打开方式

 

  1.新打开的网页覆盖当前网页 _self

  <a href="http://www.baidu.com" title="点击打开百度" target="_self">百度</a>

  2.新打开的网页用新的窗口显示 _blank

  <a href="http://www.baidu.com" title="点击打开百度" target="_blank">百度</a>

 

 

 

rel属性 声明即将跳转的文件与当前文件的关系,这个属性对用户没有任何作用,但对于搜索引擎是友好的,搜索引擎在抓取网页时可以很清楚的知道网页中上下文结构关系

 

  <a href="" rel="prev"></a> 当前文件的 上一篇

 

  <a href="" rel="next"></a> 当前文件的 下一篇

 

  <a href="http://www.sohu.com" rel="prefetch">sohu</a> 文档的预加载

  如果你想让你的个人网站更容易的被搜索引擎找到发现,最好加上该属性

 

 

超链接的特殊应用

 

  1. 功能性链接 

 

    及跳转其他网页 其中有一点特别注意,也是超链接的一个知识点:锚链接

    锚链接:跳转页面某一部位

    首先,我们要在页面指定位置设置一个锚点,用name属性表示锚点名字

    例如:<a name="one"></a> 这是一个空的超链接 锚点

   

    在同页面中,可直接用<a href="#one"></a>,来跳转到这个锚点所在位置

    例如:<a href="#top"></a>  如果你在顶部设置了锚点top,点击直接跳到了网页顶端top

   

    在不同的网页中,在test.html 页面中你设置了锚点<a name="this"></a>

    那么在同文件下index.html 页面中 则使用超链接<a href="test.html#this"></a> 来跳转

   

  2.发邮件

   

    <a href="mailto:邮箱地址">发送邮件</a>

    许多电脑没有自带的邮箱,可能点击并不好用

   

  3.聊天 QQ

    腾讯本身也有聊天链接,在平时上网的时候经常会看到联系客服

    <a href="tencent:message/?uin= qq号 ">联系客服</a>

    点击直接弹出qq 聊天窗口

   

  4.手机端打电话发短信

    <a href="tell: 手机号 ">手机端点击打电话</a>

  <a href="message:// 手机号 ">手机发短信</a>

 

  5.ftp上传下载

  <a href="ftp://地址">下载</a>

HTML <a> 标签

标签:上下文   声明   腾讯   锚点   height   不同   联系   属性表   注意   

原文地址:http://www.cnblogs.com/shihaojia/p/6985034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!