一起学WEB（四）链接——把你的网页连成网站

来源：互联网发布：java能不能多继承编辑：程序博客网时间：2024/04/29 04:54

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

上一次我们了解了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及图片资源都保存在一个文件夹下，通过浏览器打开页面点击链接，是不是可以实现网页之间的跳转了。

现在我们需要的功能已经实现了，但还存在一个问题，网站的所有资源都存放在同一个文件夹中。现在只有3个网页就已经有十来个文件了，随着网站规模的扩大，这种扁平化的组织结构会非常混乱。最好可以根据资源的种类分类组织，比如HTML文件放在同一个文件夹，图片放在另一个文件夹，就会显得清楚多了。

下一次我们就将如何解决这个问题——资源的组织和定位

下期：更加清晰的组织你的网站资源

0 0

一起学WEB（四） 链接——把你的网页连成网站

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

一起学WEB（四）链接——把你的网页连成网站