003、加入圖片

學習在網頁裡加入圖片和設定大小、學習在網頁裡加入Youtube影片

1、加入圖片:<img>

開啟新檔案:003.html來練習

在網頁中要加入圖片使用<img>標籤

並且設定屬性 src="路徑",這個路徑可以是網址、圖片名稱、目錄/圖片名稱

網頁圖片可以使用 JPG、PNG、GIF 三種檔案,或是其他新的向量圖檔

我們新增一張圖片 1.jpg 在網頁目錄裡

也可以使用線上圖片,路徑是:http://your.tw/kundax/images/html003.jpg


範例1:在網頁中新增一張圖片 1.jpg

<img src="1.jpg">

結果如下圖:


範例2:設定圖片 width寬度 為200px(像素)

<img src="1.jpg" width="200">

結果如下圖:


範例3:建議使用CSS設定圖片大小:寬 width: 300px、高 height: 300px

<img src="1.jpg" style="width: 300px; height: 300px; ">

結果如下圖:

練習

範例1:


shape
shape