1.给网页增加超链接需要使用元素,格式类似:
<a href="AAAA.html">BBBB</a>
其中,通过href属性指定的“AAAA”为指向的目标文件,"BBBB"为可点击的链接文本。
2.利用属性可以指定元素的附加信息,其写法都是一样的,即属性名+等于号+双引号以及双引号内的属性值。不要偷懒省略双引号。
4.为了更好地后期维护,有必要对相关资源进行整理、分组。譬如本章例子中,可以按 about、beverages、images来分类,其中directions.html放在"about"文件夹中,elixir.html放在"beverages"文件夹中,图片放在"images"文件夹中。分类方式不是唯一的,可以根据具体情况具体分类
5.在文件移动后需更改超文本链接即元素,否则无法读取相关信息。追踪下级目录写法类似如下:
<a href="beverages/elixir.html">elixirs</a>
类似的,向上追溯父文件夹时,用".."即两个点来追溯,上行几次就几个两点,格式如下:
<a href="../Lounge.html">Back to the Lounge</a>
另外,分隔符("/")与操作系统无关,均为斜线。
图像的处理类似,格式即为:
<img src="../images/green.jpg" />
<img src="images/drinks.gif" />
6.为网站选择的文件和文件名中不要含有空格
7.练习A:路径游戏
初始文件 | 路径 | 目标文件 |
top100.html | genres/genres.html | genres.html |
top100.html | images/logo.gif | logo.gif |
genres.html | ../images/logo.gif | logo.gif |
top100.html | genres/rock/pinkfloyd.html | pinkfloyd.html |
coldplay.html | ../../images/artists/chris.gif | chris.gif |
8.练习B:填字游戏
9.本章源代码:
A. Lounge.html
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="images/drinks.gif">
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or
two of <em>Dance Dance Revolution</em>
Wireless access is always provided;
BROWS (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="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
B. elixir.html
<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p><img src="../images/green.jpg"> Chock full of vitamins and minerals,
this elixir combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.</p>
<h2>Raspberry Ice Concentration</h2>
<p><img src="../images/lightblue.jpg"> Combining raspberry juice with
lemon grass, citrus peel and rosehips, this icy dring will
make your mind feel clear and crisp.</p>
<h2>Blueberry Bliss Elixir</h2>
<p><img src="../images/blue.jpg"> Blueberries and cherry essence mixed
into a base of elderflower herb tea will put you in a relaxed
state of bliss in no time.</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/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>
C. directions.html
<html>
<head>
<title>Head First Lounge Directions</title>
</head>
<body>
<h1>Directions</h1>
<p>Take the 305 S exit to Webville - 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>
<a href="../Lounge.html">Back to the Lounge</a>
</body>
</html>