圖片標籤-台灣醫療網

正體簡體

2025 年 10 月 31 日

首頁

全國院所

站內資料庫

延伸瀏覽

最多瀏覽

https://test.fixs3c.com

【類別】：網路資源 → 網頁*教學

線上諮詢

3667人觀看

回網頁*教學

圖片標籤

在 HTML 中有規定：
圖片的格式必須是 GIF 或 JPG，也就是副檔名必須是 GIF 或 JPG 才行插入在網頁中，比較兩者大小，GIF 的所占的容量較小，JPG 較大，通常，較小的圖片都可以用 GIF 格式的圖檔，較大則用 JPG 格式。
若比較兩者的品質，GIF 的色彩可到 256 色，且支援透明圖，JPG 則到 16 百萬色，不過在網頁中，建議盡量使用 GIF 格式的圖檔，以節省空間。
～標籤語法～
<img src="圖片路徑" alt="替代文字" align="left" border="0" hspace="2" vspace="2" height="25" width="150">

圖片的插入：使用 <img> 標籤
例如我們要插入一個圖片就打入：<img src="/目錄/檔名.gif">
這樣，就可以把圖片放在網頁中了。

另外，<img> 標籤還有一些屬性，可更改圖片的位置、大小、替換文字、圖片間的間隔。
<img src="圖片路徑">：
顯示圖片最基本的方法。
有一點要注意的就是：圖檔檔名大小寫要注意是否和原始碼相同。
因為在硬碟中，不論檔名是大小寫，都能正常顯示。
但傳上了網路之後，大小寫不同可是代表不同的檔案。尤其是副檔名最會出錯！

既然這裡已經提到路徑的問題，那就把絕對路徑和相對路徑的差別先做解釋吧。

絕對路徑：一個檔案在硬碟中的絕對位置。如=>C:/我的網頁/index.htm
相對路徑：被連結檔案相對於主體檔案的位置。如=>index.htm

說的白話一些就是，假設有A檔案在C:/我的網頁/A，B檔案在C:/我的網頁/image/B，那麼前面的描述就是絕對位置。
而A相對於B是在../A，B相對於A是在image/B，這就是相對位置的描述。
其中../表示上一層目錄的意思。
所以做網頁大都是用相對位置。因為網路伺服器上可沒有你的C槽

　　您可以在圖片檔名前加上路徑。如 <img src="picture/image.gif"> 則會出現在 picture 目錄下的 image.gif 這個圖。

基本語法設定
alt 的設定
align 的設定
border 的設定
hspace 和 vspace 的設定
height 和 width 的設定
low src 的設定
範例總覽
<img src="heartbeatWHT.gif">
<img src="heartbeatWHT.gif" alt="腳印"> 移到圖片上看看
<img src="heartbeatWHT.gif" align="right">
<img src="heartbeatWHT.gif" vspace="5">
<img src="heartbeatWHT.gif" hspace="5">
<img src="heartbeatWHT.gif" border="3">
<img src="heartbeatWHT.gif" height="16" width="16">

語法練習

～FrontPage做法～
加入圖片：選擇插入/圖片中的檔案，按瀏覽，指定圖檔的位置。接著點選圖片兩下，在一般中就可以修改圖片設定

※小叮嚀：投稿或引述文章內容請記得註明出處，以示尊重其著作財產權利，倘有疏漏之處也歡迎來信指教，謝謝。

投稿信箱

補充意見

門店升級雲端服務 →全門市電子e化無紙作業系統← 適合*通訊行*醫美診所*實體門市

[推薦評價好店]- 4C快修連鎖門市
專業維修買賣 - 筆電 + 手機 + 電腦 + Iphone + Ipad

新北汐止店
(02) 7751-9182
新北市汐止區福德一路86巷22號
汐止修手機.汐止修iphone.汐止修ipad.汐止修筆電.汐止修電腦
新北板橋店
(02) 8257-3990
新北市板橋區四維路137巷10號
板橋修手機.板橋修iphone.板橋修ipad.板橋修筆電.板橋修電腦
桃園大溪店
0980-870882
桃園市大溪區后尾巷1-2號
大溪修手機.大溪修iphone.大溪修ipad.大溪修筆電.大溪修電腦
台中市區店
(04) 2201-1289
台中市南區台中路140號
台中修手機.台中修iphone.台中修ipad.台中修筆電.台中修電腦

王師父專業牆壁切孔鑽孔引孔工程服務
牆壁鑽孔切割,牆面引孔鑽孔,地板鑽孔切割

台北鑽孔切割
三重鑽孔切割
新莊鑽孔切割
板橋鑽孔切割