HTML5容器元素的使用---语义化

容器元素(HTML5之前)

容器元素:该元素代表一块区域,内部用于放置其他元素

div元素

在HTML5之前容器元素很简单只有div,在HTML5之后非常强调语义化,开始有了语义化容器

语义化容器元素列举(HTML5之后)

header:通常用于表示页头,也可以表示文章的头部
footer:通常用于表示页尾,也可以表示文章的尾部
article:通常用于表示整篇文章
section:通常用于表示文章的章节
aside:通常用于表示侧边栏,附加信息,不是很重要的信息:日历、活动。。。

语义化元素的使用(HTML5之后)

一个页面如果有文章,那么它的语义化元素可以这样排布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器元素</title>
</head>
<body>
    <div></div>
    <div></div>
    <header></header>
    <article>
        <header>
            <h1>文章的标题</h1>
            <div></div>
        </header>
        <section>
            <h2>章节1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quaerat deleniti nemo, et quibusdam officia voluptatum dicta saepe? Dolore, iste!</p>
            <p>Quisquam officiis necessitatibus consequatur expedita doloremque obcaecati dolorem. Excepturi at officiis tempore, corporis harum ut quia dolor deleniti maiores a.</p>
            <p>Consequatur hic ipsa iste, dolor consectetur provident debitis similique sed autem ut quia ea quis est error corrupti illum quasi?</p>
        </section>
        <section>
            <h2>章节2</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quaerat deleniti nemo, et quibusdam officia voluptatum dicta saepe? Dolore, iste!</p>
            <p>Quisquam officiis necessitatibus consequatur expedita doloremque obcaecati dolorem. Excepturi at officiis tempore, corporis harum ut quia dolor deleniti maiores a.</p>
            <p>Consequatur hic ipsa iste, dolor consectetur provident debitis similique sed autem ut quia ea quis est error corrupti illum quasi?</p>
        </section>
        <section>
            <h2>章节3</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quaerat deleniti nemo, et quibusdam officia voluptatum dicta saepe? Dolore, iste!</p>
            <p>Quisquam officiis necessitatibus consequatur expedita doloremque obcaecati dolorem. Excepturi at officiis tempore, corporis harum ut quia dolor deleniti maiores a.</p>
            <p>Consequatur hic ipsa iste, dolor consectetur provident debitis similique sed autem ut quia ea quis est error corrupti illum quasi?</p>
        </section>
        <aside>
            <div>日历</div>
            <div>时间等等附加信息</div>
        </aside>
    </article>
    <footer></footer>
</body>
</html>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×