1.1.5. 超鏈結 Hyperlink

• 此時我希望 #nav 區塊的鏈結按了以後，#content 區塊的內容就會捲動到相對應的位置。首先要為 #content 區塊中的每一個段落建個並取個 id，讓你 #nav 區塊鏈結按了以後就跳到相對應的區塊（href 你可以把它唸成 hyper reference 比較好記）。

    <div id="content">
        <div id="about">
            <h1>About us</h1>
        </div>
        <div id="members">
            <h1>Members</h1>
        </div>
        <div id="quantifiedself">
            <h1>Quantified-self</h1>
        </div>
        <div id="socialsensing">
            <h1>Social sensing</h1>
        </div>
    </div>
  

• 根據前面的 #content div，#nav 大致如下（你可以用自己想用的id）。我會盡量讓 #nav 中每一個項目的 content 和該 Hyperlink 所指到的 id 一樣。這樣比較好記好管理。

  • 你也可以隨意為 id 取名，唯獨記住 id 要連字，連字建議用底線_，不要用 dash-，日後無論做任何操作都比較不會有問題，但絕對不要有空白。
  • 前面有掛#的這種在 HTML+CSS 中都代表 id
  • 這時候可能超鏈結捲動的狀況會不如預期，這等到 CSS 階段再做修正。

  • 提供模板的設計師通常會先把要放超鏈結的地方標註<a href=”#”>。代表那個地方要插入一個超鏈結。

    <div id="nav">
      <ul>
          <li><a href="#about">About us</a></li>
          <li><a href="#members">Members</a></li>
          <li><a href="#quantifiedself">Quantified-self</a></li>
          <li><a href="#socialsensing">Social sensing</a></li>
      </ul>
    </div>
    

影像作為超鏈結<img>

• 影像本身也可以是 hyperlink，例如我在我的「主資料夾」中的 assets 資料夾裡面放入圖片 16.png。然後我把上面 #about 那一個鏈結的「內容」改為影像如下（src is an attribute, standing for “source”）。

    <li><a href="about"><img src="assets/16.png"></a></li>