《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.1 HTML5的新元素

  1. 云栖社区>
  2. 博客>
  3. 正文

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.1 HTML5的新元素

异步社区 2017-05-02 10:45:00 浏览990
展开阅读全文

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第2章,第2.1节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.1 HTML5的新元素

一系列新的语义元素是HTML5的主要新功能之一。当用标题、列表和段落来标记科学文档时,语义元素能从词根扩展。大多数扩展后的新元素能为页面提供更好的结构;还能为开发人员提供更多的选项来标记各领域内容,而非仅限于使用带有一个相关联id或类的div。

举个例子,在过去,开发人员可能会使用:

c44f384f76630a1faf1b931fe485fe6e3e668bc4

有了HTML5,开发人员可以选择使用:

0921ec34e9bc4ca22daf5da2a878fdbd7d27bf53

万维网联盟的HTML5规范列出10个结构元素。其中,3个已经在HTML4中存在:body、h1–h6(为方便起见,我们把h1–h6看作一个单一的实体)、address。其余的7个新元素中,4个是所谓的分节内容(sectioning content)元素。我会在下文阐明什么是分节内容(sectioning content)元素,但首先我要介绍一下这7个元素。

article 文档或网站的一个独立部分,如论坛帖子、博客条目或用户提交的评论。

aside 页面的一个区域,它和周围的内容关系不大。它可以被视为单独的一部分,像一篇杂志文章的侧边栏。

nav 文档中的导航区域,这个区域包含其他文档或同一文档其他领域的链接。

section 内容的一个专题组合,例如书中的一个章节,标签对话框中的一个页面,或者网站主页上的介绍。

其他三个用来定义分节内容中区域的结构元素:

footer 文档或文件区域的页脚,通常包含其所在section的有关元数据,例如作者的详细信息。

header 可能是文档的标题,但也可能是文档中一个区域的头部,通常含有标题(h1–h6)元素来标记标题。

hgroup 用于一组多层次标题元素的分组,如副标题或标语。

HTML5还有一些不影响页面基本结构的其他新元素,在必要的时候,我会在书中的其他章节介绍它们。现在,让我们来更深入地了解为什么以上10个新元素会被最先创建出来。

2.1.1 新元素的作用

设定这些新元素的目的是为了提供清晰的文档大纲,从而使浏览器和其他机器(尤其是像屏幕阅读器这样的辅助技术)能更好地解析文档大纲。试想,这些大纲就像文档结构图,显示其内容的层次结构。在该层次结构中,标题最重要,它与内容区域是父子关系,等等。

在HTML4中,这项任务通常使用从h1到h6的标题(header)元素来完成:h1是页面上独一无二且最重要的标题;h2元素通常是h1的直系子标题,以此类推。下面的示例在HTML4中相当常见:

5018cfca48b25c74422d92dad0f881a92751c952

嵌套标题以这种方式创建该文档大纲:

Great Apes(类人猿)

a.Gorilla(大猩猩)

i.Eastern Gorilla(东部大猩猩)

ii.Western Gorilla(西部大猩猩)

b.Orangutan(猩猩)

注释:
类人猿迷会注意到我遗漏了矮黑猩猩和黑猩猩。这样做是因为考虑到空间和清晰度,而并非出于任何偏见。
我创建的这个结构视觉感官强,以这种方式使用标题来创建文档大纲被称为隐式分节(implicit sectioning)。

在HTML5中,分节内容元素更早出现,在大纲中创建节(sections),而非这些节(sections)中的标头(headers),这被称为显式分节(explicit sectioning)。所以,为了在HTML5中获得相同的类人猿标记结构,则需使用以下代码:

39043df2e8ecdcbc43764a4e8ad00505029f9596

最后产生的大纲会和HTML4的大纲相同,因为每个section元素或article元素在大纲中创建出一个新节(section)。section和article就是我前面提到的分节内容元素,还有另外两个分节内容元素是:aside和nav。

