好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

第8课:链接

梦哥 2019-03-14 技术教程 0 评论

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


如何做链接?做链接也是通过元素(element)实现的。做链接只需一个元素和一个属性就行了。下面是一个例子,它是一个指向qja6.cn的链接:


例1:


<a href=“http://www.qja6.cn“>这是一个指向qja6.cn的链接</a>


该例在浏览器中将显示如下:


这是一个指向qja6.cn的链接

元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertext reference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。


在上例中,属性href的值为“http://www.qja6.cn”,这是qja6.cn网站的完整地址,也被称作url(统一资源定位符)。注意,在URL里必须包含“http://”。“这是一个指向qja6.cn的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</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:964497800@QQ.com>给964497800@qq.com发电子邮件</a>


该例在浏览器中将显示如下:


给soft@cnzz.cn发电子邮件


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


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

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


例7:


<a href=“http://www.qja6.cn/“ title=“上qja6.cn网站学习HTML“>cnzz.cn</a>


该例在浏览器中将显示如下:


qja6.cn


title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上qja6.cn网站学习HTML”便会出现

[

< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证