`
rebecca
  • 浏览: 311600 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

href 的理解

Web 
阅读更多

含义:

 

href:Hypertext Reference的缩写。意思是超文本引用。

 

用法:

 

1.内部连接:<a href="#/URL">name</a>

 

2.锚记 :<a name="object-name">name</a>   <a href="#object-name">name</a>  锚点链接

 

3.外部链接:<a href="URL">name</a>  

 

 英文全称是 hypertext reference 表示一种超链接 ,比如:   

 

<a href="http://www.google.com">Google</a>   这句话就表示建立一个以“Google”(字)为表象的网址链接   

 

4.特效链接   特效链接的目的不是跳转到其他位置,而是为了实现基本种页面特效,这种链接需要脚本来支持。例:  

 

JavaScript脚本:   <a href="javascript:alert('夜深了早点休息吧!')">点击我!</a>  

 

VBScript脚本:   <a href=vbscript:msgbox("现在时间是:"&time)>点击我!</a>

 

来自百科

 

 

href="#" 表示空链接,连接到当前页面。

 

补充:以下经常运用

 

建立书签

语法:<a name="书签名称">文字</a>

链接到同一页面的书签(运用)

语法:<a href="#书签的名称">链接的文字</a>

链接到不同页面的书签

语法:<a href="链接文件的地址#书签名称">链接的文字</a>  (注意引号和#号)

正常情况下点击:<a href="#书签名称">链接的文字</a>这个链接,则光标会自动跳转到本页面的:

<a name="书签名称">文字</a>的位置。

但是你写成:<a href="#">链接的文字</a>而不写书签名称实际上就是什么都不跳转。

一般只有在<a onclick="">的时候才会到href="#" 


下面这个又是什么意思呢?

href="#Menu=ChildMenu1" 

链接有两种,一种是不同页面间的链接,这种最常见。另外一种则是页内链接,我们一般称为页内锚链接。


1.加锚链

  定义好“锚”以后,将链接指向锚位置的链接形式如下:

  <a href=″#id″>....</a>,即以#再加上id格式。

  如:

  <a href=″#chapter1″>第一章</a>

  <a href=″#chapter2″>第二章</a>

  <a href=″#chapter3″>第三章</a>

  ..............

  <div id=″chapter1″>

  ...第一章内容..

  </div>

  <div id=″chapter2″>

  ...第二章内容..

  </div>

  <div id=″chapter3″>

  ...第三章内容..

  </div>

或者写成:

  <a name=″chapter1″>

  ...第一章内容..

  </a>

  <a name=″chapter2″>

  ...第二章内容..

  </a>

  <a name=″chapter3″>

  ...第三章内容..

  </a>



2.引用不同页面内的“锚”

  可能有些朋友要问,以上加的锚链都是在同一个页面之间的,如果是一个页面中的锚链接到同站点或另一个网站的另一个页面中的锚怎么办?很简单,形式为:

  <a href=″URL#id″>....</a>

  如 <a href=″http://ice-cream.iteye.com/index.htm#block1″>指向地址: http://ice-cream.iteye.com/index.htm文件的第一部分</a>





热点map的用法


<img src="../images/test.gif" alt="广告图" usemap="#ad" />

<map name="ad">   

    <area shape="rect" coords="59,25,150,125" href="1.htm" title="1"/>   

    <area shape="rect" coords="200,25,295,125" href="2.htm" title="2"/>

</map>  



shape -- 定义热点形状

   shape=rect: 矩形

   shape=circle:圆形

   shape=poly: 多边形



coords -- 定义区域点的坐标

    a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标

        例:<area shape=rect coords=100,50,200,75 href="URL">

    b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度

        例:<area shape=circle coords=85,155,30 href="URL">

    c.任意图形(多边形):将图形之每一转折点座标依序填入

        例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
分享到:
评论

相关推荐

    统计图 JFreeChart

    &lt;TITLE&gt;JFreeChart 简单的例子 ...href="servlet/ServletDemo1"&gt;条形统计图; &lt;!--跳转到ServletDemo1生成条形统计图--&gt; 可以选择统计图类型 href="chart1.html"&gt;三种类型 &lt;!--链接到chart1.html--&gt; &lt;/HTML&gt;

    C++程序设计语言(特别版)

    本书的目的就是帮助读者了解C++是如何支持编程技术的,使读者能从中获得新的理解,从而成为一名优秀的编程人员和设计人员。适合做高校面向对象编程课程的教科书,也可作为C++爱好者的参考书。 [center] [a href=...

    自己学习thinkphp笔记心得注意的和常用的地方

    自己学习thinkphp笔记心得注意的和常用的地方,thinkphp 学习a标签url href src等路径,一些比较容易理解并且会忘记的注意点

    理解Javascript文件动态加载

    Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法: function loadjs(fileurl){ ...link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bo

    Java Web应用开发:关于路径.docx

    关于路径 1 路径分类 1.1 客户端路径和服务端路径...&lt;a href=”/estore/pages/product/showProducts.jsp”&gt; 如果是服务端绝对路径(forward,include等): “/”代表当前web应用,例如:8080/estore 因此转发请求到show

    HTML 语法大全!超级精炼<一点通>

    以及初学者容易理解的简单例子! &lt;!DOCTYPE&gt; 指定了 HTML 文档遵循的文档类型定义(DTD)。 &lt;!-- ... --&gt; 批注 &lt;a&gt; 标明超链接的起始或目的位置。 &lt;A HREF TARGET&gt; 指定超级链接的分割窗口 &lt;A HREF=#锚的名称&gt; 指定锚...

    深入理解CSS中的@import

    link rel=stylesheet href=style.css /&gt;  2.CSS中@import CSS Code复制内容到剪贴板 @import style.css;  第一种方式最为常见最为主流,第二种方式则很少见到有人这么写,因而也常被开发工程师所忽略。这...

    jsp/java/数据库实现分页

    分页技术要点 1、要知道总的记录数 select count(*) as id from User1 ...8、理解2个运算表达式的业务逻辑 开始位置pages*ipage-ipage 结束位置 pages*ipage 总页数(allCol+ipage-1)/ipage 9、If和else的语法应用

    Bootstrap轮播图的使用和理解4

    本文实例为大家分享了Bootstrap轮播图的实现代码,供大家参考,具体内容如下 &lt;!...&lt;... &lt;head&gt;...meta charset="utf-8"&gt;...meta name="viewport" content="width=device-...link href="lib/bootstrap/css/boots

    JS实现弹出下载对话框及常见文件类型的下载

    JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能。 这里所说的下载,有时候也...

    详解angularjs中的隔离作用域理解以及绑定策略

    link rel=stylesheet href=css/bootstrap-3.0.0/css/bootstrap.css rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow &gt; &lt;/head&gt; &lt;body&gt; &lt;hello&gt;&lt;/hello...

    深入理解Angularjs向指令传递数据双向绑定机制

    下面来先看一个简单例子 ...link rel=stylesheet href=../bootstrap.min.js&gt; &lt;/head&gt; &lt;body&gt; 硬编码的input &lt;input type=text ng-model=Url&gt; &lt;div some-attr=Url&gt;&lt;/div&gt; &lt;script src

    html5理解head_动力节点Java学院整理

    HTML文档的head部分,通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载JavaScript文件(出于性能考虑,多数时候放在页面底部&lt;/body&gt;标签结束前加载JavaScript)。...base href=h

    js实现贪吃蛇小游戏(容易理解)

    link rel=stylesheet href=style.css&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; &lt;div id=container&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; 第一步:初始化地图,创建蛇圈。 第二步:创建蛇,随机生产...

    解决微信浏览器Javascript无法使用[removed].reload()刷新页面

    可以理解为请求被缓存了,但没有实测,也不知道是否是缓存。 解决方法是,使用[removed].href=”[removed].href+随机数” 代替 [removed].reload()。切记,一定要加随机数,否则一样不会起作用。当然也可以用一个a...

    前端面试题

    前端面试问题总和,例如渐进增强和优雅降级的区别、src和href的区别、对HTML语义化的理解、css有哪些选择器、px和em的区别

    DOM到JSON转换器「DOM to JSON Converter」-crx插件

    该工具从网页DOM中提取元素详细信息(名称,网址,ID,深度,值,ALT,SRC和HREF)。适用于iframes! “DOM到JSON转换器”从网站的DOM(文档对象模型...该工具可帮助用户可视化并理解网站的DOM结构。 支持语言:English

    DOM to JSON Converter-crx插件

    语言:English 工具从网页DOM中提取元素详细信息(名称,URL,ID,深度,值,alt,src和href)。 适用于IFRames! “DOM到JSON转换器”提取有关所有节点的有限信息(例如... 该工具帮助用户可视化并理解网站的DOM结构。

    前端vue面试题大全汇总

    8、请谈一下你对网页标准和标准制定机构重要性的理解。 9、请描述一下cookies,sessionStorage 和localStorage 的区别? 10、简述一下src 与href 的区别。 1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是...

    html5指南-1.html5全局属性(html5 global attributes)深入理解

    一个元素可以定义自己的属性,比如a标签定义href属性,这种叫局部属性(local attribute)。相对应的我们可以通过全局属性(global attribute)为所有元素设置共有的行为,当然你也可以为单独元素设置全局属性,...

Global site tag (gtag.js) - Google Analytics