大纲的每个节应该有一个标题—任何标题都行。在我的示例中,我全部使用h1标题,但是,使用什么级别的标题并不重要,因为分节内容是用来创建新节的。我甚至可以通过掷骰子的方式得到不同的数字,从而决定每个标题使用哪个级别,以区别于其他标题。

注释:
我在这里有点油腔滑调了。读者可以(而且应该)仍然使用从h1到h6的分层方式,因为这有助于向后兼容性,并会使样式设计更容易。
标题(或可能一个包含标题的hgroup元素)和每个节都可以包含不同的header和footer,还可以包含进一步的节和分节根(sectioning root)。这些根是像blockquote和figure这样的元素,它们可以有自己的大纲,但对整体的文档大纲不起作用。

如果我这么解释读者还不是很懂,并不能说明你没认真阅读前面的内容。对每个分节内容元素的作用含糊不清,这种情况非常普遍,所以,为了帮助读者根据手头的任务来选择正确的元素,HTML5 Doctor创建了一张流程图(见图2-1)。

一张流程图。它可以协助选择元素。如果你善于根据说话的语气做出判断,那么可能已经开始感觉到,我并不是新HTML5结构元素的粉丝。如果真是这样,那你就猜对了。

2.1.2 HTML5分节元素的不利之处

正如前面那个小节所暗示的那样,我的挫败感越来越容易被察觉,要想掌握其中的一些新元素,可能相当富有挑战性,特别是在理解article和section之间区别的时候。概括来说:一个section可能包含多个article和多个section,并且,一个article可能包含某些section或article,此外,它们两者都会在大纲中创建出section。article和section两者之间是有区别的,但是,没有人—甚至HTML5规范的创作者也没能—设法给出一个清晰简洁、方便开发人员记忆的定义。

141cfb778594cd64a8488733b8bd656dfc6ad1ed

在Luke Stevens《The Truth About HTML5》(CreateSpace,2012)这本书中,Luke Stevens对article的隐晦描述是这么评价的:

如果HTML5规范把事情留给你来解决,那它就失效了,因为HTML5规范的全部意义就在于确切地指定你应该做什么。但是现在,它的解释是开放的,并且,到现在为止,还没有带来明显的益处。它是对现有功能的重复……
我太同意他说的话了。我预测,除非可以找到更加清晰的定义,否则,很多人会严重滥用这些元素。

出于技术的原因,我建议在开放的万维网上不要使用这些新元素。首先,较老的IE版本(IE8和8以下版本)根本不支持新元素。为了使老IE版本的浏览器识别出它们,就不得不先用JavaScript来创建它们。当然,这相当简单,只需使用条件注释来实现受大众欢迎的HTML5Shiv:

feb98e7688c152a0b56d61266a82561a76c97ecf

但是,这样做会使访问者对JavaScript产生依赖。对于每一个使用旧版本IE的访问者来说,他们的JavaScript都会失效,使得不能看到任何内部含有新元素的内容。虽然,这样的用户可能仅仅占很少的一部分,但是可访问性应该意味着每个人都能看到你的内容。如论坛帖子、博客条目或

其次,也是最重要的一点,目前没有可用的浏览器支持新的大纲算法(JAWS屏幕阅读器支持,但总是出错)。所以,你所有的努力并没有真正起到作用—当然,这一点在未来很可能会有所改变。

当然,是否要使用新结构元素,最后还得自己来决定。这不是强制性的—你可以和以前一样,仍然使用div元素。其实,我发现,很难推荐大家来使用这些新元素,除非有人已经为阅读HTML5规范做好了准备,并且能充分理解新元素在文档大纲中如何确切地起作用—而且,在他所处的工作环境中,老式浏览器不会成为一个问题。因为这些东西还处于编写阶段,我将寻找另一种方法来讲解页面结构。幸运的是,正好有一种方法能派上用场,它就是WAI-ARIA。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注