HTML 影象標籤 img src title width height border alt 使用語法及其操作
阿新 • • 發佈：2021-01-23
技術標籤：HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>影象標籤的使用</h1> <img src = "1.png"> <!-- img 表示記講插入一張照片 --> <!-- src 圖片的屬性，將圖片與 .html 檔案放到同一個資料夾中，然後就可以引用過來 --> <h1>alt 是替換文字 當圖片無法進行正常的顯示的時候，會進行使用文字進行人替換</h1> <img src = "imag11.png" alt = "這是一個風景畫" /> <!-- title 文字 提示文字，滑鼠放在影象上，顯示的文字 --> <h1>title 文字 提示文字，滑鼠放在影象上，顯示的文字</h1> <img src = "1.png" alt = "這是一個風景畫" title = "這是一個風景畫" > <!-- alt 與 title區別 alt 當圖片載入失敗 出現的文字 --> <!-- tltle 在網頁中，只要滑鼠經過圖片，就會展示圖片的名稱 --> <!-- width 調節影象的大小 --> <br /><br /><br /> <h1>使用 width 進行影象大小的調節</h1> <img src = "1.png" alt = "這是一個風景畫" title = "這是一個風景畫" width = "1000"> <!-- height調節高度 --> <!-- 一般情況下只改一個長度或者寬度，防止出現變形 --> <h1>使用 heigh 進行影象大小的調節</h1> <img src = "1.png" alt = "這是一個風景畫" title = "這是一個風景畫" height = "1000" width = "1000"> <!-- border 加一個邊框 --> <h1>title border</h1> <img src = "1.png" alt = "這是一個風景畫" title = "這是一個風景畫" border ="20"> </body> </html>
影象標籤注意事項及重點理解
src 屬性必須寫 為了說明圖片的位置
alt（影象不顯示時，漢字的說明） 和 title（滑鼠放上去的說明）