个人主页

入门约 15 分钟

你将构建什么

一个个人主页：包含你的名字、一段自我介绍、技能列表、几个外链（GitHub、博客）和一张头像图片，全部用 HTML 标签排版，浏览器直接打开即可看到。

学习目标

用标题标签（h1～h3）组织页面内容层级
用段落、列表和链接标签排版文字信息
用 img 标签插入头像图片
理解 HTML 文档的基本结构（html/head/body）

前置要求

了解 HTML 标签的基本语法
知道如何创建和编辑 .html 文件
会用浏览器打开本地文件

步骤

1
搭建 HTML 文档骨架
创建一个 index.html 文件，写入 HTML5 文档基本骨架：<!DOCTYPE html>、<html>、<head>（含 <meta charset> 和 <title>）、<body>。在 <title> 中填入你的名字加“个人主页”。
代码
```
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>张三的个人主页</title>
  </head>
  <body>
    
  </body>
</html>
```
预期结果
用浏览器打开 index.html，看到空白页面和标签栏标题。
2
添加姓名和自我介绍
在 <body> 内用 <h1> 写你的名字，紧跟一个 <p> 段落写一段自我介绍（两三句话即可）。用 <h2> 加一个“关于我”小标题。
代码
```
<h1>张三</h1>
<p>一名正在学习 Web 开发的新手，喜欢用代码创造有用的东西。</p>

<h2>关于我</h2>
<p>我目前专注于前端基础，目标是能独立搭建美观实用的网页。</p>
```
预期结果
页面显示你的名字、自我介绍和“关于我”段落。
3
添加技能列表和外链
用 <h2> 添加“技能”标题，下面用 <ul> 和 <li> 列出三到五项技能。再用 <h2> 添加“链接”标题，用 <ul> 里放 <a> 标签链接到你的 GitHub 或博客。
代码
```
<h2>技能</h2>
<ul>
  <li>HTML 基础</li>
  <li>CSS 基础</li>
  <li>JavaScript 入门</li>
</ul>

<h2>链接</h2>
<ul>
  <li><a href="https://github.com/zhangsan">我的 GitHub</a></li>
  <li><a href="https://zhangsan.dev">个人博客</a></li>
</ul>
```
预期结果
页面显示技能列表和可点击的外部链接。
4
插入头像图片
在 <h1> 上方用 <img> 标签插入头像。src 属性指向图片路径（可以用在线 URL 或本地文件），alt 属性写一段图片描述——这是无障碍必备属性。
代码
```
<img src="avatar.jpg" alt="张三的头像" />
<h1>张三</h1>
```
预期结果
页面顶部显示头像图片，后面跟着姓名和内容。

自己动手试试

起始代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的个人主页</title>
  </head>
  <body>
    <!-- TODO: 添加 img 头像、h1 姓名、h2 + p 自我介绍、h2 + ul 技能和链接 -->
  </body>
</html>

解决方案代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的个人主页</title>
  </head>
  <body>
    <img src="avatar.jpg" alt="张三的头像" />
    <h1>张三</h1>
    <p>一名正在学习 Web 开发的新手，喜欢用代码创造有用的东西。</p>
    <h2>关于我</h2>
    <p>我目前专注于前端基础，目标是能独立搭建美观实用的网页。</p>
    <h2>技能</h2>
    <ul>
      <li>HTML 基础</li>
      <li>CSS 基础</li>
      <li>JavaScript 入门</li>
    </ul>
    <h2>链接</h2>
    <ul>
      <li><a href="https://github.com/zhangsan">我的 GitHub</a></li>
      <li><a href="https://zhangsan.dev">个人博客</a></li>
    </ul>
  </body>
</html>

你学到了什么

你掌握了 HTML 文档的基本结构，学会用标题、段落、列表、链接和图片标签组织页面内容——这是所有网页的骨架。后续可以用 CSS 让它更美观。

个人主页

你将构建什么

学习目标

前置要求

步骤

搭建 HTML 文档骨架

添加姓名和自我介绍

添加技能列表和外链

插入头像图片

自己动手试试

你学到了什么

相关资源

相关课程

相关练习

相关工具

相关参考文档

相关错误

相关术语

相关术语

相关错误