概念

 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话,可以作为原本链接位置的占位符,常用于home链接

  [注意]任何文档流内容都可以被嵌套,只要不是交互内容类别(如按钮、链接等)

属性

href

  href属性表示地址,共包括以下3种:

  1、链接地址

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

  2、下载地址

<a href="test.zip">下载测试</a>

  3、锚点

    (1)href:#id名

<a href="#test">目录</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>

    (2)href:页面地址#id名

<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

  [注意]href属性一定不要留空,若暂时不需要写地址,则写#或javascript:;。若href留空,会刷新页面

href与src的区别

    href(hypertext reference)指超文本引用,表示当前页面引用了别处的内容

    src(source)表示来源地址,表示把别处的内容引入到当前页面

    所以<img>、<script>、<iframe>等应该使用src,而<a>和<map>应该使用href

  4、手机号码

  在移动端,使用<a href="tel:15012345678>15012345678</a>可以唤出手机拨号盘

target

  target属性表示链接打开方式

  1、_self    当前窗口(默认)
      2、_blank    新窗口
      3、_parent 父框架集
      4、_top 整个窗口
      5、_framename 指定框架

//外层框架
<frameset cols = "20%, *">
<frame src="left.html">
<frame src="right.html">
</frameset> //里层框架
<frameset rows = "50%,*">
<frame src="top.html">
<frame src="bottom.html" name="bottom">
</frameset> //锚点页
<ul class="list">
<li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li>
<li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>
<li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>
<li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li>
<li class="in"><a href="chap5.html" target="bottom">chap5(framename)</a></li>
</ul>

download

  download属性用来设置下载文件的名称(firefox/chrome/opera支持)

<a href="test.zip" download="gogo">test</a>

rel

  rel属性表示表示链接间的关系

alternate   相较于当前文档可替换的呈现
author 链接到当前文档或文章的作者
bookmark 链接最近的父级区块的永久链接
help 与当前上下文相关的帮助链接
license 当前文档的许可证
next 后一篇文档
prev 前一篇文档
nofollow 当前文档的原始作者不推荐超链接指向的文档
noreferer 访问时链接时不发送referer字段
prefetch 预加载链接指向的页面(对于chrome使用prerender)
search 用于搜索当前文档或相关文档的资源
tag 给当前文档打上标签

  【应用】当一篇篇幅很长的文章需要多页显示时,配合next或prev可以实现前后页面导航的预加载

<a href="prev.html" rel="prev prefetch prerender">前一页</a>
<a href="next.html" rel="next prefetch prerender">后一页</a>
//当然prefetch也可以用于预加载其他类型的资源
<link rel="prefetch prerender" href="test.img">

注意事项

  1、<a>标签的文本颜色只能自身进行设置,从父级继承不到

2、<a>标签的下划线颜色跟随文本颜色进行变化

  3、<a>标签不可嵌套<a>标签

<div style="color: red;">
<a href="#">[]从父级继承不到红色字体</a>
<br>
<a href="#" style="color: green">[]下划线颜色与文本同色</a>
<br>
<a href="#">前面<a href="#">[]a标签不可嵌套</a></a>
</div>

了解HTML锚点的更多相关文章

  1. 原生js模拟锚点,实现点击后,内容定位到本页的对应位置

    今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使 ...

  2. angularjs 锚点操作服务 $anchorScroll

    在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/ro ...

  3. js做通讯录的索引滑动显示效果和滑动显示锚点效果

    只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和cli ...

  4. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  5. JQuery 实现锚点链接之间的平滑滚动

    24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.repla ...

  6. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  7. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  8. Html锚点定位偏差计算解决插件

    /*=============== 以下为HTML中的锚点代码 =====================*/ <div id="fixedNavBar" class=&qu ...

  9. 讨论SEO中是锚文本有效,还是纯文本有效呢?

    现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...

随机推荐

  1. LINUX常见问题

    FQA1:如何进入linux单用户模式修改root密码 进入单用户模式:1. grub进入启动画面之后,敲入“e”,把光标移动到kernel ...那一行,再敲入“e”,在kernel 一行的最后加上 ...

  2. c++书

    http://www.enet.com.cn/eschool/video/c++/   视频 http://www.runoob.com/cplusplus/cpp-inheritance.html ...

  3. zookeeper工作原理、安装配置、工具命令简介

    1.Zookeeper简介 Zookeeper 是分布式服务框架,主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等等. 2.zo ...

  4. RecyclerView的介绍与使用

    一.什么是RecyclerView 新的视图控件,是Android-support-v7-21版本中新增的一个Widgets,官方对于它的介绍则是:RecyclerView是ListView的升级版本 ...

  5. IE6中内容高度比高级浏览器高的解决办法

    1.div高度小于12px时,加over-flow:hidden; 2.多用padding,少用margin: 3.img vertical-align:top;

  6. Akka-remote使用入门

    在上一篇文章中讲了akka-actor的简单使用,那主要是展现了akka在一台机器上的并发应用,这一篇接着介绍akka-remote使用,简单了解akka在不同机器上的并发应用.我们知道,在一台机器上 ...

  7. Handlebars.js的学习

    写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...

  8. Powershell 十个常见任务

    学习Powershell的时候,基本的语法也了解了一些,但是就是不知道要写些什么?作为一个过来者,和大家一起分享下常见的几个管理任务脚本. 1.更改本地Administrator账号密码 [ADSI] ...

  9. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  10. checkbox和文字对齐

    <style type="text/css"> input{vertical-align:middle; margin-top:0;} </style>