Image and audio elements

picture element

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

Make image hyperlinks

在同一个页面点击不同的位置显示不同的页面
使用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>

 

image annotation

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

videovideo audiovudio

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

• If you want to set the width and height of the image, when you want it to be proportionally scaled, then only set its width or only its height; if it is not proportionally scaled, you must reset its width and height.

• Set the background color to the desired image: background-image: url("Path location of the image");

  Steps to implement a sprite map (non-block-level elements include)

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