第二十五章新增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.rhkb.cn/news/340932.html

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

相关文章

UI案例——登陆系统

UI的登陆界面实例 在学习了UILabel&#xff0c;UIButton&#xff0c;UIView&#xff0c;UITextField的内容之后&#xff0c;我们就可以写一个简单的登陆界面 我们可以通过UILabel来编写我们显示在登陆界面上的文字比方说下面这两行字就是通过UILabel去实现的。 下面给出一下实现…

直播美颜插件详解:美颜SDK的技术原理

美颜SDK作为实现美颜功能的核心技术&#xff0c;已被广泛应用于各种直播和短视频应用中。那么&#xff0c;美颜SDK究竟是如何工作的&#xff1f;它背后的技术原理又是什么&#xff1f;本文将对直播美颜插件及其技术原理进行详解。 一、美颜SDK的概述 美颜SDK包含了各种图像处…

二叉树遍历 和 线索二叉树

文章目录 1.1 二叉树遍历1.1 前提问题1&#xff1a; 什么叫二叉树的遍历&#xff1f;二叉树的三种遍历&#xff1a;三个概念&#xff1a;遍历 和 访问 和 经过重要概念&#xff1a;遍历过程中的经过节点&#xff0c;不代表访问节点 问题2&#xff1a;遍历和访问的联系&#xff…

【代码+详解】算法题 : 最大公约数

❗❗❗必看: 下列题我全部都使用 Java 语言写的,并且均可以提交成功,获得Accepted 结果的. 如果代码和详解看了之后,对答案有任何疑问,都可以在评论区提出来,我都会一个一个回答. ❗❗❗感谢大家的支持,如果喜欢我的博客,关注 点赞 收藏 评论一波,非常感谢!!! 文章目录 题目&…

思维导图——幕布

一、前言 幕布是一款专注于简化和组织信息的大纲笔记应用&#xff0c;它旨在帮助用户高效地整理知识点、优化工作流程以及规划个人生活。 二、软件特点 幕布工具的核心优势在于其能够快速将用户的输入转换成清晰的思维导图&#xff0c;便于视觉化地理解和记忆信息。 幕布还具…

分集增益Diversity Gain与复用增益Multiplexing Gain

文章目录 概念DoF&#xff08;Degrees of Freedom&#xff09;复用增益&#xff08;Multiplexing Gain&#xff09;自由度&#xff08;Degrees of Freedom, DoF&#xff09;两者的关系实际应用关系总结具体关系例子结论 近场MIMO的分集与复用与远场MIMO有何不同 概念 在通信领…

HttpClient cookie爬虫记录

记录一次java语言使用httpclient爬取网站接口数据的经历 需要用到的依赖&#xff1a; httpclient和httpcore是封装了http请求的工具类 jsoup可以将返回的网页html找到你需要的xml节点&#xff0c;很方便 <dependency><groupId>org.apache.httpcomponents</gr…

通过DirectML和ONNXRuntime运行Phi-3模型

更多精彩内容&#xff0c;欢迎关注我的公众号“ONE生产力”&#xff01; 上篇我们讲到通过Intel Core Ultra系列处理器内置的NPU加速运行Phi-3模型&#xff0c;有朋友评论说他没有Intel处理器是否有什么办法加速Phi-3模型。通常&#xff0c;使用GPU特别是NVIDA的GPU加速AI模型…

windows上安装MongoDB,springboot整合MongoDB

上一篇文章已经通过在Ubuntu上安装MongoDB详细介绍了MongoDB的各种命令用法。 Ubuntu上安装、使用MongoDB详细教程https://blog.csdn.net/heyl163_/article/details/133781878 这篇文章介绍一下在windows上安装MongoDB&#xff0c;并通过在springboot项目中使用MongoDB记录用户…

SpaceX: 太空火箭自主精准着陆

