网页制作初学者:学用HTML的超链接A标记

来源:互联网 责任编辑:栏目编辑 发表时间:2013-07-01 20:15 点击:
超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<a>标记的基本语法结构是:
<a
class=type
id=value
href=reference
name=value
rel=same|next|parent|previous
rev=value
target=window
style=value
title=title
onclick=function
onmouseout=function
onMouseOver=function> </a>
  从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?!
  其中class和id选项:用于设定链接点所属的类型和分配的ID号,通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。 链接到的文件也分为几种情况:如果为HTML文件,则在当前浏览器中直接打开;如果为可执行文件(.exe文件),则直接执行或下载,我们提供下载的文件就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。
rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。
rev:则用于设定反向链接。
target:是在采用帧窗口的情况下设定链接到哪一个窗口,还有target="_bank"是表示新开一窗口打开网页。
title:用于设定链接点被选到时显示的标题。
onclick:对应于一个事件,当链接点被点击后将触发这个事件,执行对应的子程序。
onmouseover:与onclick类似,对应的事件在鼠标移到链接点上时被触发。
onmouseout:对应的事件在鼠标移出镇接点后被触发。
举几个例子: <a href="index.htm">回到主页</a>
<a href="sound.wav">播放语音文件</a>
<a href="javascipt.open()">执行对应的程序</a>
<a herf="document.doc">打开对应的文档进行加工</a>

  应用技巧
  1、提供下载文件
  有不少网友来信问,提供下载的效果怎么做。实际上仍然是做一个超级链接,不过供下载的文件必须上传到网站上。例:有一个“网页技巧”的文件包供下载,文件名是“homepagejq.zip”且已上传到网站了,则这个链接的代码可以这样写:<a href="homepagejq.zip">点击这里下载“网页技巧”文件包</a>。
  2、在新窗口中打开链接的网页
  设定“target”的值为“_blank”。例:新开窗口打开网页“aboutme.htm”。产生该效果的代码是:<a href="aboutme.htm" target="_blank">关于我......</a>。
  3、鼠标移到链接,显示一行说明文字
  设定“title”参数值,即可获得这种效果。例:当鼠标移到“网页教学网”这个链接上时,显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的:<a href="hscf.htm" title="这是一个介绍网页制作技巧的专业网站">网页教学网</a>。
  4、鼠标移到一个链接上弹出一个窗口
  这是设定onmouseover参数获得的效果。例:当鼠标移到一个链接上,弹出一个窗口并在窗口中显示“鼠标悬停效果演示!”。这个链接的代码是这样的:<a href="其它网页.htm" onmouseover="alert('鼠标悬停效果演示!')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。
  5、链接到本页的指定内容
  要实现链接到本页的某一部分内容上(也就是“文件内跳转”),必须用参数name指定链接点的名称。选定一块文本,可以用name参数为其命名,以备链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候,若只对某部分的内容感兴趣,可以采用跳跃式的阅读方式。其基本格式是:
<a href="#链接点名称">第二部分</a>第一部分内容......
...........................................
<a name="链接点名称"></a>第二部分实际内容......
...........................................
  这
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • WordPress添加百度喜欢按钮小技巧
  • Wordpress 博客如何实现自定义Gravatar头像
  • 网站设计分析:建立良好的视觉层级
  • 创建不平衡的平衡:在网页设计中使用不对称设计
  • 7大主流B2C首页导航栏设计对比分析
  • Wordpress页面模板制作方法及使用
  • 网站设计与开发:11个在新终端上的网页设计趋势
  • 修改去掉Zblog列表插件文章排行调用标题前面的时间
  • css控制文字前的小图标
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1