【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML img

現在任何網站上都會出現許多豐富的圖片,但你知道他是怎麼放到網站上的嗎?

其實只需要加上一行指令就可以完成!

如果想知道絕對不能錯過這次 HTML img 介紹!

本篇內容包含 :

  • HTML img 是什麼?
  • img 怎麼用?
  • img 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML img 是什麼?

img 介紹

HTML img 是一個插入圖片的標籤語法,幫助網頁增加色彩與豐富度,有時也可以利用圖片取代文字,讓文章內容更加詳細完整

而 img 標籤語法也可以配合 CSS來調整樣式,加上框線、陰影或調整寬度高度等等

img 範例影片 (英文版)





img 屬性

img 只有起始標籤,沒有結束標籤,然後裡面會有一些必要或重要的屬性,我在下面一一介紹

src 圖片來源

第一個屬性「 src 」是最重要也必要的,放的內容就是圖片的來源,可以是資料夾路徑或網址,只要來源安全基本上對網站或文章不會有影響

HTML img
src 圖片來源


alt 替代文字

alt 替代文字主要是讓瀏覽器(google、yahoo)可以知道這張圖片是代表什麼東西,因為瀏覽器看不懂圖片,因此我們需要用替代文字來描述

還有另外一種用途,就是當圖片失效時,會變成顯示你設定的替代文字

而 alt 替代文字是可有可無的,但是建議要有,因為對於SEO會有幫助!

alt 屬性
alt 替代文字


title 文字標示

title 文字標示簡單來說就是圖片的標題,設定之後當鼠標移動到圖片上,會自動跳出文字方塊,顯示你設定的內容

title 文字標示可以設定和 alt 替代文字一樣沒關係,主要就是讓別人辨識這張圖片代表的意思

title屬性
title 文字標示


width 圖片寬度、height 圖片高度

width 是調整圖片的寬度,但是如果調整比例沒有和高度配合好,圖片會變得非常奇怪,再加上現在都是響應式網頁

如果調整固定寬度或高度可能會在某種裝置上顯示異常,因此這兩種屬性不建議調整

寬度高度屬性
width 圖片寬度、height 圖片高度



img 怎麼用?

img 只有起始標籤沒有結束標籤,他的寫法為「 <img src=”圖片來源”> 」,以下會介紹加入其他屬性的範例

src 屬性 (一定要有)

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <img src="./img/stupidnote_logo_200.png">
    
</body>
</html>
src範例程式碼
src 範例程式碼

輸出結果

src輸出結果
src 輸出結果


加上 alt 替代文字

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <img src="./img/stupidnote_logo_200.png" alt="笨蛋雜記logo">
    
</body>
</html>
alt範例程式碼
alt 範例程式碼

輸出結果

為了示範成功加入alt,這邊我故意將上面的範例程式碼裡面的src路徑改成錯誤的路徑,這樣網頁就會偵測到錯誤,然後跑出替代文字

alt輸出結果
alt 輸出結果


加上 title 文字標示

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <img src="./img/stupidnote_logo_200.png" title="笨蛋雜記logo">
    
</body>
</html>
title範例程式碼
title 範例程式碼

輸出結果

title輸出結果
title 輸出結果


加上 width 寬度、height 高度

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <img src="./img/stupidnote_logo_200.png" width="50px" height="50px">
    
</body>
</html>
寬度高度範例程式碼
width、height 範例程式碼

輸出結果

這邊 logo 原本是 200*200 大小,上方程式碼我將它改為 50*50 ,因此顯示結果會縮小

寬度高度輸出結果
width、height 輸出結果



img 的 Q&A

Q1 : 可以在網頁或文章放很多個 img 嗎?

A1 :

當然可以!你想要放幾張就幾張,但要切記圖片來源還有清晰度,方便讓讀者瀏覽


Q2 : img 可以放影片嗎?

A2 :

不可以,img 只接受 .jpg、.png、.gif 等等圖片類型的檔案,如果是要影片的話建議使用 iframe 標籤樣式,iframe 之後也會做介紹!


Q3 : img 的屬性除了 src 要放,其他不放會怎樣嗎?

A3 :

不會怎樣,但是建議 alt 替代文字和 title 文字標示可以放一下,對於SEO或是使用者體驗會比較好



總結

img 在網頁或文章中可以扮演著代替文字說明的角色,可以用精緻的圖片表示一件事情或說法

是一個很棒的傳遞資訊方式,因此 img 標籤會非常頻繁的出現

希望這篇有幫助到不懂 img 標籤語法的讀者,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top