当前位置:趣知科普网>母婴教育>学习交流>

HTML中的超链接用法实例

学习交流 阅读(2.83W)

如果说网站是由一张张页面组成的话,那么超链接的作用就是将这些网页联系在一起。点击超链接可以从一张网页跳转到另一张网页。现在,我们来看看如何使用HTML中的超链接吧。

HTML中的超链接用法实例

操作方法

(01)创建超链接使用a标签创建超链接,超链接可以是图片或文字,其中href属性指的是连接到另一个网页,比如我们创建一个指向搜狗浏览器的文字超链接,代码如下所示:<a href="">搜狗浏览器</a>

HTML中的超链接用法实例 第2张

(02)预览效果在浏览器中的效果,放大4倍数,点击超链接,即可跳转到搜狗浏览器页面,如下图所示:

HTML中的超链接用法实例 第3张
HTML中的超链接用法实例 第4张

(03)target属性target属性为打开超链接页面的显示方式,可取值如下:_blank:在新窗口中打开超链接页面_parent :在父窗口中打开超链页面_self :在当前窗体打开链接,此为默认值 _top :在当前窗体打开链接,并替换当前的整个窗体。

HTML中的超链接用法实例 第5张

(04)更改超链接的颜色超链接的默认颜色为蓝色,但是该颜色是可以更改的,使用style样式进行超链接颜色的更改,代码如下所示: <style type="text/css"> a { color:red; } a:hover{color:green} </style>

HTML中的超链接用法实例 第6张

(05)预览效果然后在浏览器中预览效果,可以看到超链接默认为红色,但是当鼠标移动上去的时候,超链接颜色变成绿色,如下图所示:

HTML中的超链接用法实例 第7张

(06)添加超链接的背景颜色超链接默认是没有背景颜色的,但是我们可以添加进去,比如当鼠标移动上去的时候,出来一个背景,代码如下图所示:<style type="text/css"> a { color:red; } a:hover { color:green; background-color :Gray; } </style>

HTML中的超链接用法实例 第8张

(07)预览效果然后在浏览器中预览效果,可以看到当鼠标移动上去的时候,超链接会出现一个背景颜色,如下图所示:

HTML中的超链接用法实例 第9张

(08)更改超链接的大小超链接是有默认大小的,我们可以通过添加font属性,更改超链接的大小,代码如下所示,然后预览效果可以看到当鼠标移动上去的时候,超链接的字体大小变大了。

HTML中的超链接用法实例 第10张
HTML中的超链接用法实例 第11张