本文是根据Lars Blackmore在16年的一篇公开论文翻译而来&#xff0c;虽然有些早而且是科普文章&#xff0c;但是可以初见一些SpaceX火箭着陆的细节&#xff0c;后面我会对spaceX landing control 技术主管MIT博士期间研究火箭控制算法的论文进行讲解&#xff0c;敬请期待。 Lar…

【php实战项目训练】——thinkPhP的登录与退出功能的实现,让登录退出畅通无阻

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

C/C++ 进阶(5)二叉平衡搜索树(AVL树)

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 目录 一、概念 二、平衡因子 三、操作 插入 旋转 左单旋 右单旋 左右双旋 右左双旋 一、概念 二叉平衡搜索树又称AVL树&#xff0c;是一种特殊的二叉搜索树。一般的二叉搜索树在遇到数据有序时&…

SOLIDWORKS修改零件时出现错误怎么办?

我们在使用SOLIDWOKRS进行零件建模过程中往往避免不了修改&#xff0c;但在修改后又常常会出现零件报错的情况&#xff0c;设计树中会出现一堆的错误和警告&#xff0c;我们如何快速处理这些问题呢&#xff1f; 我们都知道SOLIDWOKRS零件通常包含两大类的对象&#xff0c;分别…

Docker 入门版

目录 1. 关于Docker 2. Dockr run命令中常见参数解读 3. Docker常见命令 4. Docker 数据卷 5. Docker本地目录挂载 6. 自定义镜像 Dockerfile 语法 自定义镜像模板 Demo 7. Docker网络 1. 关于Docker 在docker里面下载东西&#xff0c;就是相当于绿色面安装板&#x…

python之生成器表达式

背景 生成器表达式&#xff0c;整个表达式都是另一个函数的唯一入参&#xff0c;则不需要带括号&#xff1b;若他只是其中一个参数&#xff0c;则需要圆括号包裹。 演示

响应式流和reactor框架进阶

响应式流和reactor框架进阶 响应式流创建、转换、处理 本文档主要介绍在响应式编程中如何从流中获取数据并处理。 前提条件 假设您已经能掌握Java基础、Maven使用、Lamda表达式、响应式编程等基础。 如何获取流中数据 &#x1f30f; 说明 1、不要试图从流中获取数据出来&a…

MMUNet:形态学特征增强网络在结肠癌病理图像分割中的应用

MMUNet: Morphological feature enhancement network for colon cancer segmentation in pathological images. 发表在&#xff1a;Biomedical Signal Processing and Control2024--影响因子&#xff1a;3.137 南华大学的论文 论文地址&#xff1a;main.pdf (sciencedirecta…

地理信息科学中的大数据挑战

在信息化爆炸的时代&#xff0c;地理信息科学&#xff08;GIScience&#xff09;正经历着前所未有的变革&#xff0c;其中&#xff0c;地理空间大数据的涌现为科学研究与应用带来了前所未有的机遇与挑战。作为地理信息与遥感领域的探索者&#xff0c;本文旨在深入剖析地理空间大…

找不到steam_api64.dll,无法继续执行的原因及解决方法

电脑已经成为我们生活中不可或缺的一部分。然而&#xff0c;在使用电脑的过程中&#xff0c;我们经常会遇到一些常见的问题&#xff0c;其中之一就是找不到某个特定的动态链接库文件&#xff0c;比如steamapi64.dll。这个问题可能会导致某些应用程序无法正常运行&#xff0c;给…

音视频开发—音频相关概念:数模转换、PCM数据与WAV文件详解

文章目录 前言1.模拟数字转换&#xff08;ADC&#xff09;1.1ADC的关键步骤&#xff1a; 2.数字模拟转换&#xff08;DAC&#xff09;2.1DAC 的基本流程包括&#xff1a; 3.PCM数据3.1PCM 数据的关键要素包括&#xff1a; 4.WAV文件4.1 WAV的构成4.2WAV文件的标准块结构4.3WAV的…