1.5 页面链接<A>标签


<A>标签用于创建超级链接(简称为超链接),它是到另一个文档或文件(图形、音频、视频)甚至到同一文档的另一部分的链接。当用户单击超级链接时,就会进入链接中指定的URL。超级链接可链接到:同一文档的特定部分,其他文档,其他文件——图像、音频、视频剪辑,其他站点等。

要创建超级链接,应指定以下两个组件:

(1) 要链接文件的完整地址或URL。

(2) 将提供链接的热点。热点可以是文本行,也可以是图像。当用户单击热点时,浏览器将读取URL中指定的地址并“跳”到新的位置。

锚记<A>标签用于标识充当HTML文档中文本或图像的超级链接。href(超文本引用)参数用于指定要链接文档的地址或URL。

本节单词记忆:标签 1.a 属性 1.href

网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。

一、链接到其他页面

链接到其他页面,就是单击此超级链接,打开一个新的HTML文档。

语法:

<A  href="register/register.html">[免费注册]</A>

其中,href属性用来指定要链接的地址,“[免费注册]”是热点文本。

示例1:

<HTML>
<HEAD>
<TITLE>链接到其他页面</TITLE>
</HEAD>
<BODY>
 <A  href="register/register.html">[免费注册]</A>
 <A  href="login/login.htm">[登录]</A>
</BODY>
</HTML>

示例1在浏览器中预览效果如图1所示,单击“[免费注册]”超级链接,用户就打开如图2所示的页面,即register.html文档,如图2所示。

       
图1 链接到其他页面                           图2 单击“[免费注册]”打开的页面

在示例1中,3个文件处在不同目录下,因此href参数可提供链接到其他目录中的文件。应指定绝对或相对路径名。

绝对路径名:指定从根目录到文件的完整路径。例如,要指向文件register.html,绝对路径名为D:\register\register.html。

相对路径名:指定相对于当前文件的文件位置。假定docl.htm和doc2.htm在同一文件夹下,则从docl.htm到doc2.htm的相对路径为:<A href=”doc2.htm”>文档2的详细资料</A>。

二、链接到本页面

如果一个页面的内容过多,导致页面过长,用户需要不停地拖动滚动条来查看文档中的内容,为了方便用户阅读过长的页面内容,可以使用锚点链接。

命名锚记也称为锚记,<A>标签的name属性用于创建锚点。

<A name=“marker">主题名称</A>

为达到这种跳转效果,请在href参数中使用如下标记。

<A href="marker">主题名称</A>

超级链接名称前面的符号“#”告诉浏览器当前链接是文档中的一个锚记点。由于在符号“#”前未指定任何文档,浏览器由此知道该链接位于同一文档内。示例1演示了如何链接到同一文档的各个部分。

示例2:

<HEAD>
<TITLE>淘宝网主页</TITLE>
</HEAD>
<BODY bgcolor="#FFCCFF">
<IMG src="images/logo.gif" width="240" height="31">[免费注册]登录]
<A href="#helpme">[新人上路]</A> 
 <H1 align="center">您好,欢迎来淘宝! </H1>
 <P><FONT size="+2" color="red" >
    手机充值、IP卡/电话卡 </FONT><BR />
    移动&nbsp; | &nbsp;50 |&nbsp; 100 | &nbsp;联通 | &nbsp;50 | &nbsp;100 </P>
 <P>淘宝集市欢迎您!</P>
 <P>淘宝网首届翠友会!<BR />
   想做最闪亮的mm吗 <BR />
   千余中奖机会有你吗 <BR />
   淘宝入选平安网站
</P>
 <P><IMG src="images/adv_2.jpg" width="360" height="190" border="0" align="middle" />请点击广告进入明星专区</P>
         <HR size="1" color="red">
  <H3>注册步骤:</H3>
  <OL >
    <LI>      填写信息</LI>
    <LI>      收电子邮件</LI>
    <LI>      注册成功 </LI>
  </OL>
<A name="helpme">新人上路指南</A>
  <UL type="circle">
    <LI>如何激活会员名? </LI>
    <LI>如何注册淘宝会员? </LI>
    <LI>注册时密码设置有什么要求? </LI>
    <LI>支付宝认证</LI>
  </UL>
