钟文志的部落格

Appearance

在 HTML 中，区块元素用于将内容分组和布局。这些元素通常占据其父容器的整个宽度，并在其上方和下方形成分隔。以下是一些常见的 HTML 区块元素及其用途和示例：

常见的区块元素 ​

  1. <div>：通用的容器元素，用于将内容分组。
  2. <header>：定义文档或节的头部内容。
  3. <nav>：定义导航链接的容器。
  4. <section>：定义文档中的节（section）。
  5. <article>：定义独立的内容区块。
  6. <aside>：定义与主内容相关的附加内容。
  7. <footer>：定义文档或节的页脚。
  8. <main>：定义文档的主要内容。

使用示例 ​

1. <div> 元素 ​

<div> 是一个通用的容器，可以包含任何其他 HTML 元素。通常用于布局和样式化。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div 示例</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>这是一个 div 容器</h1>
        <p>div 元素可以包含各种其他 HTML 元素。</p>
    </div>
</body>
</html>

2. <header> 元素 ​

<header> 元素用于定义文档或节的头部内容，通常包含标题、导航等。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header 示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

3. <section> 元素 ​

<section> 元素用于定义文档中的独立章节。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>section 示例</title>
</head>
<body>
    <section>
        <h2>第一节</h2>
        <p>这是第一节的内容。</p>
    </section>
    <section>
        <h2>第二节</h2>
        <p>这是第二节的内容。</p>
    </section>
</body>
</html>

4. <article> 元素 ​

<article> 元素用于定义独立的内容区块，例如博客文章、新闻文章等。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article 示例</title>
</head>
<body>
    <article>
        <h2>文章标题</h2>
        <p>这是文章的第一段内容。</p>
        <p>这是文章的第二段内容。</p>
    </article>
</body>
</html>

5. <aside> 元素 ​

<aside> 元素用于定义与主内容相关的附加内容，如侧边栏、广告等。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside 示例</title>
</head>
<body>
    <main>
        <article>
            <h2>主要内容</h2>
            <p>这是文章的主要内容。</p>
        </article>
    </main>
    <aside>
        <h2>附加内容</h2>
        <p>这是与主要内容相关的附加信息。</p>
    </aside>
</body>
</html>

6. <footer> 元素 ​

<footer> 元素用于定义文档或节的页脚，通常包含版权信息、联系信息等。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer 示例</title>
</head>
<body>
    <footer>
        <p>&copy; 2024 网站名称. 版权所有.</p>
    </footer>
</body>
</html>

7. <main> 元素 ​

<main> 元素用于定义文档的主要内容，文档中只能有一个 <main> 元素。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main 示例</title>
</head>
<body>
    <main>
        <h1>主要内容</h1>
        <p>这是文档的主要内容。</p>
    </main>
</body>
</html>

通过这些示例，您可以在 HTML 文档中使用各种区块元素来组织和布局内容，从而提高网页的结构性和可读性。