HOME

基本語法
HTML 概述
HTML & WWW
HTML 簡介
HTML 元素
HTML 基本標示
HTML 字元型式
HTML 字元實體
HTML 連結
HTML 框架
HTML 表格
HTML 排列
HTML 字型與輸入
HTML 圖片
HTML 背景

進階語法
HTML 版面
HTML 字型
HTML 4.0 Why
HTML 型式Styles
HTML 頭部Head
HTML 頭部資料
HTML URL
HTML 程式指令
HTML 傳送檔案

範例練習及參考資料
HTML 練習例子
W3C 線上測驗
HTML 快速列表
HTML 標示列表
HTML 屬性
HTML 事件
HTML ASCII
HTML URL轉檔
HTML 字元實體
HTML 顏色
HTML 顏色值
HTML 顏色名稱
HTML HTTP

HTML 圖片

有了 HTML 你可以在文件上顯示圖片.

例子

插入圖片
此例說明如何在網頁上顯示你的圖片.

從不同的地方插入圖片
此例說明如何從別的檔案資料匣或別的伺服器將圖片顯示在你網頁中

(你可以在本頁下方找到更多例子)

在HTML, 圖片是設定成 <img> 標示.

在 <img> 標示是空的, 這表示它只有包含屬性，所以並沒有結束標示。

要在網頁上顯示一個圖片, 你需要使用 "src" 屬性. Src 代表來源檔 "source". src 屬性的值就是你要顯示在你網頁上照片的路徑

設定圖片的語法是：

<img src="url">

URL (Uniform Resource Locators) 指向儲存圖片的位置. 有個圖片名為 "boat.gif" 在"www.w3schools.com"的目錄 "images" 它的 URL是: http://www.w3schools.com/images/boat.gif.

瀏覽器將圖片放在文件圖片標示的位置如果你將圖片放在二個段落之中瀏覽器會先顯示第第一個段落、圖片，然後是第二個段落.

在圖片裏，轉換 (alt) 屬性是用來設定轉換語法 "alternate text" . 轉換屬性的值是由網頁編輯者設定的文件t:

<img src="boat.gif" alt="Big Boat">

如果瀏覽器不能下載圖片，轉換 "alt" 屬性告訴使用者，他們在網頁上漏掉了什麼。瀏覽器之後會顯示轉換文字來代替圖片。對只有文字瀏覽器的人們而言，要改進顯示你的無效網頁，在網頁上將每個圖片設成轉換屬性是很好的練習，

如果一個 HTML 檔案包含十個圖片, 在它右邊就要顯示十一個檔案，下載圖片也要花時間，故我的建議是使用圖片應小心.

Tag	Description
<img>	插入圖片,通常伴隨著連結路徑，例如<a href="路徑"><img src="檔案位置">
<map>	規畫圖片裏的區域
<area>	在圖片裏設定某個區域