HTML5简介-HTML5 新增语义化标签-HTML5 新增多媒体标签

一、HTML5简介

HTML5,全称为HyperText Markup Language 5,是HTML的第五个版本,由万维网联盟(World Wide Web Consortium,W3C)和Web Hypertext Application Technology Working Group(WHATWG)联合制定的一种标记语言。

HTML5在网络应用开发中的优点:

  1. 新的标签和属性:HTML5新增了一些标签和属性,如 <header><footer><article><section><video><audio>等,能够更好地描述语义,使网页结构更加清晰。

  2. 跨平台兼容性:HTML5支持多种设备和平台,包括PC、平板电脑、智能手机、电视等。

  3. 增强的多媒体功能:HTML5支持视频、音频、动画等多媒体内容的播放,而且无需安装插件。

  4. 更好的离线应用支持:HTML5提供了离线存储功能,使得网页可以离线工作,提高了用户体验。

  5. 更好的性能:由于使用了新的技术,如WebGL、Web Workers等,HTML5能够更好地处理大规模、复杂的数据和交互,提升了性能。

下面是一个简单的HTML5代码示例,用于显示视频:

<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
</video>

这段代码使用了&lt;video>标签来显示视频,并提供了两种格式(.mp4.ogg)的视频文件以适应不同的浏览器。controls属性使视频具有播放、暂停、音量控制和全屏等功能。如果浏览器不支持&lt;video>标签或者任何一种视频格式,那么就会显示“Your browser does not support the video tag.”。

二、HTML5 新增语义化标签

HTML5 新增了许多具有语义化的标签,这些标签可以更好地描述文档结构和内容,同时便于开发者进行 SEO 优化和访问性优化。下面是一些常用的 HTML5 语义化标签和代码演示:

  1. &lt;header> 标签:表示页面的头部区域,一般包含网站的头部导航、logo、搜索框等元素。
<header><nav><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header>

  1. &lt;nav> 标签:表示页面的导航菜单区域,一般包含网站的主导航和次导航。
<nav><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul>
</nav>

  1. &lt;section> 标签:表示文档中的一个区域,一般用于分块,如文章中的正文、评论、推荐等。
<section><h2>关于我们</h2><p>我们是一家致力于提供最优质服务的公司...</p>
</section>

  1. &lt;article> 标签:表示文档中的一篇文章、博客或新闻等,一般包含标题、作者、时间、正文等。
<article><h1>如何学好前端开发?</h1><p>本文将介绍如何学好前端开发...</p><div class="author-info"><span class="author">作者:小明</span><span class="date">发布时间:2020年5月1日</span></div>
</article>

  1. &lt;aside> 标签:表示页面的侧边栏,一般包含网站的相关信息或广告等。
<aside><h3>相关文章</h3><ul><li><a href="#">文章1</a></li><li><a href="#">文章2</a></li><li><a href="#">文章3</a></li></ul><h3>热门标签</h3><ul><li><a href="#">前端</a></li><li><a href="#">后端</a></li><li><a href="#">移动端</a></li></ul>
</aside>

  1. &lt;footer> 标签:表示页面的底部区域,一般包含版权信息、联系方式等。
<footer><p>版权所有 © 2020-2021</p><p>联系方式:123456789</p>
</footer>

三、HTML5 新增多媒体标签

HTML5 引入了多个新的多媒体标签,包括 &lt;audio>&lt;video>&lt;canvas>。这些标签帮助开发者更容易地展现和处理各种多媒体数据。

<audio> 标签

&lt;audio> 标签用于嵌入音频文件到网页中。具体用法如下:

<audio src="audio.mp3" controls></audio>

src 属性规定音频文件的 URL。 controls 属性规定浏览器应该提供音频控制器(比如播放/暂停按钮等)。

<video> 标签

&lt;video> 标签用于嵌入视频文件到网页中。具体用法如下:

<video src="video.mp4" controls></video>

src 属性规定视频文件的 URL。 controls 属性规定浏览器应该提供视频控制器(比如播放/暂停按钮等)。

除了 srccontrols 属性之外,还可以设置其他属性来调整视频播放的选项,如 autoplayloopmuted 等。

<canvas> 标签

&lt;canvas> 标签用于创建绘图区域,可以用 JavaScript 在其中绘制图像、图形、动画等。具体用法如下:

<canvas id="myCanvas" width="500" height="500"></canvas>

