這次的內容也會分成兩個部分來教學，
那今天要來學習如何在網頁上設定連結及顯示項目清單！

首先要來說明連結的設定，
連結可說是網頁必備的元素。
使用者只要點擊文字或影像，就能跳轉至其他網頁，擴大網站的範圍。

設定連結

• 用 < a > 標籤設定連結

  要建立連結時，是使用 <a href=""> 與 </a> 標籤包夾想設定連結的元素，
  利用 href 屬性設定連結目標。設定連結目標時，可以比照之前學過的路徑寫法。
  如果是要連結到其他網站的 URL，一定要在開頭加上「http://」或「https://」。
  如果只有寫出「google.com.tw」或「www.google.com.tw」，會變成無效的連結，點選了也無法跳轉。
  下圖是在文字上設定連結，完成後按下「Google」文字即可跳轉到設定的網頁。
  
  
  • 在預設狀態下，有設定連結的文字會顯示為藍色文字，並且會加上底線。

• 在影像上設定連結
  與昨天說明過的 < img > 標籤搭配組合，即可在影像上設定連結。
  只要用 < a > 標籤包夾 < img > 標籤，就能建立連結，讓使用者在點擊影像後，即可跳轉到指定的網頁。
  

• 按連結寄出電子郵件
  如果希望讓訪客按下連結後可以寄電子郵件給站方，
  請在 href 屬性描述「mailto:」，接著再輸入站方的電子郵件帳號。
  使用者點擊連結後，就會啟動他預設使用的電子郵件軟體，
  並在「收件者」欄位自動輸入指定的電子郵件帳號。
  
  實際畫面
  
  

• 小小知識：把連結的目標網頁顯示在其他分頁
  如果沒有特定設定，按下連結後會直接跳至連結的網頁(必須按瀏覽器的「上一頁」鈕才能回到原來的頁面)。
  如果能預先將 target 屬性的值設定成「_blank」，就能把連結的目標網頁顯示在瀏覽器的其他分頁。

範例

<a href="https://www.google.com.tw/" target="_blank">Google</a>

實際畫面

• 不過，用其他分頁顯示連結目標有好有壞。
  也有人認為應該讓使用者自行決定要以何種方式開啟連結。
  如果在設計網頁時使用 target 屬性指定開啟連結的方法，會讓使用者無法選擇。
  如果要這麼做，建議衡量其實用性。

後半段要學習的是顯示項目清單，
常在網頁上看到前面附加一個黑點或圖案的項目清單，一般稱為含項目符號的條列式清單或編號清單。
接下來就來學習用來製作這種清單的標籤。

顯示項目清單

• 用「< ul > 標籤＋ < li > 標籤」建立條列式清單

  使用 < ul > 標籤可以顯示條列式清單。
  「ul」是「Unordered List」的縮寫，意思就是「沒有指定順序的清單」。
  但如果只寫出 < ul > 標籤還無法顯示清單，
  還要在 < ul > 標籤內使用 < li > 標籤，才能增加清單內的項目。
  「li」是「List Item」的縮寫，意思就是變成條列式的項目。

  可以使用多個 < li > 標籤，請根據想顯示的項目數量建立清單。
  
  

  • 設定成條列式清單的每個項目，前面都會自動加上一個黑點圖示並縮排。

• 用「< ol > 標籤＋ < li > 標籤」建立編號清單

  前面提到 < ul > 標籤是用來建立「沒有指定順序的清單」，
  如果想建立有確定順序的清單，就要使用 < ol > 標籤。
  < ol > 是「Ordered List」的縮寫，意思就是「已決定順序的清單」。
  < ol > 寫法和 < ul > 標籤一樣，我們可以在 < ol > 標籤內使用 < li > 標籤建立清單中的項目，
  這些項目顯示在網頁上時，前面會加上數字編號。
  
  

  • 每個項目前面會依序加上數字。

• 小小知識：如何用瀏覽器檢視網頁的 HTML 原始碼
  我們在看別人的網站時，如果想要知道該網站是怎麼寫的，可以透過瀏覽器瀏覽 HTML 的原始碼。
  以 Chrome 瀏覽器為例，開啟網頁後，按下滑鼠右鍵，執行「檢視網頁原始碼」命令，
  就會以新分頁顯示該網頁的 HTML 原始碼。
  這樣就可以看到該網頁的結構，當作自己製作網站時的參考。

看完了今天的內容，希望對於學習如何設定連結及顯示項目清單能夠有更進一步的了解！
隨著天數的增加，我們學到的知識也更多了！

那麼我是沒魚，這是我的第十天，也終於來到第十天了...

<上一篇> [Day9]插入影像
<下一篇> [Day11]製作表格