简单布局演示

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>简单布局演示</title>
    </head>
    <body>
        <!--1. div+id布局-->
        <div id="header">页眉</div>
        <div id="main">主体</div>
        <div id="footer">页脚</div>
        <!--2. div+class布局-->
        <div class="header">页眉</div>
        <div class="main">主体</div>
        <div class="footer">页脚</div>
        <!--3. 语义化布局-->
        <header>页眉</header>
        <main>主体</main>
        <footer>页脚</footer>
        <!--4. 优化div+class布局-->
        <div class="article header">文章页眉</div>
        <div class="article main">文章主体</div>
        <div class="article footer">文章页脚</div>
    </body>
</html>