学生个人网页制作HTML教程_从零开始搭建个人主页完整步骤

学生作业要求做个人网页，或者想给自己做一个展示个人信息、作品集、博客的个人主页，用HTML+CSS就能实现，不需要复杂的后端。本文从零开始，讲解学生个人网页制作的完整流程，从创建文件到写代码到部署上线，适合HTML初学者。

个人网页的基本结构：一个index.html首页，包含个人信息（姓名、照片、简介）、教育背景、技能特长、作品集、联系方式。可以加一个about.html关于我页面、一个portfolio.html作品集页面，但作业要求一般一个index.html就够了。

准备工作： 1. 安装一个代码编辑器，推荐VS Code（免费，语法高亮，自动补全），下载地址code.visualstudio.com，安装时勾选"添加到PATH"和"创建桌面快捷方式"。 2. 安装Chrome浏览器，用来预览网页和调试。 3. 在电脑上创建一个文件夹，命名为`my-website`，所有网页文件放在这个文件夹里。 4. 在文件夹里创建子文件夹：`images`（放图片）、`css`（放样式文件），结构清晰。

第一步：创建HTML文件。

打开VS Code，文件-打开文件夹，选择`my-website`文件夹。在左侧资源管理器里右键-新建文件，命名为`index.html`。

HTML基本结构（输入以下代码）： ```html 张三的个人主页 ``` 代码解释： - ``声明这是HTML5文档 - ``页面语言是中文 - ``里放页面元信息：编码UTF-8（支持中文）、viewport（移动端适配）、title（浏览器标签页标题）、引入CSS文件 - ``里放页面可见内容

VS Code快捷输入：输入`!`按Tab键，自动生成HTML基本结构，不用手动敲。

第二步：写页面内容结构。

在``里添加导航、头部、各个板块、页脚。

```html

你好，我是张三

计算机科学与技术专业 | 前端开发爱好者

了解更多

关于我

我是XX大学计算机科学与技术专业的大三学生，热爱前端开发，擅长HTML、CSS、JavaScript，做过几个小型项目。

平时喜欢学习新技术、打篮球、看电影，希望毕业后从事前端开发工作。

技能特长

HTML5

熟练掌握语义化标签、表单、Canvas

CSS3

熟练掌握Flexbox、Grid布局、动画、响应式

JavaScript

掌握ES6+、DOM操作、Ajax、Vue基础

其他

Git、Photoshop、Python基础、英语CET-6

作品集

校园二手交易平台

基于Vue+Node.js的校园二手交易网站，支持商品发布、搜索、在线聊天

个人博客系统

基于HTML+CSS+JavaScript的静态博客，支持文章分类、标签、搜索

天气预报APP

调用天气API的单页应用，支持城市搜索、未来7天预报、生活指数

联系我

邮箱：zhangsan@example.com

电话：138-xxxx-xxxx

微信：zhangsan_wx

GitHub：github.com/zhangsan

```

第三步：写CSS样式。

在`css`文件夹里新建`style.css`，写样式让页面变好看。

