首页 > 其他分享 >第二十五章新增H5基础(以及视频~兼容)

第二十五章新增H5基础(以及视频~兼容)

时间:2024-05-31 10:29:21浏览次数:19  
标签:视频 浏览器 标签 音频 兼容 HTML5 第二十五章 H5 属性

1.HTML5中新增布局标签

HTML5新增了页眉,页脚,内容块等文档结构相关标签,可以使文档结构更加清晰明了。

1.新增的结构标签

1、<header>标签

定义文档或者文档中内容块的页眉。通常可以包含整个页面或一个内容区域的标题,搜索表单,相关的logo图片等。

2、<footer>标签

通常用来定义文档节的页脚,如网页中的版权信息,相关阅读链接等等。

3、<nav>标签

定义导航栏链接的部分,一般来说用于页面中主要的导航链接组,如传统的导航条,侧边导航栏,页面导航栏等。

4、<article>标签

表示文档独立完整的,可以独自被外部引用的内容。如一篇博文,论坛的帖子等。

5、<section>标签

表示页面中内容的分区,文章中的章节。一个section元素通常由内容及标题组成。

6、<aside>标签

表示当前页面或者文章的附属信息部分,如与主要内容相关的引用,侧边栏,广告,链接组等。

7、<hgroup>标签

可以为标题或者子标题进行分组,通常与h1-h6组合使用。

2.新增的其他标签

除了结构元素外,在HTML5中,还增加了以下标签:

1、<figure>标签

规定独立的流内容(图像,图表,照片,代码等等)。

figure元素的内容应该与主内容有关,但是如果被删除了,则不应对文档产生影响。

figcaption表示figure的标题,一个figure内只允许放置一个figcaption。

2、<mark>标签

定义带有记号的文本。

3、<time>标签

定义公历日期或者时间,或者两者。

datetime属性:定义元素的日期或者时间,如果未定义属性,则必须在元素的内容中规定日期或者时间。

2.HTML兼容问题

最新版本的 Safari、Chrome、Firefox以及Opera支持部分HTML5特性。Internet Explorer9支持某部分HTML5特性。

HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案:

方案一 :使用javascript新增元素的方法解决

document. createElement(“header”);

document. createElement(“footer”):

由于创建出来的元素是内联元素,所以需要转换成块级,宽度和高度才能生效。

header,footer{ display:block;)

方案二:使用封装好的插件html5shiv.js解决兼容性问题。

<!--[if lt IE 9]>

<script type=" text/javascript” src="./html5shiv.js" ></script>

<![endif]-->

上面这段代码仅会在IE浏览器下运行。

3.HTML5已移除的标签

以下的HTML4.01标签在HTML5中已经被删除:

(1) <acronym>

(2)<applet>

(3)<basefont>

(4 ) <big>

(5)<center>

(6)<dir>

(7)<font>

(8)<frame>

(9)<frameset>

(10)<noframes>

(11)<strike>

由于H5是向前兼容的,所以在H5中使用这些标签也不会报错或出现异常,但这些元素在H5中已不被 W3C标准推荐,建议尽量不要使用。

4.新增的多媒体标签

HTML5 新增了两个多媒体标签:audio 和video。这样用户不必再借肋 Flash Player 等第三方插件,可以直接在网页中嵌入多媒体组件。由于苹果在iphone 和ipad 等移动设备上不支持Flash热辐射,HTML5多媒体组件的能力就显得尤为重要。

1. <audio> 标签

HTML5规定了一种通过audio 标签来包含音频(音乐或其他音频流)的标准方法。

示例:

