html之插入圖片
阿新 • • 發佈：2019-02-08
GIF、JPEG、PNG是最符合在網頁設計中使用的格式，但是要想將它們呈現在網頁中，必須將它們連結在網頁，這是通過HTML中新增到圖片的路徑連結來實現的。
使用html中的img可以實現該功能
圖片的源地址(src屬性)
<img src="檔案路徑">實戰：
結果：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <body> <img src="file:///C|/Users/hasee/Pictures/12.jpg" /> </body> </html>
也可以使用絕對路徑，載入網頁上的圖片地址也可以
圖片大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <img src="file:///C|/Users/hasee/Pictures/12.jpg" width="100" height="200" > <img src="file:///C|/Users/hasee/Pictures/12.jpg" width="50%" height="50%" > <body> </body> </html>
前面那個是具體大小後者是螢幕佔比。
圖片的說明(title屬性)
title屬性是對圖片的文字說明，如果滑鼠放在圖片上稍作停留，title屬性的值就會以浮動的形式顯示出來<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <img src="../Pictures/12.jpg" title="daydayup" width="50%" height="50%" > <body> </body> </html>
圖片的備註說明（alt屬性）
alt屬性用於連結的圖片不存在的情況，或者一些使用者為了提高瀏覽速度而關閉了圖片下載，alt很重要<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<img src="../Picture/12.jpg" title="daydayup" alt="hello" width="50%" height="50%" >
<body>
</body>
</html>
