做家乡网站,江苏省建设考试网站准考证打印,杭州知名的网站制作策略,旅游网站建设实施方案多媒体标签运用
在HTML中有以下常见多媒体标签#xff1a; img #xff08;图像标签#xff09; - 作用#xff1a;用于在网页中嵌入图像。 - 示例#xff1a; img srcimage.jpg alt这是一张图片 。其中 src 属性指定图像的…多媒体标签运用
在HTML中有以下常见多媒体标签 img 图像标签 - 作用用于在网页中嵌入图像。 - 示例 img srcimage.jpg alt这是一张图片 。其中 src 属性指定图像的路径可以是相对路径或绝对路径 alt 属性用于在图像无法显示时提供替代文本这对搜索引擎优化和无障碍访问很重要。 audio 音频标签 - 作用在网页中嵌入音频内容。 - 示例 audio controls srcmusic.mp3/audio 。 controls 属性会在浏览器中显示音频播放控件如播放/暂停按钮、音量调节等。 src 属性指定音频文件的路径。它还可以包含多个 source 标签来提供不同格式的音频文件以兼容不同浏览器。 video 视频标签 - 作用用于在网页中嵌入视频。 - 示例 video width320 height240 controlssource srcmovie.mp4 typevideo/mp4source srcmovie.ogg typevideo/ogg您的浏览器不支持视频播放。/video 。 width 和 height 属性用于设置视频播放器的尺寸 controls 属性显示视频播放控件。和 audio 标签一样可以通过 source 标签来指定多种格式的视频文件。最后在标签内的文本是当浏览器不支持视频播放时显示的内容。 效果图 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
styleimg{zoom: 0.3;/* 该标签将图片按比例缩小当然也可以按比例放大 *//* 控制图片大小还可以用宽度和高度 */}
/style
bodyaudio src.\audio\汪苏泷 - 小星星.mp3 controls autoplay loop/audiobr!-- loop 循环播放 --!-- controls 控制播放 --!-- autoplay 自动播放 大部分浏览器自动屏蔽了 --video src../视频/share_945f1f4c4a246f6caaa5bb845edcef1b.mp4controls loop width500px height300px/videobrvideo width500px height300px controls loopsource src../视频/share_9c55a587df40b711a9180099cee946d4.mp4/videobrimg src../相片/006lmXQBgy1hr8ld3qw2dj30j60j6dv0.jpg alt/body
/html
图片热区的设置
在HTML中 usemap 属性主要用于将图像 img 标签或者对象 object 标签与客户端图像映射 map 标签相关联。 1. 创建图像映射 map 标签 - 首先要定义一个图像映射区域例如
第一步
map namemyMaparea shaperect coords0,0,100,100 hrefpage1.html alt区域1area shapecircle coords150,150,50 hrefpage2.html alt区域2
/map - 在 map 标签中 name 属性用于给图像映射命名这里命名为 myMap 。 - area 标签用于定义图像映射中的可点击区域。 shape 属性定义区域形状如矩形 rect 、圆形 circle 、多边形 poly coords 属性根据形状定义坐标对于矩形是左上角和右下角坐标圆形是圆心和半径坐标等 href 属性指定点击该区域后的链接目标 alt 属性提供替代文本。 2. 关联图像与图像映射 usemap 属性 第二步 - 然后使用 usemap 属性将图像和图像映射关联起来例如
img srcyour_image.jpg usemap#myMap alt带有映射的图像 - 这里的 usemap 属性值为 #myMap 其中 # 符号后面的 myMap 要和前面定义的 map 标签的 name 属性值相对应。这样当用户点击图像中定义的区域时就会跳转到相应的链接目标。
注意图像热区中的坐标以该图片为准比如一张长方形的图片左上角的坐标为0,0不是以窗口页面的坐标为基准。
