CSS 零基础教程

HTML 现代布局结构搭建

HTML 结构是我们使用 CSS 构建布局的基础。

一个结构良好的 HTML 文档不仅能确保语义正确性和可访问性，还能让你更轻松、有效地应用 CSS 布局技术。

本章将介绍为布局创建坚实 HTML 基础的核心元素和最佳实践。我们将探索核心结构元素、如何使用 HTML5 语义化标签，以及如何组织内容以获得最佳的布局控制。

1. 核心 HTML 结构元素

每个 HTML 文档都需要一个基本结构。无论你计划使用哪种布局技术，理解这些核心元素对于构建任何网页都至关重要。

1.1 <!DOCTYPE html> 声明

<!DOCTYPE html> 声明位于 HTML 文档的最前面。它告诉浏览器页面是使用哪个版本的 HTML 编写的。对于 HTML5，声明非常简单，就是 <!DOCTYPE html>。它不是一个 HTML 标签；它是给浏览器的一条指令。

示例：

<!DOCTYPE html>

1.2 <html> 元素

<html> 元素是 HTML 页面的根元素。除了 <!DOCTYPE html> 声明外，它包含所有其他元素。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
</html>

lang 属性指定文档的语言。为了可访问性（Accessibility），包含此属性是一个好习惯。

1.3 <head> 元素

<head> 元素包含关于 HTML 文档的元信息（meta-information），如标题、字符集、链接的样式表和脚本。这些信息不会显示在页面本身上。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的基础布局</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
  • <meta charset="UTF-8">: 指定文档的字符编码。UTF-8 是最通用和推荐的编码。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 这个 meta 标签对于响应式设计至关重要。它将视口宽度设置为设备宽度，并将初始缩放级别设置为 1.0。这确保页面在不同设备上正确缩放。
  • <title>我的基础布局</title>: 设置页面的标题，显示在浏览器标签页或窗口标题栏中。
  • <link rel="stylesheet" href="style.css">: 将外部样式表链接到 HTML 文档。这是你定义布局 CSS 规则的地方。

1.4 <body> 元素

<body> 元素包含 HTML 文档中显示在页面上的所有内容，如文本、图像、链接和其他元素。这是你构建网站实际内容的地方。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的基础布局</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是我页面上的一些内容。</p>
</body>
</html>

2. 用于布局的 HTML5 语义化元素

HTML5 引入了几个新的语义化元素，为你的内容提供含义和结构。使用这些元素不仅能提高可访问性，还能使你的 HTML 更具可读性和可维护性。这些元素有助于定义页面的不同部分，使应用 CSS 布局变得更容易。

2.1 <header>

<header> 元素代表介绍性内容或一组导航链接的容器。它通常包含网站的 Logo、标题和导航菜单。

示例：

<header>
  <img src="logo.png" alt="我的网站 Logo">
  <h1>现代教程</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系方式</a></li>
    </ul>
  </nav>
</header>

2.2 <nav>

<nav> 元素代表页面中链接到其他页面或页面内部部分的区域。它专用于主要的导航模块。

示例：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>
注意： 并非每一组链接都需要放在 <nav> 元素内。只将其用于主要的导航部分。

2.3 <main>

<main> 元素指定文档的主要内容。一个文档中应该只有一个 <main> 元素。

示例：

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容放在这里。</p>
  </article>
</main>

2.4 <article>

<article> 元素代表文档、页面、应用程序或网站中独立的结构，旨在可以独立分发或复用（例如，在联合供稿中）。例子包括论坛帖子、杂志或报纸文章，或博客条目。

示例：

<article>
  <h2>我的最新博客文章</h2>
  <p>这是我博客文章的内容。</p>
  <footer>
    <p>发布于 <time datetime="2024-01-26">2024年1月26日</time> 作者：John Doe</p>
  </footer>
</article>

2.5 <aside>

<aside> 元素代表页面中与主要内容间接相关的部分。它通常用于侧边栏、引用或广告。

示例：

<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="#">文章 1</a></li>
    <li><a href="#">文章 2</a></li>
    <li><a href="#">文章 3</a></li>
  </ul>
</aside>

