01
Jan

从零开始学05 — 互联网最重要——网页链接

超链接标签<a>应该是HTML中最最重要的一个标签了,正是因为有超链接把网页内容连接起来,才成就今天的互联网,它值得我们深入学习一下。我们也通过<a>标签把关于HTML标签知识整理一下。

我们通过创建一个链接来说明标签结构:


01.png

归纳一下,HTML标签基本结构可以总结如下:

  1. <标签 属性1="属性值1" 属性2="属性值2"  属性3="属性值3" ... >内容</标签>

  2. <标签 属性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",试试看!

这里总结一下相对路径和绝对路径:

  1. 网络路径总是用“/”间隔的,而windows本地路径却是用“\”:D:\andy\super\d7w\index.html,你在本地双击打开网页时,是用浏览器本地打开的!

  2. 相对路径中../指代上一层目录,同理,../../是上上层目录!修改上面的两个文件试试吧!


链接是有多种形式,比如图片链接:<a href="index.html"><img src="example.jpg" /></a>实际就是<a>标签和<img>标签的嵌套,注意<img>的src属性是图片地址,相对路径和绝对路径同样适用。


超链接的其他形式我就不一一详解了,网上有丰富的资料,建议多找多练,把超链接的各种形式都试一试。



小练习:

1.百度百科搜索超链接,详细阅读下该词条

2.熟练运用超链接,链接至少三个页面。


About Me

Nothing is impossible!

Friends
倩倩的网站儿子的网站秦兽兽丽丽Lieme
CATEGORIES
Tags
SSL证书认知障碍Docker春天行政区域名列表域名体系nginxopen_basedir思维指令编程语言程序URL网站上线域名FTP云服务器搜索引擎JSCSS网页超链接聚合内容列表元素网页构成网站的构成网站的分类网站单标签HTML第一个网页简单网页博域科技2018香山春游AJAX字体PHP升级
Copyright©2020 王阳 版权所有  京ICP备14005672号-6