id 属性为 &lt;canvas> 元素定义一个唯一的标识符。 widthheight 属性为 &lt;canvas> 元素定义绘图区域的宽度和高度。

在 JavaScript 中,使用 getContext() 方法获取 &lt;canvas> 元素的绘图上下文对象,然后可以通过调用绘图上下文提供的方法实现具体的绘制功能,如绘制基本形状、图片、文字等。例如:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

上述代码创建了一个 500x500 的绘图区域,然后使用 fillRect() 方法在该区域的左上角绘制一个 150x75 的红色矩形。

以上是三个新增的多媒体标签的详细解析和代码演示。这些标签的引入使得开发者可以更方便地处理和展示各种多媒体内容。

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

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

相关文章

github创建个人网页登录后404无法显示的问题

1.首先必须要有内容&#xff0c;默认是会找index.html文件&#xff0c;找不到该文件会找readme.md文件&#xff0c;也就是说最简单的方法是&#xff0c;创建了与用户名同名的repository后username.github.io后&#xff0c;添加一个readme.md文件&#xff0c;得在readme里打点字…

十四、【图章工具组】

文章目录 仿制图章图案图章 仿制图章 纺织图和章工具跟我们之前所用到的修补工具类似,需要我们先按住Alt键选住一块区域&#xff0c;然后调整它的硬度在用我们选择的区域去覆盖&#xff0c;需要注意的是&#xff0c;我们去做的时候尽量一笔覆盖我们想要遮住的区域: 图案图章…

Blender:对模型着色

Blender&#xff1a;使用立方体制作动漫头像-CSDN博客 上一步已经做了一个头像模型&#xff0c;我做的太丑了&#xff0c;就以这个外星人头像为例 首先切换到着色器编辑器 依次搜索&#xff1a;纹理坐标、映射、分离xyz和颜色渐变 这里的功能也是非常丰富和强大&#xff0c…

【微服务部署】九、使用Docker Compose搭建高可用双机热备MySQL数据库

通常&#xff0c;一般业务我们使用云服务器提供的数据库&#xff0c;无论是MySQL数据库还是其他数据库&#xff0c;云服务厂商都提供了主备功能&#xff0c;我们不需要自己配置处理。而如果需要我们自己搭建数据库&#xff0c;那么考虑到数据的高可用性、故障恢复和扩展性&…

RFID拓展的相关问答

基于&#xff1a; Research Reading: Smart Parking Applications Using RFID Technology-CSDN博客这篇文章总结了无线射频识别&#xff08;RFID&#xff09;技术在自动化中的应用及其在停车场管理系统中的解决方案。文章提到&#xff0c;RFID技术在自动化中可以降低交易成本&…

【数据结构C/C++】双向链表的增删改查

文章目录 CC408考研各数据结构C/C代码&#xff08;Continually updating&#xff09; 对我个人而言&#xff0c;在开发过程中使用的比较多的就是双向链表了。 很多重要的代码优化都会使用到基于双向链表实现的数据机构。 比如我们常用的HashMap&#xff0c;我们知道Key其实是无…

Macos音乐制作:Ableton Live 11 Suite for Mac中文版

Ableton Live 11是一款数字音频工作站软件&#xff0c;用于音乐制作、录音、混音和现场演出。它由Ableton公司开发&#xff0c;是一款极其流行的音乐制作软件之一。 以下是Ableton Live 11的一些主要特点和功能&#xff1a; Comping功能&#xff1a;Live 11增加了Comping功能…

css设置文本溢出隐藏...

在CSS中&#xff0c;文本溢出可以使用text-overflow属性来处理&#xff0c;下面分别介绍单行文本溢出和多行文本溢出的处理方法1&#xff1a; 单行文本溢出。需要使用text-overflow: ellipsis;来显示省略号。需要注意的是&#xff0c;为了兼容部分浏览器&#xff0c;还需要设置…

深度思考线程池面经之四:使用线程池的各种特性

8 线程池&#xff08;百度acg百度云一面&#xff09; 8.1 你是用到哪个线程池呢&#xff0c;在哪个场景中使用呢 答&#xff1a;在秒杀系统中使用了newCachedThreadPool这个线程池 8.2 自定义线程池的参数&#xff0c;你是怎么设置的呢 8.3 写一个自定义线程池&#xff0c;…

Python接口自动化-requests模块之post请求

