语法:

<img src=”图片的路径” alt=”对图片解释的笔墨” width=”” height=”” title=”解释笔墨”/&gt;

实例:

html5图标素材HTML5常见的基本标签四图片和媒体标签 Vue.js

<body>

<!--

img:图片标签,行内标签

src:图片的相对路径

alt:图片加载失落败时的解释

title:鼠标悬停时提示解释

width:宽 px %

height:高 px %

-->

<div>

<img src=\"大众imgs/1.jpg\公众 width=\"大众200\"大众 alt=\"大众这是第一个手机\公众 title=\公众这是第一个手机\"大众/>

<img src=\"大众imgs/2.jpg\"大众 width=\公众200\"大众 alt=\"大众这是第二个手机\"大众 title=\"大众这是第二个手机\"大众/>

</div>

</body>

把稳事变:

1. img 是行内标签,是单标签。

2. 多种图片格式都可以(jpg,bmp,png,gif)

3. 当我们修正图片宽度时,高度会根据图片宽度等比例缩放(反之亦然)

2.audio标签

1.2.1 定义和用法

<audio>定义网页中的声音

语法:

<audio src=”音频文件的路径” autoplay=”autoplay”>

您的浏览器不支持audio标签

</audio>

实例:

<audio src=\"大众imgs/成功.mp3\公众 autoplay=\"大众autoplay\"大众 controls=\"大众controls\"大众>

您的网页不支持音频播放,请升级您浏览器

</audio>

3.Video标签

语法:

<video src=”视频文件路径” controls=”controls”>

您的浏 览器不支持video标签,请升级

</video>

<!--

src:视频文件的路径

controls:视频播放器的掌握条

height:视频控件的高度

poster:视频下载或加载时显示的图像

autoplay:页面加载及播放

-->

<video src=\"大众imgs/video.mp4\"大众 controls=\"大众controls\"大众 height=\"大众400\"大众 poster=\公众imgs/1.jpg\"大众 autoplay=\"大众autoplay\公众>

你的浏览器不支持

</video>

支持的格式:MPEG4、Ogg、MebM

4.Source标签

source标签一样平常用于video标签、audio标签定义媒体资源。
许可视频或音频根据浏览器的兼容性进行选择。

(1).选择得当的视频播放

<video width=\"大众800\"大众 height=\"大众\"大众 controls=\"大众controls\"大众>

<source src=\"大众imgs/video.mp4\公众 type=\"大众video/mp4\公众></source>

<source src=\"大众imgs/video.ogv\公众 type=\公众video/ogg\公众></source>

<source src=\"大众myvideo.webm\"大众 type=\"大众video/webm\公众></source>

<object width=\公众\"大众 height=\公众\"大众 type=\"大众application/x-shockwave-flash\"大众 data=\"大众myvideo.swf\公众>

<param name=\公众movie\"大众 value=\"大众myvideo.swf\"大众 />

<param name=\"大众flashvars\"大众 value=\"大众autostart=true&file=myvideo.swf\公众 />

</object>

当前浏览器不支持 video直接播放,点击这里下载视频: <a href=\"大众myvideo.webm\公众>下载视频</a>

</video>

(2). 选择得当的音频播放

<audio>

<source src=\"大众imgs/video.mp3\公众 type=\"大众audio/mp3\公众></source>

<source src=\"大众imgs/video.mp4\"大众 type=\"大众audio/mp4\"大众></source>

</audio>

视频素材

视频加载中...

欢迎关注我的头条号,我将持续为大家更新web前端学习资料,感激