Head First HTML 与 CSS（第二版）学习笔记（2）深入了解超文本_head first html与css第二版网盘-优快云博客

本文介绍了如何在HTML中使用<a>元素创建超链接，并详细解释了相对路径的概念及其实现方法。通过实例展示了如何正确设置链接目标和图片路径。

Head First休闲室，全新改良

给Lounge.html添加超链接，指向两个新页面。

在http://wickedlysmart.com/hfhtmlcss书的源代码文件里找到给的directions.html和elixir.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="elixir.html">elixirs</a>,<!-- 要创建链接，需要用到<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>

增加超链接的Lounge。效果图

出现两个可单击的链接。

了解属性

利用属性可以指定一个元素的附加信息。

<style type="text/css">type属性指定我们使用哪一种样式语言
<a href="irule.html">href属性告诉我们一个超链接的目标文件
<img src="sweetphoto.gif">src属性指定一个img标记显示的图像的文件名

属性的写法都是一样的：首先是属性名，后面是一个等于号，然后是用双引号括起来的属性值。双引号不能丢。

elixir.html和directions.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 chamomile 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 in 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>
  </body>
</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>
  </body>
</html>

将文件打包