一、源码解析 def post(url, dataNone, jsonNone, **kwargs):r"""Sends a POST request.:param url: URL for the new :class:Request object.:param data: (optional) Dictionary, list of tuples, bytes, or file-likeobject to send in the body of the :cl…

Vue.prototype详解

一&#xff1a;简介 在 Vue.js 中&#xff0c;经常会看到 this.$XXX 这种写法&#xff0c;那么这个是什么呢&#xff1f;其实这里就是使用 Vue.prototype 所定义的一个挂载到本身的全局方法&#xff0c;主要是为了防止全局变量的污染&#xff0c;所以我们来共同商议的一种写法…

软件项目管理实践指南:有效规划、执行和控制

软件项目管理是使软件产品、应用程序和系统成功交付的重要规程。它有助于确保软件在预算内按时开发&#xff0c;同时满足客户的质量和功能需求。 软件项目管理是管理软件项目生命周期的一种有组织的方法&#xff0c;包括计划、开发、发布、维护和支持。它是在满足客户需求的同时…

RocketMQ为什么要保证订阅关系一致

这篇文章&#xff0c;笔者想聊聊 RocketMQ 最佳实践之一&#xff1a;保证订阅关系一致。 订阅关系一致指的是同一个消费者 Group ID 下所有 Consumer 实例所订阅的 Topic 、Tag 必须完全一致。 如果订阅关系不一致&#xff0c;消息消费的逻辑就会混乱&#xff0c;甚至导致消息丢…

EMNLP 2023 录用论文公布,速看NLP各领域最新SOTA方案

EMNLP 2023 近日公布了录用论文。 开始前以防有同学不了解这个会议&#xff0c;先简单介绍介绍&#xff1a;EMNLP 是NLP 四大顶会之一&#xff0c;ACL大家应该都很熟吧&#xff0c;EMNLP就是由 ACL 下属的SIGDAT小组主办的NLP领域顶级国际会议&#xff0c;一年举办一次。相较于…

【Vue3 Antdv】Ant Design Vue文字溢出鼠标滑上显示tooltip。不溢出,鼠标滑上不显示tooltip

组件封装代码 <template><a-tooltip mouseenter"showToolTip" v-bind"getBindValue"><template #title>{{ props.title }}</template><slot><span>{{ props.title }}</span></slot></a-tooltip> &…

DB2 HADR 配置 centos 7配置 DB2 HADR 版本 11.1,【亲测可用】全网最细

DB2 HADR 配置 centos 7配置 DB2 HADR 版本 11.1&#xff0c;【亲测可用】全网最细的男人 操作系统 linux centos7 DB2版本 11.1 主库 192.168.46.70 备库 192.168.46.71 参考文章&#xff1a;一步一个脚印 DB2 10.5 HADR 主备库配置 前置条件 机器之间时间必须同步&#xff0…

C++11新特性(lambda,可变参数模板,包装器,bind)

lambda表达式是什么&#xff1f;包装器又是什么&#xff1f;有什么作用&#xff1f;莫急&#xff0c;此篇文章将详细带你探讨它们的作用。很多同学在学习时害怕这些东西&#xff0c;其实都是方便使用的工具&#xff0c;很多情况下我们学这些新的东西觉得麻烦&#xff0c;累赘&a…

uni-app开发微信小程序的报错[渲染层错误]排查及解决

一、报错信息 [渲染层错误] Framework nner error (expect FLOW INITIALCREATION end but get FLOW CREATE-NODE) 二、原因分析及解决方案 第一种 原因&#xff1a;基础库版本的原因导致的。 解决&#xff1a; 1.修改调试基础库版本 2.详情—>本地设置—>调试基础库…

扎根嵌入式行业需要什么学历文凭?

在嵌入式行业&#xff0c;学历并不是唯一关键。我本人拥有电子工程学士学位&#xff0c;但嵌入式行业更看重实际技能和经验。视频后方有免费的嵌入式学习资料&#xff0c;入门和进阶内容都涵盖其中。嵌入式行业一般接纳各种学历&#xff0c;从专科到本科到研究生&#xff0c;甚…

CentOS 安装MySQL 详细教程

参考:https://www.cnblogs.com/dotnetcrazy/p/10871352.html 参考:https://www.cnblogs.com/qiujz/p/13390811.html 参考:https://blog.csdn.net/darry1990/article/details/130419433 一、安装 一、进入安装目录 将账户切换到root账户下&#xff0c;进入local目录下 cd /usr…