HTML5新增文档结构标签

最新推荐文章于 2022-04-30 22:18:35 发布

勤奋的懒羊羊o

最新推荐文章于 2022-04-30 22:18:35 发布

阅读量890

点赞数

分类专栏： HTML 文章标签： html5 HTML

本文链接：https://blog.csdn.net/qq_47299421/article/details/120117810

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述