HTML 5深入淺出教學篇之二

作者：webabcd 2012-05-30 11:11:42

本文主要講到的是區塊元素 - body, article, section, header, footer, h1, h2, h3, h4, h5, h6, hgroup, aside, nav, address。

介紹

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>

[源碼下載]

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

責任編輯：張偉來源： webabcd的博客

HTML5