HTML 5 结构标签演示答案

【问题标题】：HTML 5 Structure tags demoHTML 5 结构标签演示
【发布时间】：2011-02-06 16:16:01
【问题描述】：

我找不到结构标签的演示 <header>、<footer>、<articles> ... http://brucelawson.co.uk/tests/html5-elements.html 在这里，类似这样，但突出显示了每个元素请帮忙

【问题讨论】：

demo = html 5 页面示例 :)
这就是为什么 HTML 很棒的原因：您可以复制他的示例，将其粘贴到文本编辑器中，将其保存为“test.html”，加水，然后在浏览器中打开它。即时演示！
但是如何使用突出显示的部分（
，，）？

标签： html tags demo

【解决方案1】：

有一篇很好的文章列表分开（像往常一样）： http://www.alistapart.com/articles/previewofhtml5

对于简单的结构，可以将“article”和“aside”包含在“section”中，但如果您只有一个section，则这不是强制性的。

例如：

<header>...</header>
<section>
  <article>...</article>
  <aside>...</aside>
</section>
<footer>...</footer>

等同于：

<header>...</header>
  <article>...</article>
  <aside>...</aside>>
<footer>...</footer>

但是由于这个标签非常灵活，它们并没有固定在一个地方，例如：

<header>...</header>
<section>
  <header>...</header>
  <nav>...</nav>
  <aside id="navbar1">...</aside>
  <article>
    <header>...</header>
    <section>...</section>
    <aside>...</aside>
    <footer>...</footer>
  </article>
  <aside id="navbar2">...</aside>
  <footer>
  </footer>
</section>
</section>...</section>
<nav>...<nav>
<footer>...</footer>

【讨论】：

【解决方案2】：

两个很好的资源是HTML5 Doctor 和HTML5 Gallery。他们分别提供了有关如何使用新 HTML5 标记的详细文章和使用它们的网站示例。

【讨论】：

brucelawson.co.uk/tests/html5-elements.html 在这里，类似这样，但突出显示每个元素

【解决方案3】：

上面的帖子是正确的，但是导航工具应该使用<nav>标签，这是更语义化的代码。（注意：不要对全局容器使用 section 标签，使用 <div id="main"> 甚至 <body> 与重新排列的页眉和页脚）：

<header>...</header>
<div id="main">
  <header>...</header>
  <nav>...</nav>
  <aside class="nav_container">
    <nav id="navbar1">...<nav>
  </aside>
  <article>
    <header>...</header>
    <section>...</section>
    <aside>...</aside>
    <footer>...</footer>
  </article>
  <aside class="nav_container">
    <nav id="navbar2">...<nav>
  </aside>
  <footer>
  </footer>
</div>
</section>...</section>
<nav>...<nav>
<footer>...</footer>

【讨论】：

【解决方案4】：

最好用html5引入

【讨论】：