1. 头部: 带有导航菜单。
  2. 欢迎区域: 一个大标题和简短的自我介绍。
  3. 关于我: 一个包含文字和图片的个人介绍板块。
  4. 我的项目: 一个展示项目卡片的网格布局。
  5. 页脚: 包含版权信息和社交媒体链接。

第一步：准备工作

  1. 创建文件:

    html5做的简单网页制作
    （图片来源网络，侵删）
    • 在你的电脑上新建一个文件夹,命名为 my-website (或任何你喜欢的名字)。
    • 在这个文件夹里,创建两个文件：
      • index.html (这是网页的内容文件)
      • style.css (这是网页的样式文件)

  2. 选择代码编辑器:

    • 你可以使用任何文本编辑器,Windows 的记事本、Mac 的文本编辑器。
    • 强烈推荐使用专业的代码编辑器，它们有语法高亮、自动补全等功能，会让编码体验好很多，免费且优秀的编辑器有：

第二步：编写 HTML5 结构 (index.html)

HTML5 引入了许多语义化的标签，<header>, <nav>, <main>, <section>, <footer> 等，使用它们能让网页结构更清晰，也利于搜索引擎（SEO）和屏幕阅读器（无障碍访问）的理解。

打开 index.html 文件，将下面的代码复制进去，我会为每一部分添加详细的注释，解释代码的作用。

<!DOCTYPE html>
<!-- 声明这是一个HTML5文档 -->
<html lang="zh-CN">
<!-- 整个网页的根标签，lang属性指定网页语言为中文 -->
<head>
    <!-- head部分包含网页的元数据，不会直接显示在页面上，但告诉浏览器如何处理这个页面 -->
    <meta charset="UTF-8">
    <!-- 确保浏览器能正确显示中文等特殊字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 让网页在移动设备上也能正常显示，响应式设计的第一步 -->我的个人主页</title>
    <!-- 显示在浏览器标签页上的标题 -->
    <link rel="stylesheet" href="style.css">
    <!-- 链接到我们外部的CSS样式表 -->
</head>
<body>
    <!-- body部分包含所有在网页上可见的内容 -->
    <header>
        <!-- header标签通常用于页面或区域的头部，这里用作整个页的头部 -->
        <nav>
            <!-- nav标签专门用于导航链接 -->
            <ul>
                <!-- ul (unordered list) 是一个无序列表 -->
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#projects">我的项目</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- main标签包裹页面的主要内容，一个页面只应有一个main -->
        <section id="home">
            <!-- section标签定义文档中的一个区域，id用于给这个区域一个唯一的名字，方便导航链接跳转 -->
            <h1>你好，我是张三</h1>
            <p>一名充满热情的前端开发爱好者</p>
            <a href="#about">了解更多</a>
        </section>
        <section id="about">
            <h2>关于我</h2>
            <p>我是一名正在学习HTML5、CSS3和JavaScript的学生，我喜欢创造美观且实用的网页，并享受解决技术难题的过程。</p>
            <!-- 这里我们用一个div来包裹图片和文字，方便用CSS布局 -->
            <div class="about-content">
                <img src="https://via.placeholder.com/150" alt="我的头像">
                <!-- src是图片地址，alt是图片的替代文本，当图片无法加载时会显示，对无障碍访问非常重要 -->
                <p>除了编程，我还喜欢摄影和旅行，我相信生活就像代码，需要不断地调试和优化。</p>
            </div>
        </section>
        <section id="projects">
            <h2>我的项目</h2>
            <div class="project-grid">
                <!-- 用一个div作为项目卡片的容器 -->
                <div class="project-card">
                    <!-- 每个项目卡片 -->
                    <h3>项目一：待办事项清单</h3>
                    <p>一个使用HTML、CSS和JavaScript制作的简单待办事项应用，可以添加、删除和标记任务。</p>
                </div>
                <div class="project-card">
                    <h3>项目二：个人作品集</h3>
                    <p>这个你正在看的网站就是我的第一个作品集项目，展示了我的HTML和CSS基础。</p>
                </div>
                <div class="project-card">
                    <h3>项目三：计算器</h3>
                    <p>一个功能齐全的网页计算器，支持基本的四则运算。</p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <!-- footer标签用于页脚 -->
        <p>&copy; 2025 张三的个人主页. All rights reserved.</p>
        <!-- &copy; 是版权符号的HTML实体 -->
        <div class="social-links">
            <a href="#">微博</a>
            <a href="#">GitHub</a>
            <a href="#">邮箱</a>
        </div>
    </footer>
</body>
</html>

保存 index.html 文件，如果你用浏览器打开它，会看到一个只有文字、没有样式的“朴素”网页。

html5做的简单网页制作
（图片来源网络，侵删）

第三步：添加 CSS 样式 (style.css)

