HTML 基础：从零开始学网页结构

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石。每一个你浏览的网页，底层都是由 HTML 构成的。本文将从零开始，带你系统学习 HTML 的文档结构、常用标签、语义化标签，并通过一个完整的实战页面巩固所学知识。

什么是 HTML？

HTML 是一种标记语言，不是编程语言。它使用「标签」（tag）来描述网页的结构和内容。浏览器读取 HTML 文件后，将其解析为可视化的网页。

<!-- 这是一个最简单的 HTML 示例 -->
<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>
<link rel="stylesheet" href="/assets/css/code-blocks.css?v=20261019_03">

HTML 文档结构

一个标准的 HTML 文档由以下部分组成：

<!DOCTYPE html>          <!-- 文档类型声明，告诉浏览器使用 HTML5 标准 -->
<html lang="zh-CN">      <!-- 根元素，lang 属性声明页面语言 -->
<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>

关键说明

标签	作用
`<!DOCTYPE html>`	声明文档类型，必须是第一行
`<html>`	根元素，包裹整个页面
`<head>`	存放元数据（编码、标题、样式、SEO 信息）
`<body>`	存放所有可见的页面内容

常用标签详解

标题标签 h1 ~ h6

HTML 提供了六级标题，<h1> 最大，<h6> 最小。标题不仅影响视觉大小，还对 SEO 和文档结构非常重要。

<h1>一级标题（主标题，一个页面建议只有一个）</h1>
<h2>二级标题（章节标题）</h2>
<h3>三级标题（小节标题）</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签 p

<p> 标签用于定义段落，浏览器会自动在段落前后添加空白间距。

<p>这是一个段落。HTML 会自动忽略源代码中的换行和多个空格，只保留一个空格。</p>
<p>这是另一个段落。</p>

链接标签 a

<a>（anchor）标签用于创建超链接，核心属性是 href。

<!-- 外部链接 -->
<a href="https://www.google.com" target="_blank">访问 Google（新窗口打开）</a>

<!-- 内部链接 -->
<a href="./about.html">关于我们</a>

<!-- 锚点链接 -->
<a href="#section1">跳转到第一节</a>

<!-- 邮箱链接 -->
<a href="mailto:hello@example.com">发邮件给我</a>

target="_blank" 表示在新标签页打开链接。

图片标签 img

<img> 是空标签（不需要闭合标签），关键属性有 src（图片路径）和 alt（替代文本）。

<!-- 本地图片 -->
<img src="./images/photo.jpg" alt="风景照片" width="600" height="400">

<!-- 网络图片 -->
<img src="https://via.placeholder.com/300" alt="占位图">

<!-- alt 的重要性：
     1. 图片加载失败时显示替代文本
     2. 屏幕阅读器为视障用户朗读
     3. 搜索引擎通过 alt 理解图片内容 -->

容器标签 div 和 span

标签	特点	使用场景
`<div>`	块级元素，独占一行	页面布局、分组大块内容
`<span>`	行内元素，不换行	修饰行内文字、小范围样式控制

<!-- div：用于布局分组 -->
<div class="header">
  <h1>网站标题</h1>
</div>
<div class="content">
  <p>主要内容区域</p>
</div>

<!-- span：用于行内样式控制 -->
<p>这段文字中，<span style="color:red">这部分是红色的</span>，其他是默认颜色。</p>

其他常用标签

<!-- 列表 -->
<ul>                    <!-- 无序列表 -->
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<ol>                    <!-- 有序列表 -->
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 强调 -->
<strong>重要文本（语义：重要）</strong>
<em>强调文本（语义：强调）</em>

<!-- 换行与水平线 -->
<br>                    <!-- 强制换行 -->
<hr>                    <!-- 水平分割线 -->

<!-- 表格 -->
<table border="1">
  <thead>
    <tr><th>姓名</th><th>年龄</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>25</td></tr>
    <tr><td>李四</td><td>30</td></tr>
  </tbody>
</table>

<!-- 表单 -->
<form action="/submit" method="POST">
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <button type="submit">提交</button>
</form>

语义化标签

语义化标签是 HTML5 引入的，目的是让标签的含义更明确，而不是仅仅作为容器。

为什么需要语义化？

SEO 友好：搜索引擎能更好地理解页面结构
无障碍访问：屏幕阅读器可以正确导航
代码可读：开发者一眼就能理解页面结构
未来兼容：语义化是 Web 标准的发展方向

