【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明

这篇具有很好参考价值的文章主要介绍了【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、图片标签

在介绍图片标签之前,首先可以了解一下图片的格式。

1、jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图;

2、gif:支持的颜色比较少,支持简单透明,支持动图;

3、png:支持的颜色丰富,支持复杂透明,不支持动图;

4、webp:是谷歌新推出的专门用来表示网页中图片的一种格式,具备其他格式的所有优点,占用内存还小,但是兼容性不好。

图片标签通过使用<img>标签引入外部图片,img标签属于替换元素,也就是基于块元素和行内元素之间,具有两种元素的特点。

img标签常用的属性有:

src属性:指定外部图片的路径;

alt属性:图片的描述,当浏览器在图片无法加载时会显示,且搜索引擎会根据alt中的内容来识别图片;

width属性和height属性:当width和height只修改一个时,另一个会遵循等比例缩放原则;

二、音频标签

<audio>标签支持的三种格式有:MP3、Wav、Ogg。

audio标签常用的属性有:

src属性:通过src引入外部音频标签;

autoplay属性:自动播放音频;

controls属性:音频控件,在页面中显示播放器;

loop属性:自动循环播放;

source属性:媒体元素,定义媒体资源,允许规定两个音频文件供浏览器根据浏览器本身对音频文件类型或编解码器的支持进行选择。

三、视频标签

<video>标签可以将外部视频文件引入。

video标签常用属性有:大部分属性和audio标签类似,还有一些自身特有的属性;

比如可以通过为video标签设置width和height来控制视频文件的大小,还可以通过poster属性来设置用户在点击播放按钮前播放器中显示的图片。

【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明 

 文章来源地址https://www.toymoban.com/news/detail-404260.html

到了这里,关于【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 音视频基础概念(5)——音频基础说明

    现实生活中,音频(Audio)主要用在两大场景中,包括语音(Voice)和音乐(Music)。语音主要用于沟通,如打电话等。目前由于语音识别技术的发展,人机语音交互也是语音的一个应用方向,很多大厂推出智能音箱、语音助手等。音乐主要用于欣赏和陶冶情操,如播放音乐。

    2023年04月08日
    浏览(85)
  • Vue3 - 超详细 “纯前端“ 将文件上传到阿里云 OSS 对象存储,最新阿里云 SDK 上传音频、视频、图片、文档、office 等(保姆级详细示例源码教程,每行代码都有注释小白一看就懂)

    网上的教程大部分都过时了,各种不规范的写法五花八门(各种文件引入关系贼难改),对于新手来说真的无从下手。 本文站在新手的角度, 在 vue3 项目开发中,超详细 “纯前端(无需后端)” 上传各种图片图像、文档、音视频文件、压缩包到阿里云oss存储,利用 SDK 前端

    2024年02月03日
    浏览(30)
  • markdown插入图片、音频视频

    Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown 编写的文档后缀为 .md , .markdown 简单易学容易上手,十分钟左右即可上手 有助于作者专心写作(各种在线博客编辑坑太多,文档丢失、广告太多,可移植性差) 我们在写博客的时候总免

    2024年02月03日
    浏览(38)
  • 1-web前端 基础标签 、图片、超链接

    vscode 编译器下载地址: https://code.visualstudio.com/ 1、下载完vscode后安装的三个小插件:chinese(中文)、live serve、会了吧(翻译) 2、每个打开的网络页面都有html编码,可以进行编码查询和编码检查 3、vscode的三种创建编码文件的方式 4、html网页结构 5、注释:ctrl+/ 6、标题标签只

    2024年02月08日
    浏览(46)
  • 【前端web入门第一天】02 HTML图片标签 超链接标签

    文章目录: 1.HTML图片标签 1.1 图像标签-基本使用 1.2 图像标签-属性 1.3 路径 1.3.1 相对路径 1.3.2 绝对路径 2.超链接标签 3.音频标签 4.视频标签 作用:在网页中插入图片。 src用于指定图像的位置和名称,是的必须属性。 本地图片的使用 图片拖拽到文件夹里 前两个属性是重点,后两

    2024年01月25日
    浏览(34)
  • video标签设置了autoplay,自带音频的视频在谷歌浏览器仍无法自动播放

    原因分析:谷歌浏览器可以自动播放视频,不能自动播放音频。如果视频中自带音频就会导致该视频无法自动播放。 解决办法:在video标签加上静音属性muted,自带音频的视频就可以自动播放了,但是该视频无声音。 备注:1、这是谷歌浏览器自身的问题。2、Safari浏览器可正

    2024年02月12日
    浏览(44)
  • html中图片、音乐、视频标签及选择器、背景

    目录 图片 音乐 视频 子代选择器 交集选择器 背景 文章主要补充之前html文章一些漏洞:HTML常用标签+表格+表单_小俱的一步步的博客-CSDN博客 在VScode中新创建html文件,!+“Tab”键,自动生成html骨架 图片 img src=\\\"图片相对地址\\\"/img      属性: alt:替换文本 title:提示文本

    2024年02月07日
    浏览(31)
  • 2-web前端 音频、视频、表格、表单

    1.音频 2.视频   视频,音频通用标签:   3.有序无序列表 有序列表:olli ol内必须是li,li内没限制 无序列表:ulli ul内必须是li,li内没限制 4.表格   th---字体加粗并居中 示例:   案例:个人简历   5.表单   针对表单整理的相关问题: !-- action:行动 提交的地址 服务器地址 后台

    2024年02月08日
    浏览(77)
  • 【实操】python opencv将图片合成视频,并插入音频

    简介:将一组图片合成视频,并插入音频。用到opencv,ffmpy,pydub等库。 目录 一、统一图片大小及类型,并按数字排序 二、图片合成视频 三、音频的合并与剪裁 四、音视频融合 opencv基本使用 python对不同尺寸图像改成同一尺寸图像_自动化所副盐的博客-CSDN博客 如何将多张图

    2024年01月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包