前端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.rhkb.cn/news/314971.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS3(响应式布局)

#过渡# 属性连写&#xff1a; transition: width 2s linear 1s; //前一个时间用于表示过渡效果持续时间&#xff0c;后一个时间用于表示过渡效果的延迟。 #转换# #2D转换# 和 #3D转换# 注意&#xff1a;其中angle对应单位为&#xff1a;deg #圆角# #边框# …

RabbitMQ知识点总结(一)

为什么要使用RabbitMQ? 异步&#xff0c;解耦&#xff0c;削峰。 异步 提高效率&#xff1b;一个挂了&#xff0c;另外的服务不受影响。 解耦 增加或减少服务比较方便。 削峰 每天0点到16点&#xff0c;A系统风平浪静&#xff0c;每秒并发数量就100个。结果每次到了16点到…

大语言模型Ollama

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Ollama简介 Ollama是一个开源的大语言模型平台&#xff0c;它允许用户在本地环境中运行、创建和共享大型语言模型。Ollama提供了丰富的功能和特性&#xff0c;使得用户可以…

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

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

Cesium.js(3):Cesium查看器、场景、实体、数据源介绍

1 Cesium的四大类说明 1.1 Viewer查看器类 Viewer是cesium的查看器类&#xff0c;第一个参数是地图主窗口DIV的容器ID&#xff0c;第二个参数option是Viewer的可选设置参数&#xff0c;包含图层、地形时间系统等参数&#xff0c;种类多样&#xff0c;主要作用是对视口中各个组…

unity 专项一 localPosition与anchoredPosition(3D)的区别

一 、RectTransform 概念 1、RectTransform继承自Transform&#xff0c;用于描述矩形的坐标(Position)&#xff0c;尺寸(Size)&#xff0c;锚点(anchor)和中心点(pivot)等信息&#xff0c;每个2D布局下的元素都会自动生成该组件。 2、当我们在处理UI组件时&#xff0c;往往容易…

typescript:vscode的settings配置文件配置ts语法提示

typescript&#xff1a;vscode的settings配置文件配置ts语法提示 1 找到vscode左下角的齿轮按钮 2 点击Settings&#xff08;或者快捷键ctrl,&#xff09;&#xff1a; 点击右上角的Open Settings(JSON)按钮打开配置文件&#xff1a; 或者ctrlshiftp&#xff0c;搜索settings&…

【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts(没有 uni_modules)

这种情况无法直接从 dcloud 平台上一键下载导入&#xff0c;所以应该在官网推荐的 git 仓库去单独下载&#xff1a; https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6/qiun-data-charts(%E9%9D%9Euni_modules) 下载的文件是如图所示的路径&…

STM32单片机C语言模块化编程实战:按键控制LED灯详解与示例

一、开发环境 硬件&#xff1a;正点原子探索者 V3 STM32F407 开发板 单片机&#xff1a;STM32F407ZGT6 Keil版本&#xff1a;5.32 STM32CubeMX版本&#xff1a;6.9.2 STM32Cube MCU Packges版本&#xff1a;STM32F4 V1.27.1 之前介绍了很多关于点灯的方法&#xff0c;比如…

C语言自定义类型【联合体与枚举】

文章目录 1.联合体1.1联合体的声明1.2联合体的特点1.3联合体的大小计算联合体的使用案例 2.枚举2.1枚举类型的声明2.2枚举类型的优点(为什么使用枚举)2.3枚举类型的使用 结语 1.联合体 1.1联合体的声明 和结构体一样&#xff0c;联合体也是由一个或多个成员构成&#xff0c;同…

Docker数据管理与Dockerfile镜像创建

前言 在容器化环境中&#xff0c;如何有效地管理和持久化数据成为了开发人员和运维团队面临的挑战之一&#xff1b;另一方面&#xff0c;镜像的创建是构建容器化应用的基础。优化的镜像设计可以提高部署效率和应用性能&#xff0c;减少资源消耗和运行成本。本文将介绍 Docker …

