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

ops/2024/10/18 22:32:00/

前端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.ppmy.cn/ops/26503.html

相关文章

Pytorch 的实际应用 学习笔记

一. 模型的下载 weights为false时则为没有提前经过训练的模型&#xff0c;为true时则经过了提前训练 vgg16_false torchvision.models.vgg16(weightsFalse) vgg16_true torchvision.models.vgg16(weightsTrue) 打印 二. 模型的修改 &#xff08;1&#xff09;添加操作 …

C语言 内存函数

目录 1. memcpy - 复制2. memmove - 可重叠复制3. memset - 填充内存4. memcmp - 比较内存 正文开始 本篇文章所讲函数均需引用头文件string.h>>>详情戳我 1. memcpy - 复制 memcpy 函数用于将一个缓冲区复制到另一个 void* memcpy( void *dest, const void *src, siz…

每日算法之二叉树的层序遍历

题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; &#xfffc; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]] 示…

YOLOv5入门(二)处理自己数据集(标签统计、数据集划分、数据增强)

上一节中我们讲到如何使用Labelimg工具标注自己的数据集&#xff0c;链接&#xff1a;YOLOv5利用Labelimg标注自己数据集&#xff0c;完成1658张数据集的预处理&#xff0c;接下来将进一步处理这批数据&#xff0c;通常是先划分再做数据增强。 目录 一、统计txt文件各标签类型…

思考!思考!jmeter线程数≠用户并发数

最近又在搞性能测试了&#xff0c;相较于之前的写脚本出数据就完事&#xff0c;这次深入的思考了一下测试出来的指标&#xff0c;到底有什么意义&#xff1f;&#xff1f;&#xff1f; 绞尽脑汁思考了好几天&#xff0c;终于有了点思路&#xff0c;写出来与大家分享&#xff0…

【Python】指定正负样本在逻辑回归和随机森林模型训练中的重要性

太多的借口 太多的理由 为了爱情 我也背叛了所有 如果你想离开我 就别再畏畏缩缩 太多的借口 太多的理由 别再问我难过时候怎么过 或许会好好地活 或许会消失无踪 你在乎什么 &#x1f3b5; 陈冠蒲《太多》 在机器学习的分类问题中&#xff0c;正确地指定…

vim的IDE进阶之路

一 ctags 1 安装 安装ctags比较简单&#xff0c;我用的是vim-plug&#xff0c;网络上随便一搜应该就有很多教程&#xff0c;而且没有什么坑 2 使用 vim之函数跳转功能_nvim函数跳转-CSDN博客https://blog.csdn.net/ballack_linux/article/details/71036072不过针对cuda程序…

GPT每日面试题—csrf攻击的原理和解决方案

充分利用ChatGPT的优势&#xff0c;帮助我们快速准备前端面试。今日问题&#xff1a;csrf原理和解决方案? Q&#xff1a;如果在前端面试中&#xff0c;被问到csrf原理和解决方案&#xff0c;怎么回答比较好&#xff0c;全面具体的描述一下 A&#xff1a;在前端面试中&#xf…