第8课:如何做各种超链接?

在这一课,你将学习如何在网页之间做超链接。

如何做超链接?

做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接:

例1:

<a href="http://www.125jz.com/">指向www.125jz.com的链接</a>

该例在浏览器中将显示如下: 指向www.125jz.com的链接 元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertext reference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。
在上例中,属性href的值为“http://www.125jz.com”,这是125建站网网站的完整地址,也被称作URL(统一资源定位符)。注意,在URL里必须包含“http://”。“指向www.125jz.com的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</a>。

如何在同一网站的网页之间添加相互链接?

如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。这样,page1.htm到page2.htm的链接将如下所示:

例2:

<a href="page2.htm">点击这里转到第2页</a>

如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样:

例3:

<a href="subfolder/page2.htm">点击这里转到第2页</a>

反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:

例4:

<a href="../page1.htm">转到第1页</a>

“../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。同理,当前位置的上上级文件夹可用“../../”表示。
明白其中的规则了吗?当然,如果给出完整URL也行。

如果要在一个网页内做链接怎么办呢?

你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。这可以通过使用id属性和“#”符号来实现。
用id属性标出要被指向的元素。例如:

<h1 id="heading1">标题1</h1>

然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。例如:

<a href="#heading1">转到标题1</a>

来看一个例子就明白了:

例5:

<html> 
<head></head>
<body>
<p><a href="#heading1">转到标题1</a></p>
<p><a href="#heading2">转到标题2</a></p>
<h1 id="heading1">标题1</h1><p>一些文字。。。。</p>
<h1 id="heading2">标题2</h1><p>一些文字。。。。</p>  
</body>
</html>

该例在浏览器中将显示如下(你可以试试看点击这两个链接):

转到标题1 

转到标题2

标题1

一些文字。。。

标题2

一些文字。。。
(注:id属性必须以字母开头)

除了网页,链接还能指向什么?

你还可以为e-mail地址做链接,方法跟为网页做链接差不多:

例6:

<a href="mailto:nobody@125jz.com">给nobody@125jz.com发电子邮件</a>

该例在浏览器中将显示如下: 给nobody@125jz.com发电子邮件 与指向网页的链接的唯一区别在于:指向e-mail地址的链接必须以mailto:开头,然后紧接着写e-mail地址。当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收件人地址为链接中指定的e-mail地址。注意:这一功能仅当你的计算机安装了e-mail程序后才起作用。试试看吧!

有其他我需要知道的属性吗?

创建链接总要用到href属性。另外,你也可以在链接上使用title属性:

例7:

<a href="http://www.125jz.com/" title="上125jz.com网站学习HTML">125jz.com</a>

该例在浏览器中将显示如下: 125jz.com title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上125jz.com网站学习HTML”便会出现。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/485.html

(11)
江山如画的头像江山如画管理团队
上一篇 2018年1月20日 下午1:51
下一篇 2018年1月20日 下午3:05

99%的人还看了以下文章

  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.7K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    5.4K0
  • HTML5- Canvas入门(二)画线并设置颜色

    HTML5- Canvas入门(一)画线 上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢? 答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧: <canvas id=”myCanvas” width=”200″ height=”200″ s…

    2022年7月10日 网页制作
    3.8K0
  • 如何单独设置打印网页的样式

    做项目,有些网页需要打印,很多时候,是导出WORD或EXCEL再打印。 现在需要页面直接打印,方便没有安装OFFICE的用户。 需求:页面在浏览器中浏览是一种样式,要打印这个页面,是另一种样式。 解决方法:用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    2019年2月15日
    1.6K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    3.4K0
  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    4.1K1

发表回复

登录后才能评论