当前位置：首页 > news >正文

制作简单的HTML个人网页指南

news 2025/9/17 10:40:18

1. 确定网页结构

1.1 创建HTML文档

使用文本编辑器（如Notepad、Visual Studio Code等），创建一个新的HTML文档。在文档中输入以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你的姓名 - 个人网页</title>
</head>
<body></body>
</html>

这是一个基本的HTML框架，包括文档声明、文档头部和主体部分。

2. 添加个人信息

2.1 创建标题和副标题

在<body>标签中添加个人信息。例如：

<body><header><h1>你的姓名</h1><h2>Web开发者 | 爱好者</h2></header>
</body>

2.2 插入照片

在个人信息下方插入一张照片。确保你的照片文件（如profile.jpg）与HTML文件在同一目录下，然后添加：

<img src="profile.jpg" alt="你的姓名的照片">

2.3 添加个人简介

在个人信息的下面，添加一段个人简介：

<section><h3>关于我</h3><p>你的姓名，是一名热爱Web开发的爱好者。专注于前端技术，喜欢探索新的技术领域。</p>
</section>

3. 展示技能

3.1 创建技能部分

添加一个展示你技能的部分：

<section><h3>技能</h3><ul><li>HTML5</li><li>CSS3</li><li>JavaScript</li><!-- 添加其他技能 --></ul>
</section>

3.2 添加其他技能

在技能列表中添加你掌握的其他技能。

4. 联系信息

4.1 添加联系信息

在页面底部添加你的联系信息：

<footer><h3>联系我</h3><p>Email: your.email@example.com</p><p>LinkedIn: linkedin.com/in/your-profile</p><!-- 添加其他联系信息 -->
</footer>

5. 样式与美化

5.1 创建CSS文件

在HTML文件同一目录下，创建一个新的CSS文件（如styles.css）。

5.2 连接CSS文件

在HTML文档的头部部分，添加以下代码链接CSS文件：

<link rel="stylesheet" href="styles.css">

5.3 样式设计

在styles.css中，添加样式规则来美化你的网页，比如：

body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;
}header {text-align: center;padding: 20px;background-color: #333;color: #fff;
}section {margin: 20px;
}footer {text-align: center;padding: 10px;background-color: #333;color: #fff;
}

这只是一个简单的样式示例，你可以根据自己的喜好进行修改。