HTML5功能:您需要了解的内容

当我们使用table元素放置页面时,我们可能不知道语义和标准。如今,我们正在使用div左右中心。情况并不可怕,因为我们大多数人都在使用语义类和ID命名约定来描述div的功能。如果我们有一个页眉和页脚元素,它会不会更好? HTML5正是如此。

HTML5的最大资产之一是新的语义标记。 HTML5中添加了一些新的元素,并且由于“铺平了牛路径”的方法,今天的浏览器可以使用这些元素(虽然有些可能需要一点点来自JavaScript)。

以下是可用的新HTML5元素的非排他列表:

1.块结构

  • Article表示页面的一个组件,该组件由文档,页面,应用程序或站点中的自包含组合组成,旨在可独立分发或重用。这可以是论坛帖子,博客文章,报纸文章,用户评论或任何其他独立的内容项目。
  • Aside用于表示与旁边元素周围的内容相关的一部分内容,例如拉引号或侧边栏。
  • 页脚是一个部分的页脚。这不仅限于页面底部的一次使用。除了整个文档的页脚之外,您还可以使用页脚标记博客文章的页脚。
  • Header表示一组导航辅助工具,用于构建文档大纲。您也不仅限于使用标题一次;例如,您可以使用它来标记作者的姓名和发表在博客帖子上的评论的时间。
  • Nav用于包装主要导航块,例如目录,分页链接和面包屑。请注意,nav元素应该用于在网站上导航的链接,即不适合赞助商链接列表。
  • Section是一般文档或应用程序部分。但是,这不是div元素的替代品。仅当元素的内容将在文档的大纲中明确列出时,节才适用。

2.内联语义

  • 详细信息用于包括用户可以按需获取的其他信息。元素上的open属性确定是否可以看到其内容,并且可以由用户或JavaScript切换。
  • 图用于注释插图,照片,列表等,如果远离主要内容,则不会影响文档的流程。
  • 标记突出显示一行文本,例如标记用户正在搜索的术语。
  • 时间旨在以机器可读的方式编码现代日期和时间。此元素上的datetime属性给出了机器可读时间,而内容是人类可读的。

HTML5 features: deveria

了解a.deveria.com/caniuse/目前支持的HTML5功能

3.互动元素

以下元素包括允许它们正常运行的DOM接口方法。因此,如果浏览器没有具体实现这些元素,它们将无法工作。

但是,它们都支持使用标记中的嵌套元素进行回退,以降低到可用的解决方案。

  • 音频和视频都是媒体元素的类型。它们使您能够将音频和视频直接嵌入浏览器,而无需插件。但是,如果浏览器缺少支持,最佳做法表明您应该回到Flash插件。您可以让浏览器为元素渲染镶边,也可以通过JavaScript控制以创建定制界面。
  • source是音频和视频的子元素。它使您可以为媒体元素指定多个备用源。例如,Firefox不支持WAV音频格式,因此您可以使用Ogg Theora格式指定备用源。
  • canvas是一个2D绘图元素,可以使用JavaScript来动态渲染图形 - 例如,游戏,图形或动画。

HTML5 features: available features by browser

在撰写本文时,上述功能可在Chrome 3,Firefox 3,IE8,Opera 9.64和Safari 4.0中获得(表格由Molly Holzschlag提供)。

4.兼容性

如果新元素不依赖于浏览器可用的新DOM接口,则此元素现在可供您使用。媒体元素音频和视频具有新的DOM接口,因此只有那些专门实现这些媒体元素的浏览器才能提供本机音频或视频。

但是,这不应该阻止您使用这些元素。如果您使用视频元素并且浏览器不支持它,则会呈现其内容。

例如,对于我的视频元素,我将首先提供一个Ogg Theroa编码的视频,然后是QuickTime,如果不支持视频元素,则最终降级为Flash:

但是,有几个浏览器本身无法看到新元素。特别是,默认情况下,所有版本的Internet Explorer都无法看到这些元素,因此如果没有JavaScript的帮助,它们就无法进行样式设置。

Firefox 2和Camino 1在Gecko渲染引擎中有一个错误,导致DOM呈现错误。然而,Firefox 2去年的A级支持率有所下降,而且Firefox有一个非常稳固的升级路径(因此他们首先从A级支持中被淘汰)。

Camino的测试版本为2版,但尚未发布(可以说,它不是A级浏览器)。但是,有几种方法可以修复Firefox 2和Camino 1,你可以在这里阅读它们。



翻译字数超限