HTML5新增文档结构元素

为了更好的表达HTML文档和语义，HTML5新增了许多用于表达文档结构方面的元素，用以取代HTML4中的DIV元素。HTML5提提供的文档结构元素主要有header、article、section、nav、aside和footer等元素。

header元素
元素定义了页面或内容区域的头部信息，例如：放置页面的站点名称、logo和导航栏、搜索框等放置在页面头部的内容以及内容区域的标题、作者、发布日期等内容。

<header> 标记对之间可以包含h1-h6六个标题元素，以及p、span等元素...</header>

article元素
用于表示页面中一块与上下文不相关的独立内容，比如一个帖子、一篇博客文章。

标记对之间可以包含header、footer、section以及嵌套的article等元素。

    <article>
        <header>
            <h2>标题...</h2>
        </header>
        <p>段落...</p>
    </article>

section元素
用于对页面的某块内容进行分块，如将该快内容进一步分成章节的标题、内容和页脚等几部分。
标记对之间可以包含h1-h6六个标题元素、p元素、以及多个article元素以表示“分块”内容又包含多篇文章。此外，还可以嵌套section。

        <article>
            <header>
                <h2>...</h2>
            </header>
            <section>
                <h3>...</h3>
                <p>对文章内容使用section进行分块，块内通常包含标题和内容</p>
            </section>
                <section>
                <h3>...</h3>
                <p>...</p>
            </section>
        </article>

nav元素
用于定义页面上的各种导航条，一个页面可以拥有多个nav元素，作为整个页面或不同部分内容的导航。

<body>
        <header>
            <h1>美食DIY</h1>
        </header>   
        <div>
            nav定义页面的各种导航条
        <nav>
            <ul>
                <li><a href="...">西瓜</a></li>
                <li><a href="...">苹果</a></li>
                <li><a href="...">车厘子</a></li>
            </ul>
        </nav>
        </div>
        <div>一个新的导航条
            <nav>
            </nav>
        </div>
</body>

aside元素、
用于定义当前页面或当前文章的辅助信息，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等内容，通常作为侧边栏内容。

        <article>
                <h2>侧边栏内容</h2>
                <ul>
                    <li><a href="..."></a></li>
                </ul>
        </article>

footer元素
用于为页面或某个文章定义脚注内容，包括文章的版权信息、作者联系方式等内容，一个页面也可以包含多个footer内容。

        <footer>脚注内容
            <ul>
                <li>版权信息</li>
                <li>联系方式</li>
            </ul>
        </footer>

HTML5新增文档结构元素

HTML5新增文档结构元素

猜你喜欢