想用HTML5搭建个人网站或接单赚钱？零基础网页设计入门教程从零开始做你的第一个网页项目

嘿，朋友，你是不是也想拥有一个属于自己的网站？可能是为了展示自己、记录生活，也可能是想接点私单赚点外快。没关系，今天咱们就从零开始，一步步做出你的第一个网页。别紧张，HTML5没那么难，就像搭积木一样，一块一块来就行。

先搞懂HTML5到底是个啥

HTML5是构建网页的”骨架语言”。你看到的每一个网页，背后都是由HTML标签组成的。比如标题用<h1>、段落用<p>、图片用<img>，这些标签就像乐高积木，拼在一起就是一张完整的网页。

CSS（层叠样式表）负责让网页”好看”，JavaScript负责让网页”动起来”。今天我们先从HTML5入手，先把骨架搭好。

搭好你的第一个网页

打开电脑上的记事本（Windows）或TextEdit（Mac），粘贴下面这段代码，保存为index.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>
        /* 这里是我们写的CSS样式，让网页看起来更漂亮 */
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        nav {
            background-color: #34495e;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-size: 18px;
        }
        nav a:hover {
            color: #f39c12;
        }
        main {
            max-width: 900px;
            margin: 30px auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .card {
            background: #ecf0f1;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 6px;
        }
        footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
        }
    </style>
</head>
<body>

    <header>
        <h1>欢迎来到我的个人网站</h1>
        <p>用爱发电，用代码改变生活</p>
    </header>

    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我</a>
        <a href="#services">服务内容</a>
        <a href="#contact">联系我</a>
    </nav>

    <main>
        <section id="home">
            <h2>🏠 首页</h2>
            <p>你好！这是我用心搭建的第一个网站。虽然简单，但每一个细节都是我亲手写的。</p>
        </section>

        <section id="about">
            <h2>👤 关于我</h2>
            <div class="card">
                <h3>我是谁？</h3>
                <p>我是一个热爱网页设计的学习者。从零基础开始，一步步做出属于自己的网站。我相信每个人都可以学会编程，关键是迈出第一步。</p>
            </div>
            <div class="card">
                <h3>我的技能</h3>
                <ul>
                    <li>HTML5 页面结构搭建</li>
                    <li>CSS3 样式美化与响应式布局</li>
                    <li>JavaScript 交互效果实现</li>
                    <li>网页性能优化</li>
                </ul>
            </div>
        </section>

        <section id="services">
            <h2>💼 服务内容</h2>
            <p>接单赚钱的第一步，是清楚自己能为客户提供什么价值。以下是你可以提供的服务方向：</p>
            <div class="card">
                <h3>个人官网定制</h3>
                <p>帮个人博主、自由职业者搭建展示型网站，价格范围300-1500元不等，取决于复杂程度。</p>
            </div>
            <div class="card">
                <h3>企业落地页制作</h3>
                <p>为企业制作产品介绍页、活动页，这类项目单价更高，通常在1000-5000元。</p>
            </div>
            <div class="card">
                <h3>静态网页模板开发</h3>
                <p>设计并出售网页模板，一次开发多次出售，属于被动收入的好方向。</p>
            </div>
        </section>

        <section id="contact">
            <h2>📬 联系我</h2>
            <p>如果你有网站需求，或者想一起学习进步，欢迎通过以下方式联系我：</p>
            <div class="card">
                <p>📧 邮箱：yourname@example.com</p>
                <p>💬 微信：your_wechat_id</p>
                <p>🌐 博客：<a href="#">yourblog.com</a></p>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2024 我的第一个网站 | 用 ❤️ 和代码打造</p>
    </footer>

</body>
</html>

拆解这个网页，让你真正搞懂

上面的代码看起来不少，但其实每一行都有它的使命。我们来一块块拆解：

文档声明：<!DOCTYPE html> 告诉浏览器”这是HTML5文档”，这是必须写的，而且写在最第一行。

语言设置：<html lang="zh-CN"> 声明页面是简体中文，对搜索引擎友好，也方便屏幕阅读器识别。

头部信息：<head> 里的内容不会直接显示在页面上，但很重要——<meta charset="UTF-8"> 解决中文乱码问题，<meta name="viewport"> 让网页在手机上也好看，<title> 是浏览器标签页上显示的标题。

样式代码：<style> 标签里的CSS代码负责让网页变美。你注意到那些颜色代码了吗？#2c3e50 是深蓝灰色，#f39c12 是橙色，这些十六进制颜色值可以随便换，想换成什么风格自己调就行。

页面结构：<header> 是页眉，<nav> 是导航栏，<main> 是主要内容区，<footer> 是页脚。这种语义化标签写法是HTML5的精髓，不仅结构清晰，还对SEO（搜索引擎优化）有帮助。

锚点链接：导航栏里的 <a href="#about"> 这种写法叫”锚点链接”，点击后会跳转到页面对应的位置，体验非常流畅。

进阶：让网页真正”活”起来