2.6 <footer>

<footer> 元素代表文档或部分的页脚。页脚通常包含关于该部分作者的信息、版权数据、使用条款链接、联系信息等。

示例：

<footer>
  <p>© 2026 现代教程. 版权所有。</p>
  <nav>
    <ul>
      <li><a href="#">使用条款</a></li>
      <li><a href="#">隐私政策</a></li>
      <li><a href="#">联系方式</a></li>
    </ul>
  </nav>
</footer>

2.7 <section>

<section> 元素代表内容的专题分组，通常带有标题。它是一个用于对相关内容进行分组的通用容器。

示例：

<section>
  <h2>关于我们</h2>
  <p>关于我们公司的信息。</p>
</section>
提示： 当内容是独立的且可以独立分发时，请使用 <article>。当你在页面内对相关内容进行分组时，请使用 <section>。

3. 为布局控制构建内容

你如何在这些语义元素中构建内容，会显著影响你使用 CSS 控制布局的能力。请考虑以下最佳实践：

  • 逻辑分组 (Logical Grouping): 将相关内容分组在适当的语义元素中。这使得用 CSS 选定特定部分变得更容易。
  • 嵌套 (Nesting): 逻辑地嵌套元素以创建清晰的层次结构。例如，你可以在一个 <section> 中嵌套 <article> 元素来表示博客文章列表。
  • Class 和 ID 属性: 使用 class 和 ID 属性为你的元素添加特定的样式挂钩（hooks）。Class 用于对多个元素应用相同的样式，而 ID 用于唯一的元素。
  • 最少化 <div> 使用: 虽然 <div> 元素对于通用容器仍然有用，但尽量使用语义化元素来为你的结构提供含义。

示例

假设我们要构建一个简单的网页，包含页头、主要内容区域、侧边栏和页脚。我们可以这样构建 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础网站布局</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <img src="logo.png" alt="网站 Logo">
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">博客</a></li>
        <li><a href="#">联系方式</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>我的第一篇博客文章</h2>
      <p>这是我第一篇博客文章的内容。</p>
    </article>
    <article>
      <h2>我的第二篇博客文章</h2>
      <p>这是我第二篇博客文章的内容。</p>
    </article>
  </main>
  <aside>
    <h3>分类目录</h3>
    <ul>
      <li><a href="#">Web 开发</a></li>
      <li><a href="#">设计</a></li>
      <li><a href="#">市场营销</a></li>
    </ul>
  </aside>
  <footer>
    <p>© 2024 我的网站</p>
  </footer>
</body>
</html>

在这个例子中：

  • <header> 包含 Logo 和导航。
  • <main> 包含主要内容，由两个代表博客文章的 <article> 元素组成。
  • <aside> 包含一个分类列表。
  • <footer> 包含版权信息。

这种结构为应用 CSS 布局提供了清晰且语义化的基础。

4. 实战案例与演示

让我们扩展前面的例子，演示如何使用 Class 和 ID 来进一步增强布局控制。

假设我们想把主要内容区域和侧边栏设计成不同的样式。我们可以给 <main> 和 <aside> 元素添加 class：

<main class="main-content">
  <article>
    <h2>我的第一篇博客文章</h2>
    <p>这是我第一篇博客文章的内容。</p>
  </article>
  <article>
    <h2>我的第二篇博客文章</h2>
    <p>这是我第二篇博客文章的内容。</p>
  </article>
</main>
<aside class="sidebar">
  <h3>分类目录</h3>
  <ul>
    <li><a href="#">Web 开发</a></li>
    <li><a href="#">设计</a></li>
    <li><a href="#">市场营销</a></li>
  </ul>
</aside>

现在，在我们的 style.css 文件中，我们可以使用这些 class 来选中这些元素：

.main-content {
  width: 70%;
  float: left;
  padding: 20px;
}
.sidebar {
  width: 30%;
  float: right;
  padding: 20px;
}

这段 CSS 代码将使主要内容区域占据 70% 的宽度并向左浮动，而侧边栏将占据 30% 的宽度并向右浮动。我们将在后面的模块中深入研究 float 和其他布局属性的细节。