（二）深刻了解超文本

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。