盒模型的定位

图片元素

• 使用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轴）