HTML5 - html5标签的变化

浏览数：37 / 时间：2015年06月09日

html5标签的变化

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>html5标签的变化</title>
        <style type="text/css">
            /* html5中所有结构标签本质上就是div标签，只是其具有意义 */
            /* 页面头部header */
            header{
                height:150px; background:red;
            }
            nav{
                height:30px;
                background:pink;
                margin-top:100px;
            }
            nav ul li{
                float:left;
                width:100px;
                height:30px;
                line-height:30px;
            }
            /* 页面中间 */
            div{
                height:400px;
                margin-top:10px;
            }
            section{
                height:400px;
                background:yellow;
                width:70%;
                float:left;     
            }
            article{
                background:#ccc;
                width:300px;
                margin:0 auto;
                text-align:center;
            }
            aside{
                height:400px;
                background:blue;
                width:28%;
                float:right;
            }
            /* 页面底部footer  */
            footer{
                height:100px;
                background:green;
            }
        </style>
    </head>
    <body>
        <!-- 男：<input type="checkbox" value="male" checked/> -->
        <header>
            <p>这是一个header</p>
            <nav>
                <ul>
                    <li>首页</li>
                    <li>公司概况</li>
                    <li>高端课程</li>
                    <li>专业师资</li>
                    <li>院校合作</li>
                    <li>企业服务</li>
                    <li>网博动态</li>
                    <li>在线测试</li>
                </ul>
            </nav>
        </header>
        <div>
            <section>
                <p>这是一个section</p>
                <article>
                    <h2>小苹果</h2>
                    <p>
                        你是我的小呀小苹果<br/>
                        怎么爱你都不嫌多<br/>
                        你是我的小呀小苹果<br/>
                        怎么爱你都不嫌多<br/>
                        你是我的小呀小苹果<br/>
                        怎么爱你都不嫌多<br/>
                        你是我的小呀小苹果<br/>
                        怎么爱你都不嫌多<br/>
                    </p>
                </article>
            </section>
            <aside>
                <p>这是一个aside</p>
            </aside>
        </div>
        <footer>
            <p>这是一个footer</p>
        </footer>
    </body>
</html>