盒模型的定位

圖片元素

• 使用img
• 製做圖片超連接
• 使用figure和figcaption表示圖片單元
• 圖片等比例縮放只需設置一個值寬或者高
• 在css樣式表中引用背景圖片使用聲明塊background-image:url("路徑")

使用標籤img

• src屬性：圖片路徑
• alt屬性：圖片沒法顯示時使用的替代文字，關鍵字搜索引擎
• title屬性：鼠標懸停時顯示的文字

製做圖片超連接

• 製做圖片部分區域的超連接，點擊圖片不一樣位置到不一樣的頁面，使用父元素map和area子元素，配合img使用<img usemap="#a" src="" alt="" title="" /> <map name="a" id="a"> <area shape="" coords="" href=" " alt=" "/></map>
• shap:點擊區域的形狀（矩形rectangle/圓形circle/多邊形poly）
• href：形狀的連接地址
• coords：形狀的位置（矩形位置是兩個對角座標xy，圓形的位置是圓形位置xy和半徑）
• 爲了解決兼容性name和id都要添加

使用figure和figcaption

• 父級元素：figure
• 子級元素：img和figcaption
• figcaption是對img的解釋或相關內容

插入視頻

• 標籤video
• 布爾值：controls播放，autoplay自動播放 loop循環播放

實現雪碧圖的步驟（非塊級元素包含）

1. 給尺寸（寬，高）
2. 引用位置（background-image）
3. 給位置（background-position：X軸 Y軸）