您现在的位置是:首页 > 前端学习 > Web前端Web前端
网页中的链接(第五节)(图文)
第十三双眼睛2019-11-01【Web前端】人已围观
简介一个普通的网站就是将许多页面链接再一起,用户通过网站的主页查找到所有的页面,而网页中的链接称为页面的链接,这就像再网页中查找目录的时候,再第一页的目录中找到所需资料的所在书页,然后根据所在页数反倒此页。而再网站中,用户通过链接,跳转到指定的页面。
1理解网页链接
2学习基本的链接方式
3如何修饰链接的状态
4了解特殊形式的链接
网页链接
所谓网页链接,是指从一个页面像另一个页面的链接关系,这个目标是多种样式的,可以是一个网页,也可以是相同网页的不同位置,甚至可以是一张图片,一个电子元件地址,一个应用程序,当用户单击已经链接的页面内容时,链接目标将显示再浏览器上,并根据目标的类型来运行。
可以说,在一个大型的网站中,网页链接充斥着整个网站中的每一个角落,
在HTML文档中,使用<a>标签指引页面中链接的目标点,让设计者创建指向目标点的链接,在连接的属性中,代码的书写方法是:
<a href="连接对象的路径">...</a>用a表示锚点,因为anchor(锚),href属性的意思是超文本引用,整个属性的指指定了连接的目标,在一个完整的连接语句中包含两个部分,即连接锚点对象和连接地址,
理解连接地址
连接地址指的是连接到锚点对象的路径,整个路径所指的不仅仅是一个页面地址,也可能是一个文件地址或者一个邮箱地址。
基本的文本连接
文本连接时页面中最常用的连接形式,也是最基本的一种链接,一般文本链接中,最初文字上的颜色呈现蓝色,下面有一条下划线,如果链接被点击过了,文本颜色就会改变,默认时紫色,书写时,用<a href=""> 被包裹的内容</a>
基本的图像链接
图像链接的使用频率和文本链接一样高,设置链接的方法和文本无异,写法<a href="...> <img src="..."></a>
邮箱链接
<a> 标签还可以和邮箱链接,这是通过网页让使用者和设计者联系的最简便方法,写法如下:<a href="mailto:邮箱地址">mailto表示把邮件发送给某人。
互联网上,有很多垃圾邮件的制造者,他们创建电子邮件的数据库,然后给电子邮件地址发送大量的垃圾邮件,其中有一种方法就是使用程序自动搜索含有mailto的链接,为了防止垃圾邮件,有时候也把邮件地址的英文字母转换成ASCII字符,如:huizhao@qq.com,将其中的字母a改为a,这样,电子邮件的地址就变成了huizh&@97;a@qq.com.这样,程序搜出来的就是乱码的电子邮件地址。
在同一页面中快速查找信息
链接除了可以连接页面其他的页面,还可以连接到本页面的其他内容,这种连接称为锚点连接。通过下面两个步骤可以理解这种代码的用法,
1要确定连接的锚点对象,不同于页面和外部文件的连接方式在于,连接的路径由于在同一页面,这里需要使用#来引用同一页面中的内容,代码的写法为:
<a href=".#.."></a>
2需要在页面中设置连接的目标,使用的就是id属性。id属性中放入的就是第一步中href属性设置的内容,这样前后呼应,自然就可以很容易找到位置。
<a href="#libai">李白</a>
<br>
<a href="#dufu">杜甫</a>
<br>
<a href="#baijuyi">白居易</a>
<br>
<a href="#dumu">杜牧</a>
<br>
<p id=libai>
李白.....
</p>
由于页面太长,当单击目录栏时,页面会跳到相应的目标位置,以方便浏览者浏览页面信息,这是提高页面友好性的一个方法,
提高页面连接的友好度
在设置了超链接的文本中,链接的内容都带有下划线,浏览过的字体也都是特定的颜色,给人一种千篇一律的感觉,对于浏览者来说,不太舒服。
链接的状态在页面中是很重要的一部分,起到的作用举足轻重,而链接的样式是可以通过定义来修改的,在修改之前,首先要搞明白链接的过程,一个链接的状态可以分为以下四种。
1链接还未被访问
2链接被选中时
3鼠标滑过链接
4链接被访问后
使用HTML标签属性,可以添加link,alink,vlink,来修改超链接文本的颜色。link属性修改链接未访问时的文本颜色,alink修改链接被选中时的文本颜色,vlink修改链接被访问后的颜色。
当页面被访问过后,再次打开页面时,会发现链接始终保持链接访问后的状态,这是因为浏览器记录了用户的连接记录,如果像删除这种记录,可以通过删除浏览器的缓存
上面的方式时通过HTML代码来实现的,实际上,最好使用CSS来实现这种功能,代码如下:
a:link{}
a:active{}
a:hover{}
a:visited{}
在{}中通常设置两个属性,color,修改文本的颜色,text-decoration修改是否具有下划线
奇妙特殊的连接方式
上面介绍了用CSS的方法去除连接下面默认的下划线,这里来介绍两种新的方式来改变下划线的样式,首先需要了解两个属性,border-bottom,padding-bottom,前者的意思是底部边界,后者的意思是底边内部,他们都是用来描述边框性质的,这里就是用来替换原来的下划线的。代码如下:
<style type="text/css">
a{
text-decoration: none;
border-bottom: 5px dotted red;
}
</style>
</head>
<body>
<a href="#">未访问</a>
</body>
热点图像区域的连接
所谓图像热点区域,就是指在一个图像中的某一个区域,那么热点图像区域的连接自然就是使用整个区域作为超链接,就好像在一张地图上以其中一块区域作为超连接,所以,在代码中也用到一个形象的标签,<map>,在<map>标签内部嵌入使用<area>标签表明某一个区域,其中有三个属性值来确定整个区域,分别是shape属性,coords属性,href属性。
shape属性:用来确定区域的形状,分别是rect()矩形,circle(圆形),poly(多边形)
coords属性:用来控制形状的位置,通过左表来找到整个位置,一般来说,在实际操作中,设计者都会选择可视化的编辑工具来完成这一个功能,因为在图像上计算左表值很麻烦。
href属性:就是超链接
代码写法:
<a shape="" coords="" href="">
在新窗口中显示链接窗口
在先前的所有链接中,页面都是在同一个页面中跳转,有时候设计者希望跳转的页面在新窗口中打开,这时,只需要在<a 标签中添加target属性>
如下:
<a href="#" target="_blank">超链接</a>
所谓网页链接,是指从一个页面像另一个页面的链接关系,这个目标是多种样式的,可以是一个网页,也可以是相同网页的不同位置,甚至可以是一张图片,一个电子元件地址,一个应用程序,当用户单击已经链接的页面内容时,链接目标将显示再浏览器上,并根据目标的类型来运行。
可以说,在一个大型的网站中,网页链接充斥着整个网站中的每一个角落,
在HTML文档中,使用<a>标签指引页面中链接的目标点,让设计者创建指向目标点的链接,在连接的属性中,代码的书写方法是:
<a href="连接对象的路径">...</a>用a表示锚点,因为anchor(锚),href属性的意思是超文本引用,整个属性的指指定了连接的目标,在一个完整的连接语句中包含两个部分,即连接锚点对象和连接地址,
理解连接地址
连接地址指的是连接到锚点对象的路径,整个路径所指的不仅仅是一个页面地址,也可能是一个文件地址或者一个邮箱地址。
基本的文本连接
文本连接时页面中最常用的连接形式,也是最基本的一种链接,一般文本链接中,最初文字上的颜色呈现蓝色,下面有一条下划线,如果链接被点击过了,文本颜色就会改变,默认时紫色,书写时,用<a href=""> 被包裹的内容</a>
基本的图像链接
图像链接的使用频率和文本链接一样高,设置链接的方法和文本无异,写法<a href="...> <img src="..."></a>
邮箱链接
<a> 标签还可以和邮箱链接,这是通过网页让使用者和设计者联系的最简便方法,写法如下:<a href="mailto:邮箱地址">mailto表示把邮件发送给某人。
互联网上,有很多垃圾邮件的制造者,他们创建电子邮件的数据库,然后给电子邮件地址发送大量的垃圾邮件,其中有一种方法就是使用程序自动搜索含有mailto的链接,为了防止垃圾邮件,有时候也把邮件地址的英文字母转换成ASCII字符,如:huizhao@qq.com,将其中的字母a改为a,这样,电子邮件的地址就变成了huizh&@97;a@qq.com.这样,程序搜出来的就是乱码的电子邮件地址。
在同一页面中快速查找信息
链接除了可以连接页面其他的页面,还可以连接到本页面的其他内容,这种连接称为锚点连接。通过下面两个步骤可以理解这种代码的用法,
1要确定连接的锚点对象,不同于页面和外部文件的连接方式在于,连接的路径由于在同一页面,这里需要使用#来引用同一页面中的内容,代码的写法为:
<a href=".#.."></a>
2需要在页面中设置连接的目标,使用的就是id属性。id属性中放入的就是第一步中href属性设置的内容,这样前后呼应,自然就可以很容易找到位置。
<a href="#libai">李白</a>
<br>
<a href="#dufu">杜甫</a>
<br>
<a href="#baijuyi">白居易</a>
<br>
<a href="#dumu">杜牧</a>
<br>
<p id=libai>
李白.....
</p>
由于页面太长,当单击目录栏时,页面会跳到相应的目标位置,以方便浏览者浏览页面信息,这是提高页面友好性的一个方法,
提高页面连接的友好度
在设置了超链接的文本中,链接的内容都带有下划线,浏览过的字体也都是特定的颜色,给人一种千篇一律的感觉,对于浏览者来说,不太舒服。
链接的状态在页面中是很重要的一部分,起到的作用举足轻重,而链接的样式是可以通过定义来修改的,在修改之前,首先要搞明白链接的过程,一个链接的状态可以分为以下四种。
1链接还未被访问
2链接被选中时
3鼠标滑过链接
4链接被访问后
使用HTML标签属性,可以添加link,alink,vlink,来修改超链接文本的颜色。link属性修改链接未访问时的文本颜色,alink修改链接被选中时的文本颜色,vlink修改链接被访问后的颜色。
当页面被访问过后,再次打开页面时,会发现链接始终保持链接访问后的状态,这是因为浏览器记录了用户的连接记录,如果像删除这种记录,可以通过删除浏览器的缓存
上面的方式时通过HTML代码来实现的,实际上,最好使用CSS来实现这种功能,代码如下:
a:link{}
a:active{}
a:hover{}
a:visited{}
在{}中通常设置两个属性,color,修改文本的颜色,text-decoration修改是否具有下划线
奇妙特殊的连接方式
上面介绍了用CSS的方法去除连接下面默认的下划线,这里来介绍两种新的方式来改变下划线的样式,首先需要了解两个属性,border-bottom,padding-bottom,前者的意思是底部边界,后者的意思是底边内部,他们都是用来描述边框性质的,这里就是用来替换原来的下划线的。代码如下:
<style type="text/css">
a{
text-decoration: none;
border-bottom: 5px dotted red;
}
</style>
</head>
<body>
<a href="#">未访问</a>
</body>
热点图像区域的连接
所谓图像热点区域,就是指在一个图像中的某一个区域,那么热点图像区域的连接自然就是使用整个区域作为超链接,就好像在一张地图上以其中一块区域作为超连接,所以,在代码中也用到一个形象的标签,<map>,在<map>标签内部嵌入使用<area>标签表明某一个区域,其中有三个属性值来确定整个区域,分别是shape属性,coords属性,href属性。
shape属性:用来确定区域的形状,分别是rect()矩形,circle(圆形),poly(多边形)
coords属性:用来控制形状的位置,通过左表来找到整个位置,一般来说,在实际操作中,设计者都会选择可视化的编辑工具来完成这一个功能,因为在图像上计算左表值很麻烦。
href属性:就是超链接
代码写法:
<a shape="" coords="" href="">
在新窗口中显示链接窗口
在先前的所有链接中,页面都是在同一个页面中跳转,有时候设计者希望跳转的页面在新窗口中打开,这时,只需要在<a 标签中添加target属性>
如下:
<a href="#" target="_blank">超链接</a>
很赞哦! ()
上一篇:网页中的图像(第四节)(图文)
下一篇:网页中的表单(第六章)(图文)
相关文章
随机图文
-
文本、背景、边框不再单调(第十三章)(图文)
再制作网页的时候,经常会围绕文本,背景和边框几个方面进行样式表设置,但在CSS2.0中,如果涉及如阴影、圆角、多重背景等效果,常常因为不能实现,转而寻求其他办法,再颜色选择及半透明颜色使用方面也极不方便,这些问题,再CSS3中都有很好的解决方案。本章知识点如下: 1文本与字体的设计 2色彩模式和不透明度的设置 3背景和边框的使用 -
音频和视频(第七节)
在HTML5之前,在线的视频和音频都是节主FLASH或者第三方工具实现的,现在的HTML5也支持了这方面的功能,在一个支持HTML5的浏览器中,不需要安装任何插件就能播放视频和音频,原生的支持视频和音频,为HTML5注入了巨大的发展潜力,本章将介绍两个重要的元素,audio,video,分别用于实现音频和视频,又称为多媒体,对于这两个元素,HTML5为开发者提供了标准的,集成的API 本章的重要知识点如下: 1AUDTIO和VIDEO的基础知识 2HTML5中的AUDIO和VIDEO 3网页中的音 -
传统的div+css设计(第十四章)(图文)
本章的知识点如下: 1了解页面是如何布局的 2理解层的含义,以及层的特性和他的使用方式 3学习创建框模型以及它的使用规律和特点 4了解CSSHack 5简单的布局页面的创建 -
CSS规则(第十二章)(图文)
对于设计者来说,总式希望能够在页面中自由发挥创意,实现自己得想法,然而,HTML语言中的很多标签都存在很大的局限性,如h1这样的标签,始终是定义较大的字体,所以,在没有CSS之前,设计者不得不借助其他标签补充标签的属性。 从本章开始,读者要尽量忘记原来标签的定式,CSS样式如同一种上乘的武学,类似于一种无招胜有招的境界,比如,虽然h1常用来定义标题,但这是因为人们习惯于这样使用,而h1表现出来的样式并非一成不变的,当设计者使用CSS时,他们可以令h1标签内的文本变成自己想要的样子。