上篇介紹了很多結構文字內容的元素，今天就來介紹些引入外部資源的常用元素吧。

<img>

在HTML裡，我們用<img>來嵌入圖片，它不需要結束標籤。

<img src="./image/pig.png">

• src屬性

  必須有src屬性才能指定要嵌入的圖片。

  指定的方式有兩種：

  • 絕對路徑

    絕對路徑是把檔案所在的路徑固定住，它無法隨著檔案位置的變換而改變靈活改變路徑讀取。

    1. mac/desktop//work/web/image/pig.png

       從上列路徑來看，瀏覽器一定得以下圖的路徑讀到圖片。
       

    2. http://www.hello.edu/pig.png 雲端空間hello上的圖片檔

       

    在搜尋引擎找到想要的圖片，按右鍵選取「複製圖片位址」可以得到圖片的URL。但若是需要圖檔，還是找開放資源的圖片來源比較好。

  • 相對路徑

    相對路徑是相對於現在所在的目錄(也就是所在的檔案夾)，通常我們都是以該html檔所在的位置為起點，來讀取以它為基準的相對位置。

    • . 代表當前的目錄

    • ./image/pig.png 代表同一層目錄中的image內的pig.png圖片檔。

      

    • ../image/pig.png代表上一層目錄中的image目錄下的pig.png檔

      

      寫成相對路徑的好處是，就算之後整個專案換了位置，只要起始檔與目標檔案的相對位置沒變，瀏覽器還能夠找到該圖檔。但如果是絕對位置，一旦檔案位置改變，就一定得修改路徑描述了。

• alt屬性

  • 該屬性用來說明圖片的內容。

  • 非必須輸入的屬性。但是在瀏覽器讀取圖片資訊時，有它會讓圖片的語意更清楚。

  • 當網頁無法順利顯示嵌入的圖片時，alt的說明文字可以提供使用者第二個管道，來了解該圖片的內容是什麼。
    像是這樣：
    

  • 既然如此，那麼為圖片增加說明，最好能夠清楚表達圖片的意涵，而不要是語意不清楚的一串字。比方“一隻可愛的粉紅小豬”比“pig.png“來得更好。

      <img src="./image/pig.png alt="一隻可愛的粉紅小豬">
    

<input>

<input>元素不需要結束標籤。我們用它建立一個輸入框，讓使用者可以輸入內容，透過該互動取得使用者輸入的資料。以下是常用到的類型。

type屬性與placeholder屬性

• type屬性用來指定與使用者互動的目的 ; 而placeholder屬性用來輸入框內的說明文字，在使用者輸入內容之前，會顯示在框內提醒使用者輸入的正確內容。下列為常見的參數：

  • text，通常用在留言、發表意見等純文字的內容。

      <input type="text" placeholder="留言">
    

    

  • email，通常用在輸入email的內容。

      <input type="email">
    

    

  • checkbox，通常用在讓使用者勾選項目的時候。(可以複選)

      <input type="checkbox"> <span>帶狗散步</span>
      <input type="checkbox"> <span>幫阿嬤熱晚餐</span>
      <input type="checkbox"> <span>幫阿嬤鋪床</span>
    

    

  • radio，通常用在讓使用者選擇項目的時候，通常用在非黑即白的選擇中。(只能單選)

      <input type="radio"> <span>已成年</span>
      <input type="radio"> <span>未成年</span>
    

    

  上列為常用到的，該屬性(attribute)還有很多種屬性值(value)，請見MDN

<button>

<button>元素用來建立可以給使用者點擊的按鈕，需要結束標籤，於起始標籤和結束標籤之間輸入內容，就會顯示在按鈕內。它有其預設的樣式與類型：

<button type="submit">確認送出</button>

<button>元素的type屬性預設為submit，該屬性值指定這個button按下去，瀏覽器就會接收資料，並傳送給指定位置。

<a>

<a>是超連結元素，需要結束標籤，於起始標籤和結束標籤之間輸入文字，該連結就會顯示這個文字以供點擊，並導航至其他址列位置。

<a href="http://www.google.com.tw">Google</a>

也可以把圖篇當成連結點擊對象(該結果僅是截圖，無法點擊，若要看效果可以自己練習哦！)：

<a href="http://www.google.com.tw">
	<img src="./image/google_logo.png">
</a>

今天就列舉以上一般網頁常用到的互動元素，筆記就到這邊，那麼明天雲端再會～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。