Java 解决pdfbox转图片显示中文乱码 No glyph for 165 (CID 5752) in font STSong-Light

问题描述&#xff1a; 在开发PDF转JPG图片后&#xff0c;图片显示中文乱码&#xff0c;以下为具体示例&#xff1a; pdf源文件&#xff1a; 转换成JPG后&#xff1a; 截图可以看到&#xffe5;符号无法转换为乱码 关键代码报错截图&#xff1a; 代码已经提示我们STSong-Light字…

IDEA 编码规约扫描 Code inspection did not find anything to report.

IDEA安装了Alibaba Java Coding Guidelines插件&#xff0c;却看不到规约检查结果。手动进行编码规约扫描&#xff0c;弹窗提示“Code inspection did not find anything to report.”&#xff1a; 这种情况是因为代码文件所在的目录被标记成了测试文件&#xff08;Test Source…

[leetcode] B树是不是A树的子结构

给定两棵二叉树 tree1 和 tree2&#xff0c;判断 tree2 是否以 tree1 的某个节点为根的子树具有 相同的结构和节点值 。 注意&#xff0c;空树 不会是以 tree1 的某个节点为根的子树具有 相同的结构和节点值 。 示例 1&#xff1a; 输入&#xff1a;tree1 [1,7,5], tree2 [6,…

ansible-copy用法

目录 概述实践不带目录拷贝带目录拷贝 概述 ansible copy 常用用法举例 不带目录拷贝&#xff0c;拷贝的地址要写全 带目录拷贝&#xff0c;拷贝路径不要写在 dest 路径中 实践 不带目录拷贝 # with_fileglob 是 Ansible 中的一个循环关键字&#xff0c;用于处理文件通配符匹…

docker 基本命令

目录 一、docker 镜像操作命令 1.1.查询软件镜像 1.2.docker pull&#xff1a;下载镜像 1.3.docker push&#xff1a;上传镜像 1.4.docker images&#xff1a;查看本地镜像 1.5.docker inspect &#xff1a;获取镜像详细信息 1.6.docker tag&#xff1a;添加镜像标签 …

【vscode】2024最新!vscode云端配置同步方案:code settings sync

小tian最近对电脑进行了系统重装&#xff0c;结果vscode相关配置和插件都没有保存记录&#xff0c;还好公司电脑里还有。痛定思痛&#xff0c;决定写一篇vscode云端同步配置方案&#xff0c;以作记录和分享~ 步骤一&#xff1a;安装vscode插件&#xff1a;code settings sync …

基于SpringBoot + Vue实现的家政服务管理系统设计与实现+毕业论文+答辩PPT+指导搭建视频(包运行成功)

目录 项目介绍 论文展示 资源获取 项目介绍 家政服务管理平台是一个管理信息系统&#xff0c;为了宣传的需要&#xff0c;为了给用户提供方便快捷的服务&#xff0c;从而设计了家政服务管理平台。管理员可以通过这个系统把家政服务信息发布出去&#xff0c;可以方便用户快…

Mac下使用homebrew管理多版本mysql同时启动

Mac下使用homebrew管理多版本mysql同时启动 思路 给每个版本分配不同的数据目录和配置文件即可 本文尝试了使用 brew 安装管理多个MySQL版本&#xff0c;同时运行、直接切换 安装 如果已有数据文件请自行备份以及使用 安装 mysql 5.7 brew install mysql5.7在 /opt/home…

微信小程序使用echarts实现条形统计图功能

微信小程序使用echarts组件实现条形统计图功能 使用echarts实现在微信小程序中统计图的功能&#xff0c;其实很简单&#xff0c;只需要简单的两步就可以实现啦&#xff0c;具体思路如下&#xff1a; 引入echarts组件调用相应的函数方法 由于需要引入echarts组件&#xff0c;代…