第二十五章新增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元素可以链接不同的音频/视频文件,浏览器将使用第一个可识别的格式。

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

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

相关文章

GEYA格亚GRT8-M多种功能时间继电器交流AC220V DC24V延时断开小巧

品牌 GEYA 型号 GRT8-M1 AC/DC12-240 产地 中国大陆 颜色分类 GRT8-M1 A220,GRT8-M1 AC/DC12-240,GRT8-M2 A220,GRT8-M2 AC/DC12-240 GRT8-M&#xff0c;多功能型&#xff0c;时间继电器&#xff1a;LED指示灯&#xff0c;触头容量大&#xff0c;电压超宽&#xff0c;阻…

2024.5.29晚训参考代码

因为本套题没有BFS例题&#xff0c;所以我先把BFS模板放着 #include<bits/stdc.h> using namespace std; int n,m;//n*m的棋盘 int dis[402][402]; bool vis[402][402]; int X[]{-2,-2,-1,-1,1,1,2,2};//偏移量的表 int Y[]{-1,1,-2,2,-2,2,-1,1};//定义一个数组&…

PDF盖骑缝章

在PDF文件上加盖骑缝章&#xff0c;您可以采取以下几种方法之一&#xff1a; 使用Adobe Acrobat&#xff1a; 打开Adobe Acrobat软件&#xff0c;加载PDF文件。在工具栏选择“工具”选项&#xff0c;找到“骑缝章”或“印章”工具。选择或上传您的骑缝章图片&#xff0c;将其放…

Dify数据库结构导出到PowerDesigner

即刻关注&#xff0c;获取更多 关注公众号 N学无止界 获取更多 Dify数据库结构导出到PowerDesigner Dify简介 Dify简介 欢迎使用 Dify Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务&#xff08;Backend as Service&#xff09;和 LLMOps 的理念&…

FFmpeg开发笔记(三十一)使用RTMP Streamer开启APP直播推流

RTMP Streamer是一个安卓手机端的开源RTMP直播推流框架&#xff0c;可用于RTMP直播和RTSP直播&#xff0c;其升级版还支持SRT直播&#xff08;腾讯视频云就采用SRT协议&#xff09;。RTMP Streamer支持的视频编码包括H264、H265、AV1等等&#xff0c;支持的音频编码包括AAC、G7…

AI绘画Stable Diffusion【隐藏文字】:将艺术字隐藏在国风云雾山水图中

大家好&#xff0c;我是灵魂画师向阳 今天我们分享一下用AI绘画工具Stable Diffusion制作网上很火的隐藏文字。这里以将艺术字隐藏在国风云雾山水图为例进行讲解&#xff0c;下面我们就来看看吧。 一. 艺术字隐藏在国风云雾山水图中制作方法 【第一步】&#xff1a;制作底图…

使用Python爬取华为市场游戏类APP应用

文章目录 1. 写在前面2. 接口分析3. 爬虫开发4. 下载链接获取 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守…

uni-app实现页面通信EventChannel

uni-app实现页面通信EventChannel 之前使用了EventBus的方法实现不同页面组件之间的一个通信&#xff0c;在uni-app中&#xff0c;我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注&#xff1a;2.8.9 支持页面间事件通信通道。 1. 向被打开页面传送数据…

JavaScript笔记二-JavaScript基础语法

1、标识符 命名规则 第一个字符必须是一个字母、下划线&#xff08; _ &#xff09;或一个美元符号&#xff08; $ &#xff09;。其它字符可以是字母、下划线、美元符号或数字。按照惯例&#xff0c;ECMAScript 标识符采用驼峰命名法。标识符不能是关键字和保留字符。 2、字…

2022年全国职业院校技能大赛高职组“信息安全管理与评估”赛项第三阶段任务书

第三阶段竞赛项目试题 本文件为信息安全管理与评估项目竞赛-第三阶段试题。根据信息安全管理与评估项目技术文件要求&#xff0c;第三阶段为夺旗挑战CTF&#xff08;网络安全渗透&#xff09;。 本次比赛时间为180分钟。 介绍 夺旗挑战赛&#xff08;CTF&#xff09;的目标…

