HTML简单容器元素

最新推荐文章于 2025-11-28 09:44:01 发布

原创最新推荐文章于 2025-11-28 09:44:01 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

html 专栏收录该内容

4 篇文章

订阅专栏

这个示例展示了HTML的基本结构，包括无语义的div元素和语义化的容器元素如header、footer、article、section和aside。内容包含一个图片和一个未填充的列表，以及空的section和article，旁边有一个aside元素用作侧边栏。

容器元素

容器元素：该元素代表一块区域，用于放置其他元素

div元素

没有语义

语义化容器元素

header：通常表示页头，或者文章的头部

footer：通常代表页脚，或者用于文章的尾部

article ：通常用于表述整篇文章

section: 通常表示文章的一段

aside:通常表示附加的信息，侧边栏

<!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>Document</title>
</head>
<body>
    <div>
        <div><img src="" alt=""></div>
        <div>
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, alias.</li>
                <li>Labore maxime possimus vero quae delectus aspernatur natus quas consectetur!</li>
                <li>Inventore illo debitis possimus necessitatibus quas fugiat quod? Similique, voluptatibus!</li>
                <li>Soluta animi ratione praesentium nihil magnam ex quia velit placeat!</li>
                <li>Ipsum repudiandae, fugit quia culpa consectetur dolorem aut adipisci velit!</li>
                <li>Numquam veniam doloremque soluta totam odio explicabo praesentium cum molestias!</li>
            </ul>
        </div>
    </div>
    <header></header>
    <section>
        <p></p>
    </section>
    <section>
        <p></p>
    </section>
    <article></article>
    <aside>adsa</aside>
    <footer></footer>
</body>
</html>