html5布局

HTML5中,新增了以下与结构相关的元素:

  1. section
    表示页面中的一个内容区块,比如章节、页眉、或页面中的其他部分。
    可以与h1、h2、h3、h4、h5、h6等元素结合使用,标示文档结构。
    HTML5使用方法:
    <section>  </section>
  2. article
    表示页面中的一块与上下文不相关的独立内容。
    HTML5使用方法:
    <article>  </article>
  3. aside
    表示article元素的内容之外的与article元素的内容相关的辅助信息。
    HTML5使用方法:
    <aside>  </aside>
  4. header
    表示页面中一个内容区块或整个页面的标题
    HTML5使用方法:
    <header>  </header>
  5. hgroup
    用与对整个页面或页面中一个内容区块的标题进行组合。
    HTML5使用方法:
    <hgroup>  </hgroup>
  6. footer
    表示整个页面或页面中一个内容区块的脚注。
    一般包括创作作者的姓名、创作日期以及创作者联系信息。
    HTML5使用方法:
    <footer>  </footer>
  7. nav
    表示页面中导航链接的部分
    HTML5使用方法:
    <nav>  </nav>
  8. figure
    表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。
    使用figcaption元素为figure元素组添加标题。
    HTML5使用方法:
    <figure>
    <figcaption>第一</figcaption>
    <p>第一个例子</p>
    </figure>

比如说下图中的布局,html标签就可以用html5的结构标签来写,这些标签不代表布局,但语义上与它们的内容是一致的。

<header>
<h2>页头</h2>
</header>
<nav>
<h2>导航</h2>
</nav>
<aside>
<h2>侧边栏</h2>
</aside>
<article>
<h2>内容区</h2>
</article>
<footer>
<h2>页尾</h2>
</footer>

发表评论

电子邮件地址不会被公开。 必填项已用*标注