零基础手把手教你用HTML制作专属个人网页（附完整代码）

2026-09-10 17:46:18 100阅读

本教程专为零基础初学者打造，通过手把手的教学方式，教你如何使用HTML制作专属的个人网页，教程中详细讲解了HTML代码的编写与应用，无需任何编程经验即可轻松上手，你将逐步学习网页基础结构的搭建、内容排版与基础美化，最终独立完成一个具有个人特色的网页作品，轻松迈出前端开发的第一步。

在数字化时代，拥有一个属于自己的个人网页是展示自我、建立个人品牌的绝佳方式，无论是用来记录生活随笔、展示个人作品集，还是作为求职时的电子简历，一个精美的个人网页都能让你在人群中脱颖而出，很多人以为制作网页需要高深的编程技术，其实不然，我们就从零开始，带大家了解个人网页制作HTML的基础流程,教你亲手敲出人生的第一个网页。

什么是HTML？

HTML（HyperText Markup Language，超文本标记语言）是构建网页的骨架，它不是一种编程语言，而是一种标记语言，通过一系列的“标签”来告诉浏览器如何显示页面上的文字、图片、链接等内容。

如果把网页比作一栋房子，HTML就是这栋房子的钢筋混凝土结构，决定了哪里是客厅、哪里是卧室。

准备工作

开始制作网页前,你只需要准备两样东西：

一个文本编辑器：电脑自带的记事本就能胜任，但为了提高效率和体验，推荐下载安装 Visual Studio Code、Sublime Text 或 Notepad++ 等免费编辑器。
一个浏览器：Chrome、Edge、Firefox 等主流浏览器均可,用来预览你写好的网页效果。

个人网页制作HTML：基础结构

每一个HTML网页都有一个固定的基础框架，打开你的文本编辑器，新建一个名为 index.html 的文件,输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的个人主页</title>
</head>
<body>
    <!-- 这里是网页的可见内容 -->
</body>
</html>

<!DOCTYPE html>：告诉浏览器这是一个HTML5文档。
<html>：整个网页的根标签。
<head>：包含网页的元数据，如字符集设置和网页标题,这些内容不直接显示在页面上。
<body>：网页的主体，你看到的文字、图片都在这里。

丰富网页内容

让我们在 <body> 标签内添加内容,打造一个简单的个人介绍网页。

添加页头和导航 使用 <header> 和 <nav> 标签来构建网页的顶部导航。

<header>
    <h1>张三的个人空间</h1>
    <nav>
        <a href="#about">关于我</a> | 
        <a href="#works">我的作品</a> | 
        <a href="#contact">联系方式</a>
    </nav>
</header>

添加“关于我”版块 使用 <section> 划分区域，用 <h2> 定义小标题，用 <p> 写段落，还可以用 <img> 插入你的照片。

<section id="about">
    <h2>关于我</h2>
    <img src="my-photo.jpg" alt="我的个人照片" width="200">
    <p>你好！我是张三，一名热爱设计与编程的自由职业者，喜欢探索新鲜事物，用代码创造美好。</p>
</section>

添加“我的作品”版块 可以用无序列表 <ul> 和列表项 <li> 来展示你的技能或作品。

<section id="works">
    <h2>我的作品</h2>
    <ul>
        <li><a href="#">个人博客系统开发</a></li>
        <li><a href="#">企业品牌视觉设计</a></li>
        <li><a href="#">手机端App交互原型</a></li>
    </ul>
</section>

添加页脚联系方式 用 <footer> 标签在网页底部留下你的联系方式。

<footer id="contact">
    <h2>联系我</h2>
    <p>邮箱：zhangsan@example.com</p>
    <p>微信：zhangsan_code</p>
    <p>&copy; 2023 张三的个人主页. 保留所有权利.</p>
</footer>

让网页更美观：引入CSS

虽然HTML搭建了结构，但此时网页看起来非常朴素，想要让网页变好看，就需要CSS（层叠样式表）来“装修”，我们可以在 <head> 标签内添加简单的CSS代码：

<style>
    body {
        font-family: "Microsoft YaHei", Arial, sans-serif; /* 设置字体 */
        background-color: #f4f4f9; /* 设置背景色 */
        color: #333; /* 设置文字颜色 */
        margin: 0;
        padding: 20px;
    }
    header {
        text-align: center; /* 文本居中 */
        border-bottom: 2px solid #ddd; /* 底部边框 */
        padding-bottom: 20px;
    }
    section {
        margin: 20px 0;
        padding: 20px;
        background: #fff; /* 内容区背景为白色 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加阴影增加立体感 */
    }
    footer {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: #666;
    }
</style>