十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
多媒体标记
创新互联公司专注于德宏州企业网站建设,响应式网站建设,成都商城网站开发。德宏州网站建设公司,为德宏州等地区提供建站服务。全流程按需定制制作,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务在html中可以使用多媒体标记来在网页上播放音频文件,或者显示一些好看的图片用来装饰网页。Flash文件也可以通过相应的标记显示在网页上,
video里需要嵌套source标签来指定视频文件的路径,或者网址路径。source里有两个属性:src和type,前者是用于指定视频文件的地址,后者是指定视频文件的格式,例如mp4、wave、webm等等。
video里常用的属性有width:设置视频在页面上的宽度,height:设置视频在页面上的高度,autoplay:设置视频自动播放,也就是当网页打开就自动播放视频,loop:设置循环播放,controls:设置将视频的控制面板显示出来,src:也可以用来指定视频文件的地址。
示例:
运行结果:
这是Chrome浏览器上的效果,每个浏览器的控制面板会有区别。
思维导图:
audio里也有autoplay、loop、autoplay属性,这些属性代表的意义和video里的属性是一样的。
示例:
运行结果:
思维导图:
接下来是标签,这是用于在网页上显示图片的标签,其中的src属性不用说也知道是用来指定图片文件的路径的,img里也有width和height属性,但是在img里一般只设置其中一个。因为有一个特性:只设置其中一个浏览器就会自动调整图片宽高的比例,两个都一起设置的话就要计算好图片的比例,不然图片比例不对看起来就是扭曲的,不设置height和width属性就会按照图片原本的比例显示。
示例:
运行结果:
alt属性,此属性可以指定在图片加载失败的时候显示一些文字,例如我把图片路径弄错一下,实现这个效果:
运行结果:
align属性,这个属性之前也多次用到过,在img里将这个属性的值设置为left的话,文字就可以在图片旁边显示,可以使用vspace调整图片与文字的上下间隔,hspace则可以调整图片与文字的左右间隔。
示例:
运行结果:
像新闻或者某些有图片的文章就会用到这种效果。
热点标记:在img标签还有一个应用:设置图片热点,当你点击图片中的热点时就会跳转到指定的页面中。一个图片设置了热点的话,你鼠标移动到热点的位置就会变成一个小手。
给图片设置热点需要使用map和area标签,map需要设置一下name属性,然后img标签里的usemap属性指定map里name属性的值,usemap的值需要在前面加上一个#符号。
area是嵌套在map标签里的,area用于设置热点的形状、大小、跳转的页面等等,shape属性是用来设置热点的形状的,可以选择以下几种形状:
coords则是用来设置热点的大小,和超链接一样使用href来设置跳转页面,area里还可以使用target属性。
示例:
运行结果:
可以看到图片上有个正方形的形状,这是因为我点击了一下热点,所以显示出了形状,如果没有点击的话,是不会出现任何形状的,就好像什么都没有一样。