（二）深刻了解超文本

时间 2019-11-12

标签深刻了解超文本繁體版

原文原文链接

1.给网页增长超连接须要使用元素，格式相似:html

<a href="AAAA.html">BBBB</a>

其中，经过href属性指定的“AAAA”为指向的目标文件，"BBBB"为可点击的连接文本。python

2.利用属性能够指定元素的附加信息，其写法都是同样的，即属性名+等于号+双引号以及双引号内的属性值。不要偷懒省略双引号。less

4.为了更好地后期维护，有必要对相关资源进行整理、分组。譬如本章例子中，能够按 about、beverages、images来分类，其中directions.html放在"about"文件夹中，elixir.html放在"beverages"文件夹中，图片放在"images"文件夹中。分类方式不是惟一的，能够根据具体状况具体分类ide

5.在文件移动后需更改超文本连接即元素，不然没法读取相关信息。追踪下级目录写法相似以下：网站

<a href="beverages/elixir.html">elixirs</a>

相似的，向上追溯父文件夹时，用".."即两个点来追溯，上行几回就几个两点，格式以下：ui

<a href="../Lounge.html">Back to the Lounge</a>

另外，分隔符（"/"）与操做系统无关，均为斜线。this

图像的处理相似，格式即为：spa

<img src="../images/green.jpg" />

<img src="images/drinks.gif" />

6.为网站选择的文件和文件名中不要含有空格操作系统

7.练习A：路径游戏code

初始文件	路径	目标文件
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>