HTML網頁設計實訓報告總結，HTML5 — 知識總結篇《VII》【圖片元素】

一丶 元素

img 插入圖片

map 地圖
-area（子元素）

HTML網頁設計實訓報告總結。figuer 指代、定義，通常用于把圖片、圖片標題、描述包裹起來
-figcaption（子元素）

二丶 屬性

【1】
img的 src 屬性：source（路徑）

【2】
img的 alt 屬性：當圖片資源失效時，將使用該屬性的文字替代圖片
這個屬性有三種可用場景：

• 服務器那邊不小心把這張圖片刪掉了，那么是無法訪問的到這張圖片的
• 突然斷網了，圖片加載到一半，這時候圖片是損壞狀態，就用這個屬性的文字替代
• 程序員編寫這張圖片的路徑寫錯了，那么肯定訪問不到，這時候也要文字替換掉

【3】

map的 name 屬性：讓map與img產生關聯

HTMLCSS知識點總結。【4】
map的area（子元素）的四大屬性：

• shape 形狀（圓形，矩形，多邊形），圓形—circle，長方形—rect，多邊形—poly
• coords 形狀關鍵點的坐標
• href 點擊這個形狀的鏈接地址
• alt 當圖片掩飾不出來時，文字顯示的內容
• target 點擊鏈接時，是新窗口還是自身的窗口

三丶 圖片鏈接

	<a href=""><img src="....." alit="......"></a>

四丶 img的高級使用

一張圖片要求：點擊木星跳轉到木星鏈接，點擊水星跳轉到水星鏈接，怎么做到？

【1】要讓img元素與map元素產生關聯：

	<a href=""><img usemap="#solarMap" src="....." alit="......"></a><map name="solarMap"></map>

跟錨鏈接原理差不多，不過這里的唯一表示使用的是 name屬性注意！這樣就讓map與img產生了關聯

【2】測量坐標

html5背景圖片，坐標知識點：原點是在圖片的左上角，注意是圖片！！！x向右是增加，y向下增加

注意：量坐標的時候，要使用瀏覽器標準尺寸(%100)，否則會不準確
【3】測量圓形

圓形坐標測量：確定圓心坐標與半徑長度即可 —— 用來量圖形
coords =“360，204，48”，第一個是x坐標，第二個是y坐標，第三個是半徑

【4】測量長方形
長方形測量：確定左上角坐標與右下角坐標即可 —— 用來量文字
coords =“360，204，48，69” ，第一個和第二個參數是左上角坐標，三四是右下角坐標

五丶 figuer 元素（HTML標準）

和figuer元素聯用，這樣是為了增強語義化的編碼規范，讓瀏覽器更好的理解我們的代碼

這樣就可以讓瀏覽器獨棟，這三個 p , h2 , img 這三個元素是有關聯的

六丶 figuer-figcaption子元素（HTML5標準）

html5屬性大全？在HTML5中，推薦使用figcaption子元素包住標題元素，也是增強HTML5語義化標準規范

所以說，只要包住上圖的p元素就可以了，