7-1 嵌入圖片<img>元素

這個元素沒有結(jié)束標，它的使用格式如下：

    <img src="圖片的URL" alt="替代的文字"
height="像素" width="像素">

□ src

src指圖片名稱或是圖片的URL。HTML5可以接受的圖片格式有GIF、PNG、JPG，或是SVG、PDF文件。

□ alt

當圖片因某些原因無法顯示時，在圖片位置可以列出此屬性設(shè)定的文字。則如果省略這個屬性，則當圖片無法顯示時，圖片位置將以取代。

□ height/width

height是圖片的高度，單位是px（pixel），此值必須大于0；width是圖片的寬度，單位是px，此值必須大于0。如果所設(shè)定的值與真實圖片大小不符，則瀏覽器會強制縮放圖片。如果省略這兩個屬性，則依圖片實際大小顯示。

程序?qū)嵗齝h7_1.html：輸出圖片的應用。這個程序會將圖片輸出兩次，第一次指定寬度和高度，第二次不指定。在執(zhí)行這個程序前，本程序所在的ch7文件夾內(nèi)一定要有sselogo.jpg文件才可以正常執(zhí)行。

執(zhí)行結(jié)果

程序?qū)嵗齝h7_2.html：測試alt屬性。筆者故意寫錯文件名，所以無法正常輸出圖片。

執(zhí)行結(jié)果

這個程序會在執(zhí)行第10行輸出第一個圖片sse.jpg時，因為本程序所在的ch7文件夾沒有sse.jpg文件，所以此圖片文件名錯誤。由于沒有alt屬性指示輸出替換文字，所以只能輸出。上述程序第12行要輸出第二個圖片sse.jpg，而本程序所在的ch7文件夾中沒有sse.jpg，所以出現(xiàn)圖片文件名錯誤。因為本指令使用了alt屬性指示輸出替換文字，所以輸出了和替換文字“SSE Logo輸出錯誤”。