前端HTML5学习2(新增多媒体标签,H5的兼容性处理)

前端HTML5学习2新增多媒体标签,H5的兼容性处理)

  • 分清标签和属性
  • 新增多媒体标签
    • 新增视频标签
    • 新增音频标签
    • 新增全局属性
  • H5的兼容性处理

分清标签和属性

标签(HTML元素)和属性,标签定义了内容的类型或结构,而属性则用于提供有关如何展示或处理这些内容的额外信息。在HTML中,标签是用来包裹内容并定义其类型的,而属性可以用于控制标签的行为或样式。
标签:HTML标签用于定义文档中的各种元素,如段落、标题、图像、视频等。标签通常由尖括号 < > 包围,如

用于定义段落。

属性:属性是标签的附加信息,它们提供了有关如何展现或处理标签内容的额外细节,属性位于标签的起始标签内,并以名称/值对的形式出现,如 src=“image.jpg”。

通过给标签添加属性,咱们可以控制标签的外观、行为和其他方面。
例如:
<img> 标签

属性:
src:指定图像文件的 URL。
alt:定义图像的替代文本,用于屏幕阅读器或无法加载图像时显示。
示例:

<img src="image.jpg" alt="A beautiful sunset">

新增多媒体标签

新增视频标签

video 标签用于在网页中嵌入视频内容。通过 video 标签,您可以向用户展示在线视频,并具有一些可定制的控制选项。

在这里插入图片描述
示例

  <video 
  src="movie.mp4" 
  width="400" 
  controls 
  muted 
  autoplay 
  loop="1" 
  poster="../HTML-study/欧买噶.jpg" 
  preload="auto">
  </video>

新增音频标签

audio 标签用于在网页中嵌入音频内容。通过 audio 标签,您可以添加音频文件并控制其播放。

在这里插入图片描述

新增全局属性

在CSS中,全局属性是一组适用于所有CSS属性的属性,可以应用于任何CSS规则。
在这里插入图片描述

H5的兼容性处理

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/579524.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RocketMQ 消息重复消费

现象 触发消息后&#xff0c;在1s内收到了两次消息消费的日志。 消息消费日志重复&#xff0c;reconsumeTimes0&#xff0c;主机实例也不同&#xff0c;说明是同一条消息被消费了两次 分析 生产者发送消息的时候使用了重试机制&#xff0c;发送消息后由于网络原因没有收到MQ…

永磁同步电机PMSM负载状态估计simulink模型

永磁同步电机PMSM负载状态估计simulink模型&#xff0c;龙伯格观测器&#xff0c;各种卡尔曼滤波器&#xff0c;矢量控制&#xff0c;坐标变换&#xff0c;永磁同步电机负载转矩估计&#xff0c;pmsm负载转矩测量&#xff0c;负载预测&#xff0c;转矩预测的matlab/simulink仿真…

【C++】---STL容器适配器之queue

【C】---STL容器适配器之queue 一、队列1、队列的性质 二、队列类1、队列的构造2、empty()3、push()4、pop()5、size()6、front()7、back() 三、队列的模拟实现1、头文件&#xff08;底层&#xff1a;deque&#xff09;2、测试文件3、底层&#xff1a;list 一、队列 1、队列的…

【NR RedCap】Release 18标准中对5G RedCap的增强

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

R语言贝叶斯方法在生态环境领域中的应用

贝叶斯统计已经被广泛应用到物理学、生态学、心理学、计算机、哲学等各个学术领域&#xff0c;其火爆程度已经跨越了学术圈&#xff0c;如促使其自成统计江湖一派的贝叶斯定理在热播美剧《The Big Bang Theory》中都要秀一把。贝叶斯统计学即贝叶斯学派是一门基本思想与传统基于…

使用微信开发者工具模拟微信小程序定位

哈喽&#xff0c;各位同僚们&#xff0c;我们平时在测试微信小程序的时候&#xff0c;如果小程序中有获取定位或者地图的功能&#xff0c;测试场景中常常需要去模拟不同的位置&#xff0c;例如我们模拟在电子围栏的外面、里面和边界区域等。那么&#xff0c;我们如何在模拟微信…

[笔试训练](八)

目录 022&#xff1a;求最小公倍数 023&#xff1a;数组中的最长连续子序列 024&#xff1a;字母收集 022&#xff1a;求最小公倍数 求最小公倍数_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 求最小公倍数公式&#xff1a;lcm(a,b)a*b/gcd(a,b)&am…

创建springboot项目的问题

