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

一、HTML5简介

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

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>

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

二、HTML5 新增语义化标签

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

1. <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. <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. <section> 标签表示文档中的一个区域一般用于分块如文章中的正文、评论、推荐等。

<section>
  <h2>关于我们</h2>
  <p>我们是一家致力于提供最优质服务的公司...</p>
</section>

1. <article> 标签表示文档中的一篇文章、博客或新闻等一般包含标题、作者、时间、正文等。

<article>
  <h1>如何学好前端开发</h1>
  <p>本文将介绍如何学好前端开发...</p>
  <div class="author-info">
    <span class="author">作者小明</span>
    <span class="date">发布时间2020年5月1日</span>
  </div>
</article>

1. <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. <footer> 标签表示页面的底部区域一般包含版权信息、联系方式等。

<footer>
  <p>版权所有 © 2020-2021</p>
  <p>联系方式123456789</p>
</footer>

三、HTML5 新增多媒体标签

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

<audio> 标签

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

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

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

<video> 标签

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

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

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

除了 src 和 controls 属性之外还可以设置其他属性来调整视频播放的选项如 autoplay、 loop、 muted 等。

<canvas> 标签

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

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

id 属性为 <canvas> 元素定义一个唯一的标识符。 width 和 height 属性为 <canvas> 元素定义绘图区域的宽度和高度。

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

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

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

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