HTML+CSS+JS Learning (3) Html5嵌入图片,视频

插入图片与创建分区相应图

<img> 创建图片

    src(地址)

    width(宽度)

    heigth(长度)

    alt(设置图片的备用内容,当图片丢失时告诉用户的备用内容)

<map>

    +<area>:href(点击后加载url) alt(定义图片的备用内容)

            shape(与coords一同作用,coords属性的值解析):rect(矩形区域),circle(圆形区域),poly(六边 形),default(默认,覆盖整张图片,不需要croods值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入</title>
</head>
<body>
<img src="uiico.jpg" usemap="#map1" >
<map name="map1">
    <area href="sunlight.html" shape="circle" coords="1042,690,260" target="_blank" >
    <area>
    <area>
    <area>
    <area>
    <area>
</map>
</body>
</html>

ps:1.位置可以使用<form><input type="image''  src=""></form>获取

       2.注意要通过usemap"#"和name=""将图片引导


插入视频

<video>

     src(导入视频)

     heigth

     witgth

     autoplay(自动播放)

     controls(播放控制)

     preload(预先载入视频):none(不载入)metadata(载入第一帧)auto(默认,请求下载整个视频,可被浏览器忽略)

                                                loop(视频循环播放)poster(视频载入时显示图片,默认为第一帧)muted(视频静音)


 设置视频格式

 在<video></video>中插入<source>

 <source> (防止浏览器不支持此种格式视频,跳转到其他视频格式)

     src

     type :="video/mp4”


阅读更多
个人分类: HTML+CSS+JS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