光有HTML和CSS还不够，加点JavaScript可以让网页有交互效果。我们在</body>标签前面加上这么一段：

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 给所有导航链接加上平滑滚动效果
        document.querySelectorAll('nav a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var targetId = this.getAttribute('href');
                var targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });

        // 导航栏滚动时添加阴影效果
        var header = document.querySelector('header');
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.2)';
            } else {
                header.style.boxShadow = 'none';
            }
        });
    });
</script>

这段代码做了两件事：点击导航链接时页面会平滑滚动到对应位置（而不是生硬地跳转），以及当页面往下滚动时，页眉会多一层阴影效果。这些细节就是让网站从”能用”变成”好用”的关键。

本地怎么调试和预览

你不需要买服务器，也不需要域名，就可以先把网站做出来。方法很简单：

在电脑上新建一个文件夹，比如叫my-website
把上面的index.html放进去
双击打开，浏览器会显示你的网页
修改代码后按F5刷新即可看到变化

如果想更方便，可以安装VS Code编辑器，它支持实时预览和代码自动补全，写起来事半功倍。

接单赚钱的实战路径

学会做网页只是第一步，能不能赚到钱还要看你怎么经营。给你梳理一条实际可行的路径：

第一阶段：积累作品集（0-2个月）

先给自己做一个漂亮的个人网站作为”名片”，然后在知乎、B站、小红书等平台分享你的学习过程。很多人就是通过一篇”零基础做网站”的教程吸粉，然后接到第一个单子的。

第二阶段：小额接单练手（2-4个月）

去闲鱼、淘宝、猪八戒网等平台挂出你的服务，比如”个人网站定制，500元起”。刚开始价格可以低一些，目的是积累好评和案例。记住，每一个单子的交付质量就是你最好的广告。

第三阶段：提升单价和稳定性（4-6个月）

有了几个成功案例后，把你的作品集网站做得更专业一些，加上客户评价截图。这时候可以大胆把报价提到1000-2000元区间。同时开始在社交媒体上持续输出内容，建立个人品牌。

第四阶段：被动收入（6个月以上）

开发一套精美的网页模板，在模板市场出售，比如ThemeForest、站长之家等平台。一次开发，反复销售，这才是真正的”睡后收入”。

常用工具推荐

工欲善其事，必先利其器。这几个工具对你有很大帮助：

代码编辑器：VS Code（免费），功能强大，插件丰富，初学者首选。

设计参考：Dribbble、Behance，上面有大量设计师分享的网页设计作品，可以从中学习配色和布局。

在线调试：CodePen（codepen.io），可以直接在浏览器里写代码看效果，非常适合练习和分享作品。

图片压缩：TinyPNG，网页里图片太多会影响加载速度，压缩后再上传，客户体验会好很多。

版本管理：GitHub，学会用Git管理你的代码，这不仅是专业素养的体现，也是接单时让客户放心的一大加分项。

一个小挑战，检验你的学习成果

现在，试着在不看教程的情况下，自己修改上面的代码：

把网站标题改成你自己的名字
把导航栏链接改成你自己的页面名称
在”服务内容”部分加上至少3个你打算提供的服务
把footer里的年份改成2025
找一个你喜欢的颜色，替换掉CSS里的所有颜色代码

完成这些之后，你的网站就真的是”你自己的”了。

最后说几句

网页设计这条路，最难的不是学会某一行代码，而是持续动手去做。你现在看到的每一个优秀网站，最开始都是一个”Hello World”。别担心自己写得不够好，第一个网页肯定是最丑的，但它可以是起点。

记住，HTML5的门槛很低，但上限很高。从做一个个人网站开始，一步步学CSS布局，再学JavaScript交互， eventually你可以做出功能完备的网站、响应式设计的手机适配页面、甚至是电商前端。这条路我已经走过来了，你也可以。

现在就打开编辑器，把你的index.html写出来吧！🚀

正文

想用HTML5搭建个人网站或接单赚钱？零基础网页设计入门教程从零开始做你的第一个网页项目

想用HTML5搭建个人网站或接单赚钱？零基础网页设计入门教程从零开始做你的第一个网页项目

先搞懂HTML5到底是个啥

搭好你的第一个网页

拆解这个网页，让你真正搞懂

进阶：让网页真正”活”起来

本地怎么调试和预览

接单赚钱的实战路径

常用工具推荐

一个小挑战，检验你的学习成果

最后说几句

相关阅读

TJA数据分析初学者必看：轻松入门，实战案例分析解析

从零开始学工具编程：轻松掌握实用技能，打造高效工作利器

新手必看！轻松在家学会炒股，实战入门攻略全解析

轻松上手CSS945：从基础到实战，打造你的网页设计之旅

新手必备！海钓达人教你轻松入门，掌握海钓技巧，享受海洋乐趣

HTML5网页设计从零开始：轻松入门，打造精美网页实战指南

ZigBee技术轻松上手：家居智能控制入门攻略全解析

ZigBee模块编程零基础入门：轻松上手，掌握智能设备控制技巧

计量经济学轻松入门，实用教程免费下载，开启数据分析新篇章

iOS界面开发从零开始：轻松掌握UI设计技巧与实战案例