Dzwebs.Net

撰写电脑技术杂文十余年

使用HTML5的条件及新增的元素

Admin | 2015-4-11 7:00:27 | 被阅次数 | 4141

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  为了能够保证能顺利使用使用HTML5,建议您在开发 HTML5 和 CSS3 应用程序时在您的系统上安装以下 Web 浏览器的最新版本:

  Mozilla Firefox(版本3.5+)
  Apple Safari(版本 4.0+)
  Opera(版本 10.0+)
  Google Chrome(版本 3.0+)

  我们不需要任何特定软件来编写 HTML 和 CSS 代码;任何基本文本编辑器都可以(例如 Notepad、vi、emacs 等等)。

  新的语义元素

  HTML 5 引入的主要语义元素包括:

  <header>
  此元素用于定义 Web 页面的某些部分的标题,可以是整个页面、<article> 元素或 <section> 元素。

  <footer>
  与 <header> 元素类似,此新元素定义页面的某些部分的页脚。页脚不一定是在页面、文章或区域的结尾,但是它通常是在那个位置。

  <nav>
  这是 Web 页面上主要导航链接的容器。此元素不应用于所有链接组,而是应仅用于主要导航块。如果您有一个 <footer> 元素包含导航链接,不需要将这些链接封装在 <nav> 元素中,因为 <footer> 元素将可以独自包括这些链接。

  <article>
  <article> 元素用于定义页面上可以独自分布的独立项目,例如新闻项目、博客或评论。此类项目通常使用 RSS feed 来联合。

  <section>
  此元素表示文档或应用程序的一部分,例如,文章或教程的一章或一节。例如,您现在正在阅读的章节在 HTML5 中可以使用 <section> 元素括起来。<section> 元素通常具有一个页眉,虽然严格来说是不需要的。例如,您现在正在阅读的章节的页眉将包含文本 “语义元素”。

  <aside>
  此新元素可以用于标记边栏或一些将认为与其周围内容有点无关的内容。此项的一个例子就是广告块。

  <hgroup>
  在某些情况下,页面、文章或区域可能需要多个标题,例如,您有一个标题和一个副标题。例如,本教程具有标题 “使用 HTML5 和 CSS3 创建现代 Web 站点” 和副标题 “在 HTML5 中实施 canvas 和 video 元素”。您可以在 <hgroup> 元素中封装这些标题,使用 <h1> 元素表示主标题,<h2> 元素表示副标题。

  <canvas> 元素
  <canvas> 元素最初是由 Apple® 开发的,用于 Mac OS X Dashboard 部件和 Safari 中,但是后来被 Mozilla® 和 Opera® 用于它们的 Web 浏览器中。该元素已经被标准化并与一系列 2D 绘图 API 包括在 HTML5 规范中,这些 API可以用于创建该元素内的形状、文本、过渡和动画。

  许多人相信 <canvas> 元素是 HTML5 最重要的一个方面,因为它可以促进快速创建图表、交互式游戏、绘图应用程序以及其他图形,而无需 Adobe Flash 等外部插件。

  <canvas> 元素自身是非常基础的,定义对象的宽度、高度和惟一 ID。然后,开发人员必须使用一系列 JavaScript API 在 canvas 实际绘制对象,通常是在 Web 页面已经完成了呈现后。这些 API 允许开发人员绘制形状和线条;应用颜色、不透明性以及倾斜度;转换 canvas 对象;以及执行动画。这些 API 还允许 <canvas> 成为交互式的并对鼠标操作和键操作等用户输入做出响应,从而促进在 canvas 上创建游戏和 Web 应用程序。您将在本教程后面部分的示例 HTML5/CSS3 Web 站点中看到 <canvas> 元素操作的示例。

  使用 <audio> 和 <video>

  最近这些年,视频和音频的配置基本上是通过 Flash Video (.flv) 文件格式和 Adobe Flash 平台来促成的。

  但是,HTML5 支持两种新元素 <audio> 和 <video>,这样 Web 开发人员就可以在不依赖用户安装额外浏览器插件的情况下包括多媒体内容。如果用户选择使用这些元素,多个浏览器(包括 Mozilla Firefox、Apple Safari 和 Google Chrome)已经开始支持这些新元素并提供标准浏览器播放控件。另外,如果开发人员希望创建自己的播放控件,已经提供了一组标准 JavaScript API 来允许开发人员这样做。原生多媒体播放控件的一个重要优点是理论上它需要较少的 CPU 资源,从而可以节约能量。

  但是,这些新多媒体元素的一个重要问题是每个浏览器支持的文件格式以及这些文件可以用来编码的各种 codec 的专利许可问题。Mozilla 和 Opera 希望使用开放源 Theora 视频容器和 codec,其对于在 Web 浏览器中包括 codec 不需要专利许可。另一方面,Apple 和 Google 不满意 Theora 的质量,特别是对于交付高清晰度(HD)内容方面,类似于 YouTube。它们更喜欢 H.264 codec,通常包含在 MP4、MOV 或 MKV 文件中。

  但是,该问题不仅存在于视频,音频 codec 具有同样的问题。MP3 和 AAC 格式是有专利限制的,而 Vorbis 格式没有。Vorbis 音频的问题是其未被广泛使用,因为可移植媒体播放器和许多媒体软件应用程序不支持它。

  在不久的将来,关于 HTML5 <video> 和 <audio> 需要做出许多决策,人们将非常有兴趣来了解在最终的建议中将推动哪种 codec 和格式。同时,您可以通过使视频可用于各种格式以及通过提供 Flash 视频作为最后的选择,来尝试支持所有浏览器。让我们希望可以做出最终决策,而不要留给浏览器供应商去确定要从支持哪种格式,那样将基本上表示这些新元素是无用的。


该杂文来自: 网页制作杂文

上一篇:JS代码中的$是什么

下一篇:html文本框 onchange onpropertychange onblur on

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计