IDEA搭建spring boot时报错Error: Request failed with status code 400 Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom:3.2.5.RELEASE in alimaven (http://maven.aliyun.com/nexus/content/repositories/central/) 原因是父级依赖的版本…

Web前端开发 小实训(一) 成绩分类统计

用于学生web前端开发课程实训练习&#xff0c;掌握基本语法和数据类型 实训目的 使用分支语句&#xff0c;完成分数统计与等级对比,通过输入框输入分数&#xff0c;可以根据分数多少划分等级。 参考思路&#xff1a; 分析题目&#xff1a;根据输入分数进行等级划分。 操作过…

yolov8 dll 编译

1. 每次用yolo v8 都要用python &#xff0c;对于我这种写软件的太不方便了&#xff0c;下面尝试编译dll 调用, 我已经有做好的模型.best.pt 参考视频方法: yolov8 TensorRT C 部署_哔哩哔哩_bilibili 【yolov8】tensorrt部署保姆级教程&#xff0c;c版_哔哩哔哩_bilibili 需…

怎么做视频二维码更方便?在线一键生成视频活码二维码

现在经常会发现很多的二维码可以用来展示视频内容&#xff0c;通过这种方式来实现视频的快速分享与传播。二维码是一种成本低传播快的内容传播方式&#xff0c;很多的内容都可以通过生成二维码的方式来分享给其他人&#xff0c;可以同时扫描相同的二维码来获取内容&#xff0c;…

电脑的无用设置功能(建议关闭)

目录 1、传递优化 ​2、常规​ 3、电源 1、传递优化 2、常规3、电源

Vue2和Vue3的生命周期对比

beforeCreate 、created 两个钩子被setup()钩子来替代。 所有生命周期前面加了on

【Kotlin】Channel简介

1 前言 Channel 是一个并发安全的阻塞队列&#xff0c;可以通过 send 函数往队列中塞入数据&#xff0c;通过 receive 函数从队列中取出数据。 当队列被塞满时&#xff0c;send 函数将被挂起&#xff0c;直到队列有空闲缓存&#xff1b;当队列空闲时&#xff0c;receive 函数将…

PotatoPie 4.0 实验教程(41) —— FPGA实现RISC-V 扩展 GPIO UART Timer功能

TD工程介绍 我们提供的TD工程里的RISC-V核默认就开启了GPIO UART扩展&#xff0c;可以看到还有SPI和I2C扩展。因此后面的实验中TD的工程我们基本不怎么修改TD的内容&#xff0c;只需要修改TD工具中Soc_Top.v文件中的TCM0_INITFILE为FD生成的固件名称即可&#xff0c;主要修我以…

数据集市的详细建设方案!

▶ 什么是数据集市&#xff1f; 数据集市是处理单一事务的数据仓库的子集。它们通常由单个业务部门构建和管理。由于它们是面向主题的&#xff0c;因此通常仅从少数来源获取数据&#xff0c;这些来源可能是内部操作系统&#xff0c; 数据湖&#xff0c;一个集中的 数据存储库&a…

c++理论篇(一) ——浅谈tcp缓存与tcp的分包与粘包

介绍 在网络通讯中,Linux系统为每一个socket创建了接收缓冲区与发送缓冲区,对于TCP协议来说,这两个缓冲区是必须的.应用程序在调用send/recv函数时,Linux内核会把数据从应用进程拷贝到socket的发送缓冲区中,应用程序在调用recv/read函数时,内核把接收缓冲区中的数据拷贝到应用…

Android 设置头像 - 相册拍照

Android开发在个人信息管理中&#xff0c;如果设置头像&#xff0c;一般都提供了从相册选择和拍照两种方式。下午将针对设置用户头像相册和拍照两种方式的具体实现进行详细说明。 在实际实现过程中需要使用到权限管理&#xff0c;新版本的Android需要动态申请权限&#xff0c;权…

rabbitmq下载安装最新版本--并添加开机启动图文详解!!

一、简介 RabbitMQ是一个开源的遵循AMQP协议实现的消息中间件支持多种客户端语言,用于分布式系统中存储和转发消息, 这是 Release RabbitMQ 3.13.0 rabbitmq/rabbitmq-server GitHub 二、安装前准备 1、查看自己系统 确认操作系统版本兼容性 uname -a2、下载Erlang依赖包…

【12580无线通信技术】第十一章 Ad hoc网络无线通信技术期末复习自考复习

第十一章 Ad hoc网络无线通信技术 P283&#xff08;名词&#xff09;Ad hoc技术&#xff1a;是一种特定的无线网络结构&#xff0c;强调的是多跳、自组织、无中心的概念。P285&#xff08;简答&#xff09;Ad hoc网络的特点:①自组织和无中心特性&#xff1b;②网络拓补动态变…
最新文章