在HTML文件中標記圖片

圖片（image）是網頁最常見的內容形式之一，製作網頁的人勢必要了解在HTML文件中置入圖片的方法。本文介紹<img>標記的基本用法。

*<img>標記是少數單一不成對的HTML標記，意思就是不必使用</img>這樣的結尾。（另一個常見的不成對的標記是<br>。）
*想要在網頁中呈現一張圖片，只要使用<img>標記，並且在單箭頭內寫明必要的屬性即可。
*必須注意的是，<img>本身沒有「換行」的作用。如果想要確切限定圖片的位置，在<img>標記的前後，要用<p>或<div>這類標記，再加上CSS的設定來調整。
*.html文件是純文本檔案，並不直接儲存或夾帶圖片，而是以文本記錄「圖片儲存的位置」，讓瀏覽器知道去哪裡抓取，然後在網頁上顯示。
*常見的網頁圖片格式有.jpg, .png, .gif三種。


src屬性：圖片在哪裡？

*src的意思是「來源」（source），在<img>標記中用來說明圖片的「位置」和「名稱」。
*在.html文件中標記圖片的基本方式：<img src="http://www.abcd.com/xxx.jpg">（圖片網址的寫法變化見注1。）


alt屬性：圖片的別稱

*alt的意思是alternative（替代）。當圖片在網頁中因故無法正常顯示時（例如圖片網址寫錯、圖片被移除），有些瀏覽器會在圖片原本的位置，顯示alt設定的文字。
寫法：<img src="rainbow.jpg" alt="Rainbow">
*在最新版的HTML規則（HTML5）中，alt被視為「必備」的屬性。


width和height屬性

*width和height屬性是用來注明圖片「在瀏覽器中顯示的寬度和高度」，單位是像素（pixel，簡寫為px）。
HTML標記法：<img src="http://www.abcd.com/images/drink.jpg" width="400" height="300">
CSS標記法：<img src="http://www.abcd.com/images/drink.jpg" style="width: 400px; height: 300px;">
*這裡的width和height是代表在網頁中顯示的尺寸，不是指圖片原始的尺寸。
*加上寬度和高度屬性的好處是，瀏覽器可以明確「知道」要用多大的規格來顯示圖片。
*width和height可以自己設定，但記得要兩個都寫明。如果指定了具體寬度，高度可以用height="auto"來表示，圖片的比例就會跟原始圖片相同。
*上傳的圖片原始檔案若太大，會拖慢瀏覽器加載的速度，顯示的效果也不好。此時如果只是指定比較小的width和height，加載速度還是一樣慢。若要加快加載速度，必須先把圖片檔案縮小再上傳到網站。


圖片置中或齊左？

在網頁中插入圖片後，必然會考慮理想的擺放位置。以下是最基礎的設定。
如果沒有特別設定，圖片會自動齊左：<div><img src="http://www.abcd.com/cool.jpg"></div>
如果想要讓圖片置中，可以用text-align的CSS樣式設定來達成：<div style="text-align: center;"><img src="http://www.abcd.com/cool.jpg"></div>



注1：圖片網址的表示方式

a. 如果圖片位於某個網站伺服器上，只要寫出圖片所在的網址即可調用。
   例如：<img src="http://www.abcd.com/images/rainbow.jpg">

b. 如果圖片位於本地（電腦），則需寫出正確的相對位置。
例如：<img src="rainbow.jpg">，圖片與本.html文件在同一個文件夾內。
例如：<img src="images/rainbow.jpg">，圖片位於本.html文件同層的images文件夾內。
例如：<img src="../rainbow.jpg">，圖片位於本.html文件上層的文件夾內。
例如：<img src="../images/rainbow.jpg">，圖片位於本.html文件上層的images文件夾內。
*兩個點 ".." 代表向上一層，到父文件夾。
*不同文件夾的層級，要用 / 符號來分隔。

c. 如果圖片位於同一個網站內部，則以上兩種圖片位址的表示法都可以使用。