怎么用做网页的超链接

当我们在网页中点击一个链接时便发生了页面跳转动作,例如点击搜狗指南首页中的任意分类,便可以进入到该分类的专题页面,这种跳转动作便是网页超链接实现的。我们使用html语言编辑网页,使用html的<a>标签实现网页的超链接,下面为您介绍<a>标签的具体用法。

操作方法

  • 01

    在学习超链接之前我们需要了解URL(Uniform Resource Locator)的概念,每一个文件在互联网上有唯一的地址,该地址被称为统一资源定位符(URL)。URL格式为:http://host[:port]/path/filename,http表示通过HTTP协议来定位网络资源,host表示合法的Internet主机域名或IP地址,port为指定的端口号,若port为空,则缺省端口为80,path为文件夹的路径(绝对路径和相对路径),filename为文件名。我们在html中使用代码<a href="http://zhinan.sogou.com/" target="_target" >链接到搜狗指南首页</a>实现超链接,href的内容便是一个URL。我们在html编辑器中某个文件任意位置点击右键,选择Open in Browser即可打开网页,如下图所示。以下所有步骤在编辑完代码后均需要该操作。

  • 02

    html<a>标签的语法:<a href="网址、链接地址" target="目标" title="说明">被链接内容</a>。href为相对路径或绝对路径或具体的网页URL地址。taget值可以省略,常用的有以下三种:_blank表示在新窗口中打开链接;_parent表示在父窗体中打开链接;_self在当前窗体打开链接,此为缺省值。target值为_blank时,我们点击超链接会在新的页面打开超链接的内容。步骤1中点击链接跳转到了搜狗指南首页,点击左侧的返回按钮即可返回链接所在的页面。_parent和_self则在原来的页面打开链接的页面,原来的页面不复存在。

  • 03

    title的值为链接的说明,我们将鼠标放在链接上时才会出现此说明信息,如下图所示。另外需要注意的是<a></a>标签之间必须有文字,即显示的链接文字,若无则显示不了超链接。

  • 04

    <a>标签的作用不止是跳转到其他的页面,还可以实现跳转到当前页面的指定位置,在页面过长,需要占到三四个屏幕时使用较多。实现方式有两种,下面将分别介绍。第一种为同页面添加锚文本,可实现同页面内上下跳转到指定位置。我们同样使用<a>标签来定义锚,即要跳转到的位置,代码为:<a name="pos">要跳转的位置</a>,这里定义的锚名字为pos,我们在页面的另一个地方定义一个超链接来指定锚,代码为:<a href="#pos">,注意href#后的内容要和锚的name属性值一致。

  • 05

    另外一种方法需要使用id属性,id属性可用于创建在一个HTML文档中的书签标记,该书签在HTML文档中是不显示的。下面我们使用id属性实现回到页面顶部的功能,我们在跳转到的位置使用代码:<span id="top"></span>,在超链接的位置使用代码:<a href="#top">回到顶部</a><br>,同样href#后的值必须和id属性的值一致,另外<span>标签不是必须的,有id属性的标签均可。

  • 06

    <a>标签不仅可以实现跳转到本页面的指定位置,也可以实现跳转到其他页面的指定位置。例如,我们在一个页面使用id属性标识当前位置,代码为:<p id="mubiao">新的一天</p>,在另一个页面使用代码<a href="2.html#mubiao">在其他页面定位</a>实现超链接,注意此时href值的写法。

  • 07

    使用<a>标签给图片加上超链接,点击某个图片即可跳转到指定的页面。我们在<a>标签中添加<img>标签,该标签用于在网页显示图片,src的值为图片的位置,可以为绝对路径也可以为相对路径,下图中使用的为相对路径,点击文字下面的图片即可跳转。

  • 08

    使用<a>标签实现电子邮件链接,电子邮件链接类似于URL的链接方式:格式为:mailto:电子邮件地址,实现代码为:<a href=mailto:11111@qq.com>邮件投递</a>,打开网页并点击链接时会弹出写邮件窗口,使用邮件客户端便可打开,如下图所示。

(0)

相关推荐

  • 做网页怎么获得代码

    做网页的成果不光是只有网页,还有代码可以看. 操作方法 01 打开软件,新建一个网页,如图所示. 02 在页面的左上角有拆分/设计,点开它. 03 在设计面做的动作,在代码页都有会有记录,如图所示. ...

  • 如何用photoshop做网页

    今天小编来讲讲如何用PS做网页,其实原理很简单,就是利用切片工具,来实现的! 操作方法 01 首先把下载好的或者自己做好的PSD文件打开然后找到又侧的工具栏找到切片工具 02 然后用切片工具把页面切割 ...

  • 如何在使用DW做网页的时候插入音乐

    今天我们来学习如何在DW做网页的时候插入自己喜欢的音乐吧! 操作方法 01 首先打开DW,点击创建新项目的HTML. 02 点击做上面一栏中的"插入"选择"布局对象&qu ...

  • 新手做网页用什么软件简单易学

    操作方法 01 新手做网页用什么软件简单易学要想学习制作网页和学习其它知识一样,是要有基础的.在基础之上学习起来会比较轻松和快捷的.其次,要清楚学习它是用来做什么.  建议你要具备的条件:对电脑熟练操 ...

  • 怎么样做网页

    制作网页涉及的技术和内容十分广泛,从交互性的角度来看,有静态网页和动态网页之分;从采用的编辑方式来看,有直接采用HTML代码编写的网页,也有通过可初化编辑器生成的网页代码.那么我们该如何选择适合自己开 ...

  • 如何用视频做网页的背景

    偶然看到一国外网站,发觉背景竟然是视频.只能感觉惊异.搜集好多资料,终于也弄好了,下面把介绍给大家. 操作方法 01 使用视频作为网页背景是件很酷的事情,但也是件困难的事情.CSS里的backgrou ...

  • 如何用DW来做网页排版

    如何用DW来做网页排版

  • word超链接怎么做 如何在word中设置超链接

    word超链接怎么做?我们在制作文档如果需要跟网页一样可以直接在word中的文字中点击跳转到一个新的网页该怎么设置?或者是要在word一个文档内部创建超级链接的话该如何实现?下面就让脚本之家教大家在w ...

  • Dreamweaver网页制作初级教程:超链接

    现如今,网页制作以及建站成了人人需要掌握的技能,小编也从各方面得到需求说,以前有过PS的入门教程,现在能不能做一个DW的入门教程.那么从今天开始,小编将用一些时间,为大家带来DW的入门教程.只要能坚持 ...