您现在的位置是:首页 > 前端学习 > 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改为&#97;,这样,电子邮件的地址就变成了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>









 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计108篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们