常用语义化标签

<body>
  <header>              <!-- 页头：网址导航、Logo -->
    <nav>               <!-- 导航：主要链接集合 -->
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>                <!-- 主内容：页面核心内容（一个页面只有一个） -->
    <article>           <!-- 独立的内容单元：博客文章、新闻 -->
      <header>
        <h1>文章标题</h1>
        <time datetime="2019-02-10">2019年2月10日</time>
      </header>
      <p>文章内容...</p>
      <footer>           <!-- 文章底部：作者、版权 -->
        <p>作者：张三</p>
      </footer>
    </article>

    <aside>             <!-- 侧边栏：相关内容、广告 -->
      <h3>相关文章</h3>
      <ul>...</ul>
    </aside>
  </main>

  <footer>              <!-- 页脚：版权、友情链接 -->
    <p>&copy; 2019 我的网站. All rights reserved.</p>
  </footer>
</body>

语义化标签对照表

语义化标签	对应的 div 写法	含义
`<header>`	`<div class="header">`	页头/章节头
`<nav>`	`<div class="nav">`	导航
`<main>`	`<div class="main">`	主要内容
`<article>`	`<div class="article">`	独立内容
`<section>`	`<div class="section">`	章节
`<aside>`	`<div class="sidebar">`	侧边栏
`<footer>`	`<div class="footer">`	页脚

实战：完整个人主页

下面是一个综合运用上述标签的完整 HTML 页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>张三的个人主页</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; color: #333; }
    header { background: #2c3e50; color: white; padding: 2rem; text-align: center; }
    nav { background: #34495e; padding: 1rem; }
    nav ul { list-style: none; display: flex; justify-content: center; gap: 2rem; }
    nav a { color: white; text-decoration: none; }
    nav a:hover { text-decoration: underline; }
    .container { max-width: 1000px; margin: 0 auto; padding: 2rem; }
    .projects { display: flex; gap: 1rem; flex-wrap: wrap; }
    .project-card { border: 1px solid #ddd; padding: 1rem; flex: 1; min-width: 250px; }
    footer { background: #2c3e50; color: white; text-align: center; padding: 1rem; margin-top: 2rem; }
  </style>
</head>
<body>
  <header>
    <h1>张三的个人主页</h1>
    <p>前端开发者 / 开源爱好者</p>
  </header>

  <nav>
    <ul>
      <li><a href="#about">关于我</a></li>
      <li><a href="#projects">项目作品</a></li>
      <li><a href="#contact">联系我</a></li>
    </ul>
  </nav>

  <main class="container">
    <section id="about">
      <h2>关于我</h2>
      <p>你好！我是张三，一名热爱前端开发的工程师。</p>
      <p>擅长 <strong>HTML</strong>、<strong>CSS</strong> 和 <strong>JavaScript</strong>，喜欢用代码创造价值。</p>
      <img src="https://via.placeholder.com/200" alt="张三的头像">
    </section>

    <section id="projects">
      <h2>项目作品</h2>
      <div class="projects">
        <article class="project-card">
          <h3>项目一：待办清单</h3>
          <p>一个简单的待办事项管理应用，支持增删改查。</p>
          <a href="#">查看详情 &rarr;</a>
        </article>
        <article class="project-card">
          <h3>项目二：天气查询</h3>
          <p>基于天气 API 的实时天气查询工具。</p>
          <a href="#">查看详情 &rarr;</a>
        </article>
      </div>
    </section>

    <section id="contact">
      <h2>联系我</h2>
      <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
      <p>GitHub：<a href="https://github.com/zhangsan" target="_blank">@zhangsan</a></p>
    </section>
  </main>

  <footer>
    <p>&copy; 2019 张三. 保留所有权利.</p>
  </footer>
</body>
</html>

总结

本文介绍了 HTML 的核心知识：

HTML 是网页的结构层，使用标签描述内容
文档结构包括 <!DOCTYPE>、<html>、<head>、<body>
常用标签：h1-h6、p、a、img、div、span
语义化标签（header、nav、main、article、footer）让代码更有意义
实战页面综合运用了以上所有知识点

掌握 HTML 是前端开发的第一步。下一篇文章我们将学习 CSS，为 HTML 添加样式和布局。