（二）深入了解超文本

最新推荐文章于 2023-12-23 11:07:11 发布

weixin_34342905

最新推荐文章于 2023-12-23 11:07:11 发布

阅读量68

点赞数

原文链接：https://my.oschina.net/u/2297516/blog/689920

版权

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/u/2297516/blog/689920