HTML CSS: Meeting the “HT” in HTML

HYPERTEXT??????

“超文本”是超级文本的中文缩写。超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，目前最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式%#……&（）￥#……%#@

简单来理解，就是链接……吧 >-<

建立链接

我们再上一章中建立了starbuzz.html文件，本章的内容主要学习如何建立从sterbuzz.html另外两个网页(elixir.html和directoty.html的链接)要建立这样的链接很简单：

使用<a></a>元素

• <a href="elixir.html">elixirs</a>
• <a href="directions.html">detailed directions</a>

其中，href参数是指定网页的具体位置。参数内容需要使用”“引用。<a>的内容“elixirs”和“detailed directions”可在生成的网页中点击

这就实现了链接的建立，更具体语法看书中的例子代码。

理解Attributes（属性、参数）

目前为止，我们碰到了三个元素使用了Attributes

<style type="text/css"><a href="irule.html"><img src="sweetphoto.gif">

通过attributes定义元素的更多属性，有些是必须的，有些则是锦上添花。各个元素有独立的attributes，通过学习语法规则才能正确使用它们，而不是随心所欲地使用

• 发挥你的想象，我们可以将文本内容放入<a>内容里，那是不是也能将图片放入<a>的内容中呢？?

答案是肯定的，我们可以将<img src="sweetphoto.gif">取代elixirs

<a href="directions.html"><img src="sweetphoto.gif"></a>

则网页生成可点击的图片，可连接到特定网页。

组织文件夹

理解工作路径

首先，下载本书的代码和文件，以便我们以后能进行实践操作，下载地址是http://wickedlysmart.com/hfhtmlcss/

工作路径是程序执行时所调用和产生的数据的文件夹地址。在chapter2/lounge中，执行文件“lounge.html”在里面，所以此时的工作路径是lounge.html所在的位置。以我为例，我将代码文件放在桌面，此时lounge.html的工作路径便是

• C:\Users\Administrator\Desktop\hfhtmlcss\chapter2\lounge

因此当我们建立链接时，可令属性href的值为“elixir.html”,意思是命令计算机在当前工作路径上寻找“elixir.html”文件，因为所需图片也是保存与工作路径中，所以我们调用图片时只需输入文件名，如“blue.jpg”。

但是在chapter2另一个文件completelounge中，执行文件lounge.html在这里面，因此此时的工作路径是

• C:\Users\Administrator\Desktop\hfhtmlcss\chapter2\completelounge

这时我们要调用其他网页或图片时要小心了，因为在”lounge”文件夹下还有更多的文件夹——about,beverages和images。如果说/lounge是父文件夹，则about,beverages和images是子文件夹。

所以建立链接时，应该从父文件夹向下搜索，找到子文件夹about和beveages，并在这些子文件夹中找到所需的文件。此时<a>属性href的值应该为“beverages/elixir.html”和“about/directions.html”

图片的引用地址属性src=“images/blue.jpg”

以上，不管是什么情况，都可以使用绝对路径，即

• href=”C:/Users/Administrator/Desktop/hfhtmlcss/chapter2/completelounge/beverages/elixir.html”
• src=”C:/Users/Administrator/Desktop/hfhtmlcss/chapter2/completelounge/images/blue.jpg”

现在我们想在两个子网页(elixir.html和directions.html)中也建立超链接返回主网页(lounge.html)。
当我们执行elixir.html时，工作路径是

• “C:/Users/Administrator/Desktop/hfhtmlcss/chapter2/completelounge/beverages”

我们知道从父文件夹向下搜索子文件夹，那么要如何从子文件夹向上搜索父文件夹呢？

只要在工作路径前面加上..，就能将工作路径从子文件夹变到上一级的父文件夹；

那我们需要子文件夹向上搜索两级的父文件夹呢？

只要在工作路径前面加上../..，就能将工作路径从子文件夹变到上两级的父文件夹；

详细可见书64页。

零散知识

• 在html的语言中，路径的分隔符只能使用/，尽管在不同的操作系统中既能使用/(forward slash)也能使用\(back slash)，但在web中一律使用/。