html 图像 音频与视频

图像

核心元素—img

• 特性介绍

特性	解释
src	指明图像的地址(URL)可以是相对地址也可以是绝对地址
alt	对图片的描述(当图像加载不出来的时候,会用alt的值来取代图像)
height width	设置图像的长与宽
align(弃用)	设置网页中图像的位置
border(弃用)	设置框(css中用border代替)
hapace vspace	控制周围的空白数
ismap usemap	用于图像映射
longdesc	指定包含图像详细描述的文档
name(弃用)	用id特性替代

用图像做为链接

代码演示(用的是相对URL)

<a href="https://www.baidu.com/" title="点击打开百度搜索"><img src="logo.jpg" alt="百度logo"></a>

图片的映射

代码演示

    <img src="图片/haizeiwang.jpg" alt="海贼王海报" width="400" height="300" usemap="#海贼王">
    <map name="海贼王">
        <area shape="rect" coords="0,0,100,300" href="https://www.baidu.com/baidu?isource=infinity&iname=baidu&itype=web&tn=98012088_9_dg&ch=7&ie=utf-8&wd=%E7%B4%A2%E9%9A%86" alt="索隆" target="_blank">
        <area shape="rect" coords="100,0,200,300" href="https://www.baidu.com/baidu?isource=infinity&iname=baidu&itype=web&tn=98012088_9_dg&ch=7&ie=utf-8&wd=%E8%B7%AF%E9%A3%9E" alt="路飞" target="_blank">
        <area shape="rect" coords="200,0,300,300" href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&ch=7&tn=98012088_9_dg&wd=%E7%BD%97&oq=%25E8%25B7%25AF%25E9%25A3%259E&rsv_pq=d460bf910006a172&rsv_t=7f94ghYG9pLElGe7%2BhuVBpGwczntopy0EMJW3z%2BMvQX8IF%2FJh69rLBmM7qpUTQW5l4DyVQ&rqlang=cn&rsv_enter=0&rsv_sug3=8&rsv_sug1=11&rsv_sug7=100&prefixsug=%25E7%25BD%2597&rsp=0&inputT=11024&rsv_sug4=11533" alt="罗" target="_blank">
        <area shape="rect" coords="300,0,400,300" href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&ch=7&tn=98012088_9_dg&wd=%E5%B1%B1%E6%B2%BB&oq=%25E7%25BD%2597&rsv_pq=ba4b784000018d1a&rsv_t=81e6A1hj%2FmoDTu1%2FleML29jSJ3zfUMpsFXmgNnombE6v5Hx1TVseA6ZYDl0gp%2BBtBwR%2FLA&rqlang=cn&rsv_enter=0&inputT=1771&rsv_sug3=18&rsv_sug1=20&rsv_sug7=100&rsv_sug2=0&rsv_sug4=40346" alt="山治" target="_blank">
    </map>

点击图片中的不同人物会打开到不同的链接(如点击路飞的会打开到路飞的百度链接)

代码解释

img特性插入一个图片,usemap使用name叫海贼王的map的图片映射设置.而area设置指定的位置和链接到的位置

shape指定类型(rect表示矩形 poly表示多边形 circ表示圆形)
coodrs表示具体的位置(矩形的4个点 分别表示左上点 和右下点 圆形的表示 前两个数是圆心的位置 第三个是半径 多边形的话要把所有点的位置都写上去)
href 表示链接到的位置

视频与音频

视频

代码演示(第一种)

        <object width="425" height="344">
            <param name="movie" value="视频/英雄时刻_20181005-15点21分16s.swf"></param>
            <param name="allowFullScreen" value="true"></param>
            <param name="allowscriptaccess" value="always"></param>
            <embed src="视频/英雄时刻_20181005-15点21分16s.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
        </object>

完全可以运行

不过有好多格式的都无法进行播放,不知道是我电脑问题还是其他原因(用不同格式.swf文件来播放其他格式的文件)

代码演示(第二种)

<video src="视频/bbb.webm" autoplay="autoplay" loop="true" ></video>

代码效果

完全可以运行

但是不知道为什么在谷歌浏览器的时候autoplay 和 loop 特性根本没有效果
但是在搜狗浏览器的时候可以运行

音频

代码(第一种object元素实现)

<object data="音乐/夜空中最亮的星.mp3"  width="300" height="42">
    <param name="src" value="音乐/夜空中最亮的星.mp3">
    <param name="autoplay" value="true">
    <param name="autostart" value="1">
    <embed src="音乐/夜空中最亮的星.mp3" width="300" height="50"></embed>
    </object>
    <!--指不指定类型(type)区别不大-->

代码(第二种)

<audio src="音乐/夜空中最亮的星.mp3" controls="true" loop="true" width="300" height="50"></audio>
<!--代码少而且效果更好-->