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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java】刚刚!突然!紧急通知!垃圾回收!

【Java】刚刚&#xff01;突然&#xff01;紧急通知&#xff01;垃圾回收&#xff01; 文章目录 【Java】刚刚&#xff01;突然&#xff01;紧急通知&#xff01;垃圾回收&#xff01;从C语言的内存管理引入&#xff1a;手动回收Java的垃圾回收机制引用计数器循环引用问题 可达…

支付宝支付-Java基于沙箱环境实现支付宝支付

一、支付宝沙箱环境介绍 沙箱环境是支付宝开放平台为开发者提供的安全低门槛的测试环境&#xff0c;开发者在沙箱环境中调用接口无需具备所需的商业资质&#xff0c;无需绑定和开通产品&#xff0c;同时不会对生产环境中的数据造成任何影响。合理使用沙箱环境&#xff0c;可以…

7-Django项目--账号管理

目录 templates/admin_role/admin_list.html ​编辑 templates/admin_role/add_modify.html views/admin_role.py 账号管理----> 账号添加 views.py 身份修改 views.py 重置密码 views.py templates/admin_role/admin_list.html {% extends "index/index.ht…

[有监督学习] 7.详细图解随机森林

随机森林 随机森林&#xff08;random forest&#xff09;是将多个模型综合起来创建更高性能模型的方法&#xff0c;既可用于回归&#xff0c;也可用于分类。同样的算法有梯度提升&#xff08;gradient boosting&#xff09;等在机器学习竞赛中很受欢迎的算法。 通过学习随机森…

SpringBoot整合jasypt加密配置文件敏感信息

SpringBoot整合jasypt加密配置文件敏感信息 在项目中我们需要对配置文件的一些敏感信息进行加密处理&#xff0c;比如数据库账户密码&#xff0c;避免直接暴露出来&#xff0c;这种场景常常用于生产环境&#xff0c;我们不想让开发人员知道生产库的密码&#xff0c;有运维人员…

Ubuntu 安装好虚拟环境后,找不到workon 命令

1、安装虚拟环境 pip3 install virtualenv pip3 install virtualenvwrapper 2、安装完成后 workon 命令。 找不到workon 命令 执行&#xff0c;source virtualenvwrapper.sh 执行后&#xff0c;在使用workon命令&#xff0c;即可完成。

1.1 Mediapipe随手简记(一)

为了后续项目展开&#xff0c;需要Python、C、Linux、OpenCV、Mediapipe、ROS知识。 最后面有手势识别&#xff08;数字&#xff09;精准案例&#xff0c;项目会用到。 Mediapipe学习篇1 Mediapipe 是一个开源的跨平台框架&#xff0c;它提供了大量的解决方案&#xff0c;用…

MySQL十部曲之九:MySQL优化理论

文章目录 前言概述查询优化查询执行计划EXPLAIN获取表结构信息获取执行计划信息 EXPLAIN 输出格式如何使用EXPLAIN进行优化 范围访问优化单列索引的范围访问多列索引的范围访问 索引合并优化索引合并交叉访问算法索引合并联合访问算法索引合并排序联合访问算法 索引下推优化连接…

随身wifi网络卡顿怎么解决?随身WiFi哪个牌子的最好用?排名第一名的随身WiFi!

对于随身wifi靠不靠谱这个问题&#xff0c;网上一直存在争议。很多人的随身wifi网速不稳定&#xff0c;信号看着满格就是上不了网。关于随身wifi卡顿到底该怎么解决呢&#xff1f; 1.如果是设备网络在一个地方上网速度很快&#xff0c;换一个地方网络就不行了&#xff0c;很可能…

爬虫学习2

中国国家地理网 单张图片爬取 import requests url http://img0.dili360.com/ga/M00/02/AB/wKgBzFQ26i2AWujSAA_-xvEYLbU441.jpg!rw9 headers {"User-Agent": Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0…

CC工具箱使用指南:【山西省村规结构调整表(亦求长生亦求你)】

一、简介 群友定制工具。 工具根据输入的用地图层&#xff0c;生成山西村规的结构调整表。 和一般的用地表有些不一样的地方是&#xff0c;现状和规划字段都在同一个图层里。 并且还有一个【村庄名称】的字段&#xff0c;可以将多个村庄放在一个图层中&#xff0c;一次性生…

简介项目管理七步训练与站上山顶

前言 麦肯锡七步成诗法,实际上并非用于创作诗歌,而是一种解决问题的方法,它源自于全球知名的管理咨询公司麦肯锡(McKinsey & Company)。 这种方法强调逻辑清晰、结构化思维,用于解决商业问题非常有效。这种创意思维方法被广泛应用于问题解决和创新过程中。以下是“麦…

【设计模式深度剖析】【7】【结构型】【享元模式】| 以高脚杯重复使用、GUI中的按钮为例说明,并对比Java类库设计加深理解

&#x1f448;️上一篇:外观模式 | 下一篇:结构型设计模式对比&#x1f449;️ 设计模式-专栏&#x1f448;️ 目录 享元模式定义英文原话直译如何理解&#xff1f;字面理解例子&#xff1a;高脚杯的重复使用例子&#xff1a;GUI中的按钮传统方式使用享元模式 4个角色1. …

html期末复习速览

一.基础标签 1.段落标签<p></p> 特点&#xff1a;分段分割 2.标题标签<h1></h1>……<h6></h6> 特点&#xff1a;文字加粗&#xff0c;单独占一行 3.换行标签<br /> 特点&#xff1a;单标签&#xff0c;强制换行 二.文本格式化…

流媒体内网穿透/组网/视频协议转换EasyNTS上云网关如何更改密码?

EasyNTS上云网关的主要作用是解决异地视频共享/组网/上云的需求&#xff0c;网页对域名进行添加映射时&#xff0c;添加成功后会生成一个外网访问地址&#xff0c;在浏览器中输入外网访问地址&#xff0c;即可查看内网应用。无需开放端口&#xff0c;EasyNTS上云网关平台会向Ea…

备忘录--

备忘录 vue新建项目&#xff0c;body 大小占不了全屏 // 解决问题 // public/index.html 更改基础样式 html,body{height: 100%width: 100%&#xff1b;margin: 0;border: 0;padding: 0; }Element Plus 经典布局 参考 Element Plus 官网 <template><div class"…

jmeter性能测试用例提取

性能测试用例提取参考(根据单、混合场景、模块、运行时间、优先级)去考虑 Tips&#xff1a;用例提取和用例设计不一样 后期可以结合性能测试用例设计(设置线程数、时间、循环、同步定时器等等&#xff09;来做性能测试

从零到一建设数据中台 - 关键技术汇总

一、数据中台关键技术汇总 语言框架&#xff1a;Java、Maven、Spring Boot 数据分布式采集&#xff1a;Flume、Sqoop、kettle 数据分布式存储&#xff1a;Hadoop HDFS 离线批处理计算&#xff1a;MapReduce、Spark、Flink 实时流式计算&#xff1a;Storm/Spark Streaming、…

VB.net进行CAD二次开发(四)

netload不能弹出对话框&#xff0c;参考文献2 参考文献1说明了自定义菜单的问题&#xff0c;用的是cad的系统命令 只要加载了dll&#xff0c;自定义的命令与cad的命令同等地位。 这时&#xff0c;可以将自定义菜单的系统命令替换为自定义命令。 <CommandMethod("Add…

开源代码分享(32)-基于改进多目标灰狼算法的冷热电联供型微电网运行优化

参考文献&#xff1a; [1]戚艳,尚学军,聂靖宇,等.基于改进多目标灰狼算法的冷热电联供型微电网运行优化[J].电测与仪表,2022,59(06):12-1952.DOI:10.19753/j.issn1001-1390.2022.06.002. 1.问题背景 针对冷热电联供型微电网运行调度的优化问题&#xff0c;为实现节能减排的目…