思洋互动网站建设学前班

使用HTML 5大纲（3）

可能潜在的是相同的标题层级，你当然希望应用同样的样式（你也同样可能不希望这么做）。这可能会导致样式表中庞大的一段规则。对于一个新的CSS伪类或伪元素，我们已经介绍过一些，例如heading(n)，这是可能的（因为浏览器根据大纲算法“知道”一个标题是什么级别），并且这将会简化样式化：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. *:heading(1) {font-size: 2.5em;} /* a logical <h1> */  
2. *:heading(2) {font-size: 2em;} /* a logical <h2> */ 

然而，在编写本书时，这还只是一个美丽的梦。作为一种临时性的替代，Mozilla在Firefox的Nightly版中试验一种新的选择器分组机制，它叫做:-moz-any()，它允许一种CSS缩写形式，参见hacks. mozilla.org/2010/05/ moz-any-selector-grouping/。

可能由于这一原因，你会尝试只使用<h1>元素来简化样式化，并且让大纲算法来做剩下的事情。毕竟规范提到：“节可能包含任何层级的标题，但是强烈建议开发者要么只使用h1元素，要么对节的嵌套层级使用对应的层级的元素”。但是不应该使其损害可访问性。

大纲算法和可访问性

WebAim最近的调查显示，76%的屏幕阅读器用户“总是或经常”应用标题导航（参见完整的调查以了解更重要的信息，www.webaim .org/ projects/screenreadersurvey2/）。这些人使用标题的层级，既会给他们所在的文档的一个心理概览（也就是大纲），也会由此来导航内容。大多数屏幕阅读器都有键盘快捷方式，允许用户在标题之间跳转。例如，JAWS屏幕阅读器用户使用H键在标题之间跳转，1键跳转到下一个<h1>，2键跳转到下一个<h2>，依次类推。

当前，还没有浏览器根据前面提到的所有复杂规则来构建页面结构的一个内部模型，因此，还无法将这一模型暴露给任何屏幕阅读器或辅助性技术。因此，只使用<h1>会破坏导航模型，并且会妨碍页面的可访问性。

我们的建议再一次遵从规范：“对节的嵌套层级，使用相应的层级的元素”。也就是说，在你的页面中，即便没有新的HTML 5元素的影响，也要确保标题的层级正确。这将会使得编写CSS更容易。
广州网站建设,网站建设,广州网页设计,广州网站设计

在Twitter上对屏幕阅读器用户进行的一次完全非学术性的调查表明，当文章是从一个站点到另一个站点聚合而来，并且层级可能会乱套的情况下，糟糕的嵌套的节标题也好过于所有的标题都使用同样的层级（而后者仍然好过根本没有标题）。并且，尽自己能力去做好，然后，等待浏览器和屏幕阅读器对节标题实现大纲算法。正如我所说过的，这不是一个理想的世界。

<article>和<section>有何区别

在html5doctor.com上，人们经常会问我们这个问题。

文章是一个独立的、单独的一段离散的内容。想想一篇博客帖子，或者基于文档的站点中的一个新内容项。在Web应用程序中，<article>可能是一个E-mail应用程序中的单个的E-mail，或者基于Web的反馈阅读中的一篇报道，因为每封E-mail或每篇报道都是该应用程序的一个部分，并且可以独立地重用。

<article>

考虑下面这篇现实世界的博客/新闻文章：

1. <article> 
2. <h1>Bruce Lawson is World's Sexiest Man</h1> 
3. <p>Legions of lovely ladies voted luscious lothario Lawson  
4.  as the World's Sexiest Man today.</p> 
5. <h2>Second-sexiest man concedes defeat</h2> 
6. <p>Remington Sharp, jQuery glamourpuss and Brighton  
7.  roister-doister, was gracious in defeat. "It's cool being  
8.  the second sexiest man when number one is Awesome Lawson"  
9.  he said from his swimming pool-sized jacuzzi full of  
10.  supermodels.</p> 
11. </article> 

它可以由RSS或其他方法聚合，不需要更多的上下文就有意义。就像你能够聚合部分的反馈一样，一篇“广告”文章仍然是一篇文章：

1. <article> 
2. <a href=full-story.html> 
3.  <h1>Bruce Lawson is World's Sexiest Man</h1> 
4.  <p><img src=bruce.png alt="bruce lawson">Legions of lovely  
5.   ladies voted luscious lothario Lawson as the World's  
6.   Sexiest Man today.</p> 
7.  <p>Read more</p> 
8. </a> 
9. </article> 

正如你已经看到的，博客帖子上的评论是位于一个父<article>内的<article>。除了评论，这一嵌套还有其他的用途，例如，视频的字幕：

1. <article> 
2. <h1>Stars celebrate Bruce Lawson</h1> 
3. <video>...</video> 
4.  
5. <article class=transcript> 
6. <h1>Transcript</h1> 
7.  <p>Supermodel #1: "He's so hunky!"</p> 
8.  <p>Supermodel #2: "He's a snogtabulous bundle of gorgeous  
9.   manhood! And I saw him first, so hands off!"</p> 
10. </article> 
11.  
12. </article> 

字幕完全自成一体，即便它是和外围<article>中的视频相关的。规范提到：“当嵌套了article元素，内部的article元素表示大体上与外围的article内容相关联的文章”。

<section>

另一方面，<section>不是“文档、页面、应用程序或站点中的一个自包含部分，并由此专用于独立地分类或复用”。它是将页面分节为不同主题区域的一种方法，或者是把文章划分为节的一种方法。

考虑这段HTML 4标记，这是Remy之前的工作，即《绿野仙踪》的非百老汇版本中的规则：

1. <h1>Rules for Munchkins</h1> 
2. <h2>Yellow Brick Road</h2> 
3. <p>It is vital that Dorothy follows it-so no selling bricks  
4.  as "souvenirs"</p> 
5. <h2>Fan Club uniforms</h2> 
6. <p>All Munchkins are obliged to wear their "I'm a friend of  
7.  Dorothy!" t-shirt when representing the club</p> 
8. <p><strong>Vital caveat about the information above:  
9.  does not apply on the first Thursday of the month.  
10.  </strong></p>