</BODY>
</HTML>

示例2在浏览器中预览效果如图3所示。


图3 锚点链接


图4 锚点链接到位置

三、电子邮件链接

用户可从网页发送电子邮件。要做到这一点,可在链接标签中插入“mailto:邮箱地址”

例如:<A href=”mailto:[email protected]”>站长信箱<A>

示例3:

<HTML>
<HEAD>
<TITLE>淘宝网主页</TITLE>
</HEAD>
<BODY bgcolor="#FFCCFF">
<IMG src="images/logo.gif" width="240" height="31">[免费注册][登录]
<A href="mailto:[email protected]">站长信箱</A>
</BODY>
</HTML>

单击“站长信箱”邮件链接,将打开用户的电子邮件程序,并且“收件人:”文本框中的电子邮件地址已指定为[email protected]。

本节作业:

制作如下图网页。

注意事项:

1.将免费注册设置为超链接,可以链接到同级目录下的reg.html页面。

2.将联系我们设置为电子邮件链接。

3.将MOTO设置为锚点链接,可以跳转到下面的MOTO E2 音乐手机。

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第一章案例及作业资源 返回《HTML入门经典》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/html/jc/477.html

1.5 页面链接<A>标签

时间: 2024-10-11 17:30:09

1.5 页面链接<A>标签的相关文章

页面中部分标签简单描述

今天工作中做的内容: <div> <br/> <br/> <br/> <br/> <span><a href="http://xxxxxx.xxxxx.xxxxx.cn">12344567890</a></span> </div> 描述: br定义和用法<br> 可插入一个简单的换行符.<br> 标签是空标签(意味着它没有结束标签,因此这是错误

HTML 链接&lt;a&gt;标签

定义和用法 <a> 标签定义超链接,用于从一张页面链接到另一张页面. <a> 元素最重要的属性是 href 属性,它指示链接的目标. 在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 提示:您可能已经注意到了,W3School 站点内的链接外观与默认的链接外观非常不同.您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式. 提示和注释 提示:如果不使用 href 属性,则不可以使用如下

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状如下: 解决方案如下: MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,布布扣,bubuko.com

爬虫技术(六)-- 使用HtmlAgilityPack获取页面链接(附c#代码及插件下载)

菜鸟HtmlAgilityPack初体验...弱弱的代码... Html Agility Pack是一个开源项目,为网页提供了标准的DOM API和XPath导航.使用WebBrowser和HttpWebRequest下载的网页可以用Html Agility Pack来解析. HtmlAgilityPack的文档是CHM格式的,有时会无法正常阅读CHM格式的文件.如果是IE不能链接到您请求的网页或者打开后"页面无法显示".请在要打开的CHM文件上右击属性,会在底下属性多了个"

在php中,如何将一个页面中的标签,替换为用户想输出的内容

前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例子,就是在php中如何读取另一个html页面中的标签,并显示用户想输出的内容. 首先建立一个页面,命名为:test.html如下图所示: <!doctype html> <html lang="en"> <head> <meta charset=&

navigator 页面链接

页面链接. 属性名 类型 默认值 说明 url String   应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果 注:navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点

基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果 为了实现这个收藏夹功能,我们也需要

自动检查页面链接是否有效

Function?CheckAllLinkReachable(strBrowser,?strPage,?strURLPattern) Dim?blnReachable blnReachable?=?True Set?bjXML?=?CreateObject("Msxml2.XMLHTTP") '?Get?all?link?on?the?page Set?bjDes?=?Description.Create objDes("micclass").Value?=?&qu

Dynamics CRM2016 新功能之从CRM APP通过电子邮件发送页面链接

通过电子邮件发送页面链接在PC端早就有了.但APP端却始终没有.这版加上了这个功能.这里还是以case为例,发送页面链接的方式有两种 第一种在list界面,长按你要share的数据,会出来选项sharelink.图标是个邮件,即通过邮件形式share 另外一种是点进详细的数据,依然点右下角的省略号图标,会出来sharelink的选项 点击sharelink后会调用本地email来发送.发出去的email带两个链接地址.前者是APP地址,假设接收者本地也有CRM的APP直接调用显示,假设没有则点击