(audio srcm" videoAudio/hanmai.mp3” controls=" controls”></audio>

浏览器支持

Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 支持<audio>标签。

注意:Internet Ex- plorer8或者更早的IE 版本不支持<audio>标签。

 HTML5支持的音频格式

0gg

audio/ogg

支持的浏览器:Chrome、Firefox、Opera10+

MP3

audio/mpeg

支持的浏览器:Chrome、Firefox、Opera10+、IE9+、Safari5+

Wav

audio/wav

支持的浏览器:chrome、Firefox、Opera10+、Safari5+

audio 标签相关的属性

(1)src属性规定要播放的音频/视频的URL。

(2)controls属性规定浏览器应该为音频/视频提供播放控件。

(3)loop属性规定当音频/视频结束后将重新开始播放;如果设置该属性,则音频/视频将循环播放。

(4)muted属性规定要播放的音频/视频为静音。

2. <video> 标签

HTML5规定了一种通过video标签来包含视频(电影片段或其他视频流)的标准方法。

示例:

(video sre=” videoAudio/movie.ogg” controls=" controls”>video 元素</video>

浏览器支持

Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 支持<video>标签。

注意:Internet Ex- plorer8或者更早的IE 版本不支持<video>标签。

HTML5支持的视频格式

Ogg:带有Theora 视频编码+Vorbis 音频编码的 Ogg文件;支持的浏览器:Firefox、Chrome、Opera

MEPG4:带有H.264视频编码+AAC 音频编码的MPEG4文件;支持的浏览器:Safari、Chrome

video标签相关的属性

(1)src属性规定要播放的音频/视频的URL。

(2)controls属性规定浏览器应该为音频/视频提供播放控件。

(3)loop属性规定当音频/视频结束后将重新开始播放;如果设置该属性,则音频/视频将循环播放。

(4)muted属性规定要播放的音频/视频为静音。只属于video标签的属性:

(5)width属性规定视频播放器的宽度。

(6)height属性规定视频播放器的高度。

(7)poster预览图片

3.<source>标签

为媒介元素(比如<video>和<audio>)定义媒介资源:

例如:

<video controls=" controls” width=” 300” >

<soure src=”音频地址” type=“资源类型”>

</video>

(1)src属性规定要播放的音频/视频的URL。

(2)type属性规定媒体资源的MIME类型。

注意:source元素可以链接不同的音频/视频文件,浏览器将使用第一个可识别的格式。

标签:视频,浏览器,标签,音频,兼容,HTML5,第二十五章,H5,属性
From: https://blog.csdn.net/J3259392566/article/details/139345576

相关文章

  • html5,h5是什么?h5常用标签和标签的分类(2024-05-31)
    起源HTML(HypertextMarkupLanguage,超文本标记语言)诞生于20世纪90年代初,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,如标题、段落、列表、指向其他网页的链接等。HTML5是HTML的最新版本,它的大部分内容都可以兼容新旧浏览器,并新增了大量新的功能。HTML5还引......
  • 第二十五章CSS中的技巧(导航栏、下拉列表)
    1.CSS精灵1.什么是CSS精灵英文叫法 CSSsprites,通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中,再利用css“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position用数......
  • 【GoMaxAI】最新的AI创作系统源码包括ChatGPT网站H5系统源码和Midjourney-AI绘画系统
    一、系统前言GoMaxAI创作系统是基于ChatGPT开发的智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型和国内AI全模型。针对源码系统的完美测试结果,你想了解如何搭建部署AI创作ChatGPT系统,我这里提供一个详细的图文教程。系统已支持GPTs、GPT语音对话、GPT-4模型、联网提......
  • 3.4K Star!一个高性能的跨平台图表库!支持H5、APP、及各种小程序!太强了!
    大家好!我是赵老师,专门搜罗分享一些优秀开源项目、工具软件等以及进行一些原创技术分享和干货文章分享!喜欢的童鞋可以点个关注加在看,大家也可以在留言区进行探讨,谢谢啦!这是一款专为小程序而生的高性能跨平台图表库。它支持H5图表、APP图表以及各类小程序图表(包括微信小程序、......
  • 521源码-免费游戏源码下载-【联盟三国H5服务端】二次元卡牌封神网页手游及VM单机端
    对于喜欢二次元卡牌封神网页手游的玩家们,现在有一个好消息!我们为您带来了【联盟三国H5】的全方位解析,包括其网页手游版、VM单机一键端、语音视频教程、CDK授权后台和运营后台等丰富内容。如果您对开发游戏端感兴趣,我们特别提供了一个放置封神二开的端,并且小编还尝试制作了虚拟......
  • 521源码-免费游戏源码下载-闯梦江湖Q萌复古全网通手游服务端H5全攻略
    闯梦江湖H5:Q萌复古全网通手游服务端全攻略一、概述闯梦江湖H5是一款结合Q萌画风与复古情怀的全网通H5手游。我们为您提供了最新打包的Windows服务端,并附带了通用视频架设教程和GM网页授权后台工具,让您轻松搭建并管理自己的游戏世界。注意:本源码仅供学习研究之用,严禁用于商......
  • 企业微信H5授权登录
    在企业中如果需要在打开的网页里面携带用户的身份信息,第一步需要获取code参数如何实现企业微信H5获取当前用户信息即accessToken?1.在应用管理--》创建应用2.创建好应用,点击应用主页-》设置-》网页-》将授权链接填上去官方文档可以看这---->构造网页授权链接-接口文档-......
  • 【WCH蓝牙系列芯片】-基于CH582开发板—主机连接从机(128bitUUID)实现通信
    -------------------------------------------------------------------------------------------------------------------------------------  在之前一篇主机枚举从机所有服务和特征的博客中,介绍主机连接从机的流程,并且枚举从机的服务,进行通信操作。在本篇博客中,基于CH582......
  • 陪玩系统音频社交系统语音直播系统短视频系统陪玩陪玩系统程序陪玩系统搭建陪玩源码开
    在当今的科技世界中,游戏已经成为了人们日常生活的一部分。随着移动设备的普及和网络的发展,各种类型的游戏应运而生,满足了不同人群的需求。然而,有一种新兴的游戏模式正在逐渐受到玩家们的欢迎,那就是“陪玩”系统。那么,什么是陪玩系统开发呢?本文将对此进行详细的探讨。一、陪玩......
  • ios系统上h5页面播放audio标签声音有延迟问题处理
    原文链接https://www.cnblogs.com/yalong/p/18214816背景app内嵌了一个H5页面,页面有个需求是点击某些按钮就触发声音,于是就使用了audio标签,但是有个问题就是在ios上,点击声音会有短时间的延迟,然后才播放声音找了好几种方案总算解决了方案一click事件改为mouseup事件因为移动......