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

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

分清标签和属性

标签(HTML元素)和属性,标签定义了内容的类型或结构,而属性则用于提供有关如何展示或处理这些内容的额外信息。在HTML中,标签是用来包裹内容并定义其类型的,而属性可以用于控制标签的行为或样式。

标签:HTML标签用于定义文档中的各种元素,如段落、标题、图像、视频等。标签通常由尖括号 < > 包围,如

用于定义段落。

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

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

例如:
<img> 标签

属性:

src:指定图像文件的 URL。

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

示例:

html 复制代码
<img src="image.jpg" alt="A beautiful sunset">

新增多媒体标签

新增视频标签

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

示例

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

新增音频标签

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

新增全局属性

在CSS中,全局属性是一组适用于所有CSS属性的属性,可以应用于任何CSS规则。

H5的兼容性处理

相关推荐
心中有国也有家12 小时前
AtomGit Flutter 鸿蒙客户端:呼吸练习的三种科学模式
学习·flutter·华为·harmonyos
三品吉他手会点灯12 小时前
嵌入式机器学习 - 学习笔记1.0.2 - 学习路线导览:从机器学习基础到 TinyML应用
人工智能·笔记·嵌入式硬件·学习·机器学习
梦曦i13 小时前
uni-router新推useUniEventChannel,彻底解决页面通信难题
前端·uni-app
柯克七七13 小时前
给老项目加了 TypeScript,本来只想自己爽,结果全公司代码审查标准被我抬高了
前端·vue.js·typescript
yuanlaile13 小时前
前端转 Flutter 自学完整规划,避开跨栈思维转换误区
前端·flutter·flutter跨平台开发
CN_HW13 小时前
Nginx 流量镜像配置文档-双轨国产化
服务器·前端·网络
JNX_SEMI13 小时前
ATR2652 GNSS双频LNA:0.75dB噪声系数与22dB高增益设计
前端·单片机·嵌入式硬件·物联网·硬件工程
拾年27514 小时前
Node.js 异步进化论:从 path 路径拼接到 fs 文件读取,我终于理解了回调地狱的救赎之路
前端·node.js
花颜yyds14 小时前
React Konva 开发基础速查手册
前端
三品吉他手会点灯14 小时前
嵌入式机器学习 - 学习笔记1.0.1 - 从 Alexa 到 TinyML:为什么机器学习开始跑进微控制器?
人工智能·笔记·嵌入式硬件·学习·机器学习