一起学WEB（四）链接——把你的网页连成网站_将登录页面和网页面链接在一起-CSDN博客

本文链接：https://blog.csdn.net/FebWaltz/article/details/54695522

链接——把你的网页连成网站

上一次我们了解了CSS的基本用法，之前我们也对HTML做了介绍，其实有了这些我们就已经掌握了开发WEB的基本方法。这次让我们为网页加上链接，让他可以在不同的页面之间跳转，使你的网站不在局限于一个页面之内。听起来是不是像那么回事。

说到链接，他用<a>表示。举个例子，下面是一个完整的链接：

<a href=”www.baidu.com”>Go to Baidu</a>

这就是一个链接，或者说一个<a>元素，他带有一个属性href，即要跳转到的目的地址，他的值可以是一个URL（统一资源定位符），也可以是一个相对位置。典型的URL由一个协议、一个网站名和一个资源的绝对位置组成（也可像上面例子那样）。上面这个链接显示的文本为“Go to Baidu”，点击的话直接跳转到百度首页（www.baidu.com）。一般如果需要跳转到其他网站就使用URL，如果在网站内部进行跳转则使用相对位置。

下面我们来看今天的例子，他是在第二讲的例子基础上扩展的，先看看首页（lounge.html）的代码：

<html>
	<head>
		<title>Head First Lounge</title>
	</head>
	<body>
		<h1>Welcome to the New and Improved Head First Lounge</h1>
		<img src="drinks.gif">
		<p>
			Join us any evening for refreshing <a href="elixir.html">elixirs</a>,
			conversation and maybe a game or two of <em>Dance Dance Revolution</em>.
			Wireless access is always provided;
			BYOWS (Bring your own Web server).
		</p>
		<h2>Directions</h2>
		<p>
			You'll find us right in the center of downtown Webville. 
			If you need help finding us, check out 
			our <a href="directions.html">detailed directions</a>.
			Come join us!
		</p>
	</body>
<html>

与以前的代码相比，我们增加了一部分文本（如第6行，这不重要），还在第9行与第18行加入了两个链接，这两个链接分别指向一个HTML文件，通过他实现了主页到子页面的跳转。

下面讲讲两个子页面的代码。

<html>
	<head>
		<title>Head First Lounge Elixirs</title>
	</head>

	<body>
		<h1>Our Elixirs</h1>

		<h2>Green Tea Cooler</h2>
		<p>
			<img src="green.jpg">
			Chock full of vitamins and minerals, this elixir combines 
			the healthful benefits of green tea with 
			a twist of chamonile blossoms and ginger root.
		</p>

		<h2>Raspberry Ice Concentration</h2>
		<p>
			<img src="lightblue.jpg">
			Combining raspberry juice with lemon grass, 
			citrus peel and rosehips, this icy drink 
			will make your mind feel clear and crisp.
		</p>
		
		<h2>Blueberry Bliss Elixir</h2>
		<p>
			<img src="blue.jpg">
			Blueberries and cherry essence mixed into a base of 
			elderflower herb tea will put you in a relaxed state 
			of bliss int no time.
		</p>

		<h2>Cranberry Antioxidant Blast</h2>
		<p>
			<img src="red.jpg">
			Wake up to the flavors of cranberry and hibiscus in 
			this vitamin C rich elixir.
		</p>

		<p>
			<a href="lounge.html">Back to the Lounge</a>
		</p>
	</body>
</html>

elixir.html代码

通过代码可以发现这个页面除了含有一个返回主页用的链接，还含有很多图片，以现在的书写方法，网页所含图片需要与html文件存放着同一文件夹下（所需图片及代码素材可通过此处下载http://download.csdn.net/detail/febwaltz/9743889），下次再讲资源定位，重新进行页面资源的组织。

<html>
	<head>
		<title>Head First Lounge Directions</title>
	</head>

	<body>
		<h1>Directions</h1>
		<p>Take the 305 S exit to Webvill - go 0.4 mi</p>
		<p>Continue on 305 - go 12 mi</p>
		<p>Turn right at Structure Ave N - go 0.6 mi</p>
		<p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
		<p>Turn right at Structure Ave N - go 0.7 mi</p>
		<p>continue on Structure Ave S - go 0.2 mi</p>
		<p>Turn right at SW Presentation Way - go 0.0 mi</p>

		<p>
			<a href="lounge.html">Back to the Lounge</a>
		</p>
	</body>
</html>

directions.html代码

这个网页就非常平常了，只含有一个返回主页的链接。

把以上HTML及图片资源都保存在一个文件夹下，通过浏览器打开页面点击链接，是不是可以实现网页之间的跳转了。