```css /* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: "Microsoft YaHei", Arial, sans-serif; line-height: 1.6; color: #333; }

/* 导航栏 */ nav { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; padding: 15px 50px; z-index: 1000; }

nav .logo { font-size: 24px; font-weight: bold; color: #2c3e50; }

nav ul { list-style: none; display: flex; }

nav ul li { margin-left: 30px; }

nav ul li a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s; }

nav ul li a:hover { color: #3498db; }

/* 头部横幅 */ header { height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

header h1 { font-size: 48px; margin-bottom: 20px; }

header p { font-size: 20px; margin-bottom: 30px; }

.btn { display: inline-block; padding: 12px 30px; background: white; color: #667eea; text-decoration: none; border-radius: 30px; font-weight: bold; transition: transform 0.3s; }

.btn:hover { transform: translateY(-3px); }

/* 通用板块 */ section { padding: 80px 50px; max-width: 1200px; margin: 0 auto; }

section h2 { text-align: center; font-size: 36px; margin-bottom: 50px; color: #2c3e50; }

/* 关于我 */ .about-content { display: flex; align-items: center; gap: 50px; }

.about-content img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }

.about-content p { font-size: 16px; margin-bottom: 15px; }

/* 技能 */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }

.skill { background: #f8f9fa; padding: 30px; border-radius: 10px; text-align: center; transition: transform 0.3s; }

.skill:hover { transform: translateY(-5px); }

.skill h3 { color: #3498db; margin-bottom: 10px; }

/* 作品集 */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.project { border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }

.project:hover { transform: translateY(-5px); }

.project img { width: 100%; height: 200px; object-fit: cover; }

.project h3, .project p { padding: 0 20px; }

.project h3 { margin: 15px 0 10px; color: #2c3e50; }

.project p { padding-bottom: 20px; color: #666; font-size: 14px; }

/* 联系方式 */ .contact-info { text-align: center; font-size: 18px; line-height: 2; }

/* 页脚 */ footer { background: #2c3e50; color: white; text-align: center; padding: 30px; }

/* 响应式适配 */ @media (max-width: 768px) { nav { padding: 15px 20px; } nav ul { display: none; } header h1 { font-size: 32px; } section { padding: 50px 20px; } .about-content { flex-direction: column; text-align: center; } } ```

第四步：准备图片。

把个人照片（avatar.jpg）和项目截图（project1.jpg、project2.jpg、project3.jpg）放到`images`文件夹里。图片用JPG格式，个人照片裁剪成正方形，项目截图宽度800px。如果没有真实图片，可以用占位图服务（比如`https://via.placeholder.com/250`），但作业建议用真实图片。

第五步：预览网页。

在VS Code里右键点击index.html，选择"Open with Live Server"（需要安装Live Server插件，扩展商店搜索安装），或者直接在文件管理器里双击index.html用浏览器打开。就能看到网页效果。

用Chrome打开后，按F12可以检查元素、调试样式。按Ctrl+Shift+M切换设备模拟，看手机端显示效果。

第六步：部署上线（可选）。

如果作业只需要本地文件，交index.html和css、images文件夹就行。如果想让别人通过网址访问，需要部署到服务器。

免费部署方式： 1. GitHub Pages：注册GitHub账号，创建仓库，上传文件，在Settings-Pages里开启，得到`用户名.github.io/仓库名`的网址。 2. Gitee Pages：国内访问快，类似GitHub Pages。 3. Netlify、Vercel：支持拖拽上传，自动分配域名。 4. 购买虚拟主机：用FTP上传文件，绑定域名。

学生作业一般用GitHub Pages或Gitee Pages就够了，免费且操作简单。

网页制作注意事项： 1. HTML标签要闭合，`

`要有`

`，少一个闭合标签页面会错乱。 2. 图片路径要正确，`images/avatar.jpg`是相对路径，确保images文件夹和index.html在同一级。 3. 中文网页编码必须是UTF-8，``不能少，否则中文乱码。 4. CSS选择器拼写要和HTML里的class名一致，区分大小写。 5. 网页文件命名用英文小写，不要用中文和空格，比如`index.html`不是`首页.html`。 6. 作业提交时把整个文件夹（index.html、css、images）打包成zip，不要只交一个html文件，否则样式和图片丢失。 7. 可以在网页里加一些CSS动画（比如hover效果、平滑滚动），让页面更生动，作业分数更高。

扩展学习方向： - 加JavaScript交互：回到顶部按钮、导航栏滚动变色、表单验证、图片轮播 - 加多页面：about.html、portfolio.html、contact.html，导航链接指向对应页面 - 学Vue或React：用框架做更复杂的个人网站 - 学后端：加留言板、博客系统，需要PHP/Node.js+数据库

学生个人网页制作是HTML/CSS学习的最佳实践，按照本文的步骤，从零开始2到3小时就能做出一个美观的个人主页。关键是多写多练，遇到样式问题用Chrome开发者工具调试，慢慢就熟练了。

学生个人网页制作HTML教程_从零开始搭建个人主页完整步骤