现在我们来美化这个网页,打开 style.css 文件，将下面的代码复制进去，CSS 的作用是控制网页的视觉表现，比如颜色、字体、布局等。

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 设置一个优雅的默认字体 */
    line-height: 1.6; /* 设置行高，提高可读性 */
    margin: 0; /* 去掉body默认的外边距 */
    background-color: #f4f4f4; /* 设置浅灰色背景 */
    color: #333; /* 设置默认文字颜色 */
}
/* 链接样式 */
a {
    color: #007BFF; /* 设置链接颜色为蓝色 */
    text-decoration: none; /* 去掉链接的下划线 */
}
a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
/* 头部和导航 */
header {
    background: #333; /* 深灰色背景 */
    color: #fff; /* 白色文字 */
    padding: 1rem 0; /* 上下内边距 */
    position: sticky; /* 让导航栏在滚动时固定在顶部 */
    top: 0;
    z-index: 1000;
}
header nav ul {
    list-style: none; /* 去掉列表前的点 */
    padding: 0;
    margin: 0;
    display: flex; /* 使用弹性布局让列表项水平排列 */
    justify-content: center; /* 居中对齐 */
}
header nav ul li {
    margin: 0 20px; /* 给列表项左右添加外边距 */
}
区域 */
main {
    max-width: 1100px; /* 设置内容最大宽度 */
    margin: 2rem auto; /* 上下外边距2rem，左右自动实现居中 */
    padding: 0 2rem; /* 左右内边距 */
}
/* 区域通用样式 */
section {
    margin-bottom: 3rem; /* 给每个section下方添加间距 */
    padding: 2rem;
    background: #fff; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加轻微阴影 */
}
h1, h2, h3 {
    color: #333; /* 标题颜色 */
}
/* 欢迎区域 */
#home {
    text-align: center; /* 文字居中 */
    padding: 4rem 2rem; /* 增加内边距 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80');
    background-size: cover;
    background-position: center;
    color: #fff;
}
#home h1 {
    font-size: 3rem; /* 设置大号字体 */
    margin-bottom: 0.5rem;
}
#home p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
#home a {
    display: inline-block; /* 让链接像按钮一样 */
    padding: 10px 20px;
    background: #007BFF;
    color: white;
    border-radius: 5px;
}
#home a:hover {
    background: #0056b3;
    text-decoration: none;
}
/* 关于我区域 */
.about-content {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 2rem; /* 图片和文字之间的间距 */
}
.about-content img {
    max-width: 150px;
    border-radius: 50%; /* 将图片变成圆形 */
}
/* 项目区域 */
.project-grid {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 根据容器宽度自动创建列，每列最小300px */
    gap: 2rem; /* 网格项之间的间距 */
}
.project-card {
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease; /* 添加一个平滑的过渡效果 */
}
.project-card:hover {
    transform: translateY(-5px); /* 鼠标悬停时卡片上移 */
}
/* 页脚 */
footer {
    text-align: center;
    padding: 1rem;
    background: #333;
    color: #fff;
    margin-top: 2rem;
}
.social-links a {
    color: #fff;
    margin: 0 10px;
}

保存 style.css 文件。

第四步：最终效果

回到你的浏览器,刷新 index.html 页面。

恭喜你！你应该会看到一个设计美观、结构清晰的个人主页了。

html5做的简单网页制作
（图片来源网络，侵删）

最终效果预览：

  • 一个固定在顶部的深色导航栏。
  • 一个全屏的、带有背景图片的欢迎区域，有醒目的标题和“了解更多”按钮。
  • “关于我”部分，文字和圆形头像并排显示。
  • “我的项目”部分，项目卡片以响应式的网格布局展示，鼠标悬停时会有上浮效果。
  • 一个简洁的页脚。

总结与下一步

你已经成功地用HTML5和CSS创建了一个简单但功能完整的网页！

回顾一下我们学到的东西：

  • HTML5 语义化标签: 使用 <header>, <nav>, <main>, <section>, <footer> 来构建清晰的页面结构。
  • 基本HTML标签: <h1>, <p>, <a>, <ul>, <li>, <img>, <div>。
  • CSS 基础:
    • 盒模型: margin, padding, border。
    • 布局: Flexbox (display: flex) 用于导航和“关于我”部分，Grid (display: grid) 用于项目卡片。
    • 选择器: 标签选择器 (body), 类选择器 (.project-card), ID选择器 (#home)。
    • 视觉效果: background, color, font-size, border-radius, box-shadow, transition。

你可以尝试做的改进：

  1. 响应式设计: 在小屏幕（如手机）上，让“关于我”部分的图片和文字变成上下排列，可以通过CSS的媒体查询 (@media) 实现。
  2. 添加交互: 为导航链接添加平滑滚动效果，而不是直接跳转。
  3. : 将占位图片 (https://via.placeholder.com/150) 替换成你自己的真实头像，将项目描述换成你真实做过的项目。
  4. 学习更多: 探索更多CSS属性和HTML5的新特性，<figure> 和 <figcaption> 标签，或者 CSS 变量。

这个项目是学习网页开发的绝佳起点,祝你编码愉快！