iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0

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

<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的說明文字可以提供使用者第二個管道,來了解該圖片的內容是什麼。
      像是這樣:
      image 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>

今天就列舉以上一般網頁常用到的互動元素,筆記就到這邊,那麼明天雲端再會~/images/emoticon/emoticon41.gif

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


上一篇
Day7 動手寫HTML(2)
下一篇
Day9 動手寫HTML(4)
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言