图片和音频元素

图片元素

使用img元素
1.src属性：图片路径
2.alt属性：图片无法显示时使用的替代文本(关键词)
3.title属性：鼠标悬停时显示的文字

制作图片超链接

在同一个页面点击不同的位置显示不同的页面
使用map和area元素
map是area的父元素

x轴为水平方向
y轴为垂直方向


例：
<div>

    <img  usemap="#a" src="../images/solar.jpg" alt="zhezhangtupianyouwenti" title="这是一张太阳系图片"/>


<!--为了解决兼容性,map需要同时添加name和id属性.-->
<map name="a" id="a">
    <!--
        shape:点击区域的形状(矩形rectangle\圆形circle\多边形poly)
        coords:形状的位置
               矩形:(左上角X轴坐标,左上角Y轴坐标,右下角X轴坐标,右下角Y轴坐标)
               圆形:(圆心点X轴,圆心点Y轴,半径)
        href:形状的链接地址

    -->

    <area shape="rectangle" coords="333,276,391,317" href="index.html" alt=""/>
    <area shape="rectangle" coords="149,238,183,275" href="dingweilianxi.html" alt=""/>
    <area shape="circle" coords="360,206,53" href="kongbaizhedie.html" alt=""/>
</map>

 

图片注释

figure：父级元素
子级元素：figcaption和img
figcaption是对img的解释或相关性内容

视频video 音频vudio

格式：<video scr="视频地址"> </video> 
controls（视频控件）
autoplay（自动播放）
loop（循环播放）

• 如果要对image设置宽高的过程时，想要它等比例缩放的时候，那只设置它的宽或者只设置它的高；如果不是等比例缩放，就要重新设置它的宽和高

• 把背景颜色设置成想要的图片：background-image：url("图片的路径位置");

  实现雪碧图的步骤（非块级元素包含）

  1.给尺寸（宽、高）
  2.引用位置（background-image：url（"图片地址"））
  3.给位置（background-position：x轴 y轴）