HTML新手必学：个人简介页面制作

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 340 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #项目

HTML第一个入门项目：创建个人简介页面

一个简单的HTML入门项目是制作一个个人简介页面，包含基本信息和格式。以下是实现步骤：

准备基础结构 新建一个index.html文件，输入以下基础代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人简介</title>
</head>
<body>
</body>
</html>

添加主要内容 在<body>标签内添加以下内容：

<h1>关于我</h1>
<p>这是一个简单的个人简介页面</p>

<h2>基本信息</h2>
<ul>
    <li>姓名：张三</li>
    <li>年龄：25</li>
    <li>职业：Web开发学习者</li>
</ul>

<h2>兴趣爱好</h2>
<ol>
    <li>编程</li>
    <li>阅读</li>
    <li>旅行</li>
</ol>

添加图片和链接 继续在body中添加：

<img src="profile.jpg" alt="我的照片" width="200">
<p>访问我的<a href="https://github.com">GitHub</a></p>

简单样式调整 在<head>中添加简单CSS：

<style>
    body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    h1 {
        color: #333;
    }
</style>

项目扩展建议

添加更多内容部分

教育背景
工作经历
技能列表

尝试更多HTML元素

<table border="1">
    <tr>
        <th>年份</th>
        <th>经历</th>
    </tr>
    <tr>
        <td>2020</td>
        <td>大学毕业</td>
    </tr>
</table>

部署到网络

注册GitHub账号
创建新仓库
上传HTML文件
启用GitHub Pages功能

这个项目涵盖了HTML基础标签的使用，包括标题、段落、列表、图片和链接等元素，是理想的HTML入门练习。完成后可以继续学习CSS来美化页面，或添加JavaScript实现交互功能。