HTML 教程 / HTML布局

HTML 布局

网页布局定义了网页的结构。HTML5引入了语义化布局标签，使网页结构更加清晰、易于理解和维护。

为什么使用语义化布局？

  • 可读性：代码更易阅读和理解
  • SEO：搜索引擎更好地理解页面结构
  • 可访问性：辅助技术能更好地解析页面
  • 维护性：便于团队协作和后期维护

常用布局元素

<header> - 页头

定义页面或区块的头部内容，通常包含标题、logo、导航等。

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="/">首页</a>
    </nav>
</header>

<nav> - 导航

定义导航链接区域。

<nav>
    <a href="/home">首页</a>
    <a href="/about">关于</a>
    <a href="/contact">联系</a>
</nav>

<section> - 章节

定义文档中的章节或区块，通常包含一个标题。

<section>
    <h2>章节标题</h2>
    <p>章节内容...</p>
</section>

<article> - 文章

定义独立的、可分发的内容块，如博客文章、新闻报道。

<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>

<aside> - 侧边栏

定义与主内容相关但可独立的辅助内容。

<aside>
    <h3>相关文章</h3>
    <ul>
        <li>链接1</li>
        <li>链接2</li>
    </ul>
</aside>

<footer> - 页脚

定义页面或区块的底部内容。

<footer>
    <p>© 2026 我的网站</p>
</footer>

完整布局示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>网页布局示例</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial; }
        header { background: #333; color: white; padding: 20px; }
        nav { background: #444; padding: 10px; }
        nav a { color: white; margin-right: 15px; }
        .container { display: flex; max-width: 1200px; margin: 20px auto; }
        main { flex: 3; padding: 20px; }
        aside { flex: 1; padding: 20px; background: #f4f4f4; }
        footer { background: #333; color: white; padding: 20px; text-align: center; }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系</a>
    </nav>
    
    <div class="container">
        <main>
            <article>
                <h2>欢迎访问</h2>
                <p>这是网页的主要内容区域...</p>
            </article>
        </main>
        
        <aside>
            <h3>侧边栏</h3>
            <p>辅助信息...</p>
        </aside>
    </div>
    
    <footer>
        <p>© 2026 我的网站</p>
    </footer>
</body>
</html>

交互式示例

在下面的代码编辑器中，尝试修改布局结构：

💻 在线代码编辑器
👁️ 预览效果

最佳实践

建议
  • 使用语义化标签替代大量 <div>
  • <header> 和 <footer> 可以在页面中多次使用
  • <article> 内的内容应该是独立的，可单独使用
  • <aside> 用于与主内容相关的侧边信息
  • 结合CSS Flexbox和Grid进行现代布局