千呼万唤 HTML 5 (2) - 区块元素

来源：互联网发布：淘宝拍照用什么软件编辑：程序博客网时间：2024/05/21 17:08

原文地址：http://www.cnblogs.com/webabcd/archive/2011/09/19/2180990.html

作者：webabcd

介绍
HTML 5: 区块元素

区块元素 - body, article, section, header, footer, h1, h2, h3, h4, h5, h6, hgroup, aside, nav, address

示例
1、body - 用于定义文档的主体
element/section/body.html

<!doctype html><html><head>    <title>body</title></head><!--    body - 用于定义文档的主体。其相关事件处理属性如下--><body>    <script type="text/javascript" defer>        var body = document.body;        body.onafterprint = function () { alert("onafterprint"); };        body.onbeforeprint = function () { alert("onbeforeprint"); };        body.onbeforeunload = function () { alert("onbeforeunload"); };        body.onblur = function () { alert("onblur"); };        body.onerror = function () { alert("onerror"); };        body.onfocus = function () { alert("onfocus"); };        body.onhashchange = function () { alert("onhashchange"); };        body.onload = function () { alert("onload"); };        body.onmessage = function () { alert("onmessage"); };        body.onoffline = function () { alert("onoffline"); };        body.ononline = function () { alert("ononline"); };        body.onpagehide = function () { alert("onpagehide"); };        body.onpageshow = function () { alert("onpageshow"); };        body.onpopstate = function () { alert("onpopstate"); };        body.onresize = function () { alert("onresize"); };        body.onscroll = function () { alert("onscroll"); };        body.onstorage = function () { alert("onstorage"); };        body.onunload = function () { alert("onunload"); };    </script></body></html>

复制代码

2、article - 用于定义一段完整且独立的内容
element/section/article.html

<!doctype html><html><head>    <title>article</title></head><body>    <!--        article - 用于定义一段完整且独立的内容    -->    <article>        我是一段完整且独立的内容    </article></body></html>

复制代码

3、section - 用于定义文档内容中的某一部分
element/section/section.html

<!doctype html><html><head>    <title>section</title></head><body>    <article>        <!--            section - 用于定义文档内容中的某一部分        -->        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>    </article></body></html>

复制代码

4、header - 定义文档的页眉
element/section/header.html

<!doctype html><html><head>    <title>header</title></head><body>    <article>        <!--            header - 定义文档的页眉        -->        <header>学什么呢？</header>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>    </article></body></html>

复制代码

5、footer - 定义文档的页脚
element/section/footer.html

<!doctype html><html><head>    <title>footer</title></head><body>    <article>        <header>学什么呢？</header>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>        <!--            footer - 定义文档的页脚        -->        <footer>作者：webabcd</footer>    </article></body></html>

复制代码

6、h1 h2 h3 h4 h5 h6 - 用于定义 6 种不同级别的标题，h1 为最大标题，h6 为最小标题
element/section/h1_h2_h3_h4_h5_h6.html

<!doctype html><html><head>    <title>h1 h2 h3 h4 h5 h6</title></head><body>    <article>        <header>            <!--                h1 h2 h3 h4 h5 h6 - 用于定义 6 种不同级别的标题，h1 为最大标题，h6 为最小标题            -->            <h6>学什么呢？</h6>        </header>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>        <footer>作者：webabcd</footer>    </article></body></html>

复制代码

7、hgroup - 用于对文档某段内容的标题进行组合，使用 h1 h2 h3 h4 h5 h6 来标记标题的级别
element/section/hgroup.html

<!doctype html><html><head>    <title>hgroup</title></head><body>    <article>        <header>            <h6>                学什么呢？            </h6>        </header>        <!--            hgroup - 用于对文档某段内容的标题进行组合，使用 h1 h2 h3 h4 h5 h6 来标记标题的级别        -->        <hgroup>            <h1>webabcd 文章</h1>            <h2>谈谈学习</h2>        </hgroup>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>        <footer>作者：webabcd</footer>    </article></body></html>

复制代码

8、aside - 用于定义文档以外的，但却与文档相关的内容
element/section/aside.html

<!doctype html><html><head>    <title>aside</title></head><body>    <article>        <header>            <h6>                学什么呢？            </h6>        </header>        <hgroup>            <h1>webabcd 文章</h1>            <h2>谈谈学习</h2>        </hgroup>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>        <footer>作者：webabcd</footer>        <!--            aside - 用于定义文档以外的，但却与文档相关的内容        -->        <aside>            我还写了好多其他文章        </aside>    </article></body></html>

复制代码

9、nav - 用于定义导航链接（nav 是 navigation 的缩写）
element/section/nav.html

<!doctype html><html><head>    <title>nav</title></head><body>    <article>        <header>            <h6>                学什么呢？            </h6>        </header>        <hgroup>            <h1>webabcd 文章</h1>            <h2>谈谈学习</h2>        </hgroup>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>        <footer>作者：webabcd</footer>        <aside>            <!--                nav - 用于定义导航链接（nav 是 navigation 的缩写）            -->            <nav><a href="http://webabcd.cnblogs.com/" target="_blank">我还写了好多其他文章,单击这里查看</a></nav>        </aside>    </article></body></html>

复制代码

10、address - 定义文档作者的联系信息
element/section/address.html

<!doctype html><html><head>    <title>address</title></head><body>    <article>        <header>            <h6>                学什么呢？            </h6>        </header>        <hgroup>            <h1>webabcd 文章</h1>            <h2>谈谈学习</h2>        </hgroup>        <section>我要学习 html5</section>        <section>我要学习 flash</section>        <section>我要学习 silverlight</section>        <footer>            <!--                address - 定义文档作者的联系信息            -->            <address>                作者：webabcd，我的电话：911            </address>        </footer>        <aside>            <nav><a href="http://webabcd.cnblogs.com/" target="_blank">我还写了好多其他文章,单击这里查看</a></nav>        </aside>    </article></body></html>

OK
[源码下载]