HTML5新增文档结构标签

HTML5新增文档结构标签

1. 页眉标签 header
2. 导航标签 nav
3. 节标签 section
4. 文章标签 article
5. 侧栏标签 aside
6. 页脚标签 footer

在这里插入图片描述
在这里插入图片描述
以上标签运用的代码以及效果如下：

<!DOCTYPE html>
<html>
    <head>
        <title>
            测试2
        </title>
        <link rel="stylesheet"href="ch02HTML5基础\ch02HTML5\css\html5.css">
    </head>
    <body>
        <header>
            <h1>页眉header</h1>
        </header>
        <div>
            <nav>
                <a href="http://www.baidu.com">百度</a>
                <a href="http://www.csdn.net">csdn</a>
            </nav>
            <aside>
                <h3>侧栏Aside</h3>
                <p>侧栏内容1</p>
                <p>侧栏内容2</p>
            </aside>

            <section>
                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                        <h2>文章页脚Article Footer</h2>
                    </footer>
                </article>

                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                        <h2>文章页脚Article Footer</h2>
                    </footer>
                </article>
            </section>

            <aside>
                <h3>侧栏Aside</h3>
                <p>侧栏内容1</p>
                <p>侧栏内容2</p>
            </aside>

            <footer>
                <h2>页脚Footer</h2>
            </footer>
        </div>
        
    </body>
</html>

在这里插入图片描述

版权声明：本文为qq_47299421原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。