笔记 - HTML5 for Web Designers - 100816 - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

笔记 - HTML5 for Web Designers - 100816

Blog - 读书 Monday, 16 August 2010 21:07

cover-html5-for-web-designe

Inline elements now have a content model of “text-level semantics.”
Many block level elements now fall under the banner of “grouping content”: paragraphs, list items, divs,and so on.
Forms have their own separate content model.
Images, audio,video, and canvas are all “embedded content.”
The new structural elements introduce a completely new content model called “sectioning content.”

The new sectioning content in HTML5 allows you to explicitly demarcate the start and the end of related content:

<h1>An Event Apart</h1>
<section>
  <header>
    <h2>Cities</h2>
  </header>
  <p>Join us in these cities in 2010.</p>
  <section>
    <header>
      <h3>Seattle</h3>
    </header>
    <p>Follow the yellow brick road.</p>
  </section>
  <section>
    <header>
      <h3>Boston</h3>
    </header>
    <p>That's Beantown to its friends.</p>
  </section>
  <section>
    <header>
      <h3>Minneapolis</h3>
    </header>
    <p>It's so <em>nice</em>.</p>
  </section>
</section>
<small>Accommodation not provided.</small>

In HTML5, each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of what heading level you should be using—you can just start from h1 each time:

<h1>An Event Apart</h1>
<section>
  <header>
    <h1>Cities</h1>
  </header>
  <p>Join us in these cities in 2010.</p>
  <section>
    <header>
      <h1>Seattle</h1>
    </header>
    <p>Follow the yellow brick road.</p>
  </section>
  <section>
    <header>
      <h1>Boston</h1>
    </header>
    <p>That’s Beantown to its friends.</p>
  </section>
  <section>
    <header>
      <h1>Minneapolis</h1>
    </header>
    <p>It's so <em>nice</em>.</p>
  </section>
</section>
<small>Accommodation not provided.</small>

Now the content is truly portable. It doesn’t matter whether it’s appearing on its own page or on the home page:

<h1>My awesome blog</h1>
<article>
  <h1>Cheese sandwich</h1>
  <p>My cat ate a cheese sandwich.</p>
</article>

HTML5 offers a solution to this problem in the shape of the scoped attribute, which can be applied to a style element.Any styles declared within that style element will only be applied to the containing sectioning content:

<h1>My awesome blog</h1>
<article>
  <style scoped>
    h1 { font-size: 75% }
  </style>
  <h1>Cheese sandwich</h1>
  <p>My cat ate a cheese sandwich.</p>
</article>