从零开始学05 — 互联网最重要——网页链接
超链接标签<a>应该是HTML中最最重要的一个标签了,正是因为有超链接把网页内容连接起来,才成就今天的互联网,它值得我们深入学习一下。我们也通过<a>标签把关于HTML标签知识整理一下。
我们通过创建一个链接来说明标签结构:
归纳一下,HTML标签基本结构可以总结如下:
<标签 属性1="属性值1" 属性2="属性值2" 属性3="属性值3" ... >内容</标签>
<标签 属性1="属性值1" 属性2="属性值2" 属性3="属性值3" ... />
第一种是完整标签形态,即具备开始标签和结束标签;第二种是单标签的情况,比如定义图像:<img src="example.jpg" />
所以学习HTML标签你所要掌握的就是:有哪些标签,它们常用的属性和值都是什么含义。
那么对于上面的<a>标签,常用属性是href和target,href指示链接目标,表示点击文字“访问设计兵团”要跳转到/;target表示链接打开方式,值为"_blank"表示新窗口打开。href不仅仅可以链接网址,还可以链接到另一个网页,看下面两个网页文件:
index.html
<html> <head> <title>这是我第一个网页</title> </head> <body> <h1>还记得吗?这是我的第一个网页</h1> <p>现在我加了链接</p> <p><a href="thesecond.html">访问第二个网页</a></p> </body> </html>
thesecond.html
<html> <head> <title>第二个网页</title> </head> <body> <h2>这是第二个页面</h2> <p>现在我在测试两个页面相互链接</p> <p><a href="index.html">返回到第一个网页</a></p> </body> </html>
将两个文件分别另存为.html,注意:两个文件必须在同一目录。
当你点击index.html浏览时,会看到文字“访问第二个网页”已经是链接了,单击以后会出现第二个页面,当单击第二个页面的“返回到第一个网页”时,你就回到了第一个网页。
再次强调:要用记事本手动敲一遍哦。
实际应用时,未必两个网页文件都在同一目录,这时怎么办呢?这里引入绝对路径和相对路径的概念:
绝对路径像是唯一的门牌号,你只要看着路径就能知道目标在哪,比如/,你访问的是设计兵团首页,这一网址不会有其他网站,/zh/index.html就是设计兵团网站zh目录下的index.html文件;
相对路径一般是指两个文件,一个文件相对另一个文件的位置,比如上面示例的两个文件,index.html和thesecond.html,假设thesecond.html在project目录下,两个链接如何写呢?这时要修改index.html的链接href="project/thesecond.html",修改thesecond.html返回链接href="../index.html",试试看!
这里总结一下相对路径和绝对路径:
网络路径总是用“/”间隔的,而windows本地路径却是用“\”:D:\andy\super\d7w\index.html,你在本地双击打开网页时,是用浏览器本地打开的!
相对路径中../指代上一层目录,同理,../../是上上层目录!修改上面的两个文件试试吧!
链接是有多种形式,比如图片链接:<a href="index.html"><img src="example.jpg" /></a>实际就是<a>标签和<img>标签的嵌套,注意<img>的src属性是图片地址,相对路径和绝对路径同样适用。
超链接的其他形式我就不一一详解了,网上有丰富的资料,建议多找多练,把超链接的各种形式都试一试。
小练习:
1.百度百科搜索超链接,详细阅读下该词条
2.熟练运用超链接,链接至少三个页面。