开发语言Java+前端框架Vue+后端框架SpringBoot开发的ADR药物不良反应监测系统源码 系统有哪些优势?

开发语言Java前端框架Vue后端框架SpringBoot开发的ADR药物不良反应监测系统源码 系统有哪些优势&#xff1f; ADR药物不良反应监测系统具有多个显著的优势&#xff0c;这些优势主要体现在以下几个方面&#xff1a; 一、提高监测效率与准确性&#xff1a; 通过自动化的数据收集…

在热力图基础上寻找所有峰值位置

文章目录 概要代码概要 理解热力图:首先,了解热力图是什么以及它代表了什么信息至关重要。热力图通常是二维的,其中每个像素的颜色表示该位置的数值大小。较亮的颜色通常表示较高的数值,而较暗的颜色表示较低的数值。 阈值处理:根据问题的要求,可能需要对热力图进行阈值处…

吴恩达2022机器学习专项课程C2W2:实验SoftMax

目录 Softmax函数1.简述2.Numpy实现softmax函数 softmax成本函数softmax应用于神经网络1.自定义数据集2.构建模型3.使用模型预测4.改良模型代码&#xff08;softmax转换输出&#xff09; Softmax函数 1.简述 在 Softmax 回归和带有 Softmax 输出的神经网络中&#xff0c;模型…

小程序如何更换营业执照

​因为商家经营业务的变更&#xff0c;尤其是之前的营业执照注销等原因&#xff0c;导致要求更换小程序主体。下面就具体介绍如何进行变更。 1. 登录mp.weixin.qq.com&#xff0c;找到设置->基本设置&#xff0c;在主体信息字段&#xff0c;点击小程序主体变更。主体变更分…

【运维项目经历|015】:Nginx Web服务性能提升与优化项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的技术性问题 问题1&#xff1a;本次项目的人员配置&#xff1f; 问题2&#xff1a;本次项目的周期&am…

教学基本功包括什么技能有哪些

教师的工作不仅仅是传授知识&#xff0c;更多是引导学生探索&#xff0c;激发他们的创造力。要做到这一点&#xff0c;需要具备一些基本技能。 扎实的专业知识。这是教师的根基&#xff0c;如果教师自己对所教的科目都不熟悉&#xff0c;那么教学就会失去方向。不断学习更新自己…

基于python开发用于深度学习模型训练过程loss值曲线的平滑处理模块

深度学习网络模型的loss曲线是训练过程中非常重要的一个监控指标&#xff0c;它能够直观地反映模型的学习状态以及可能存在的问题。以下是对深度学习网络模型loss曲线的详细介绍&#xff1a; 一、loss曲线的基本概念 在深度学习的训练过程中&#xff0c;loss函数用于衡量模型…

0521_网络编程5

练习1&#xff1a; TFTP通信过程总结 服务器在69号端口等待客户端的请求服务器若批准此请求&#xff0c;则使用 临时端口 与客户端进行通信。每个数据包的编号都有变化&#xff08;从1开始&#xff09;每个数据包都要得到ACK的确认&#xff0c;如果出现超时&#xff0c;则需要…

骑车不戴头盔监测摄像机

骑行是一种健康的出行方式&#xff0c;但是在骑行途中不戴头盔存在安全隐患&#xff0c;容易造成头部受伤。为了规范骑行行为&#xff0c;保障骑行安全&#xff0c;可以考虑使用骑车不戴头盔监测摄像机进行监测和识别。这种摄像机可以通过智能识别技术&#xff0c;实时监测骑自…

装机数台,依旧还会心念i5-12600KF的性能和性价比优势:

近几个月的时间中&#xff0c; 装机差不多4台电脑&#xff0c;由于工作需要&#xff0c;计划年中再增添一台。 目前市场上英特尔CPU促销非常火爆&#xff0c;第12代、第13代以及第14代的产品在年中有适当的优惠。 年中也是装机的旺季&#xff0c;各种相关配件也相对便宜一些。…