← 代码俱乐部 · 工匠层 04 / 8
用 GitHub Pages（免费）让全世界都能访问你的网页。
github.com 注册账号（免费）。index.html 上传上去（点 "Add file → Upload files"）。https://yourname.github.io/repo-name/"在网上"不需要花钱的服务器。GitHub Pages 是免费的，永远是免费的。
你的同学可以在地铁上、家里、月球上（如果有 wifi）—— 看到你做的网页。这就是互联网神奇的地方。
一个完整的多页网站框架。注意怎么用 <a href="..."> 来连接不同的页面：
<!DOCTYPE html>
<html>
<head>
<title>小王的个人网站</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
background: #f5f5f5;
}
nav {
background: white;
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
}
nav a {
margin-right: 20px;
color: #667eea;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: #764ba2;
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a href="index.html">首页</a>
<a href="about.html">关于我</a>
<a href="projects.html">我的项目</a>
<a href="contact.html">联系我</a>
</nav>
<h1>欢迎来到我的网站 👋</h1>
<p>这是我用 GitHub Pages 免费放在互联网上的网站。全世界都能访问！</p>
</body>
</html>
关键概念：href="about.html" 就是说"点这个链接，浏览器会打开 about.html 这个文件"。如果你有 5 个 HTML 文件，它们之间就可以互相链接。
一个完整的个人网站模板。有首页、作品集、博客和联系方式：
<!DOCTYPE html>
<html>
<head>
<title>小红的作品集</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: sans-serif;
background: #f5f5f5;
}
nav {
background: #667eea;
padding: 20px;
position: sticky;
top: 0;
}
nav a {
color: white;
text-decoration: none;
margin-right: 25px;
font-weight: bold;
}
nav a:hover {
color: #ffd93d;
}
main {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
</style>
</head>
<body>
<nav>
<a href="index.html">首页</a>
<a href="portfolio.html">作品集</a>
<a href="blog.html">博客</a>
<a href="contact.html">联系我</a>
</nav>
<main>
<h1>小红的作品集</h1>
<p>欢迎访问我的个人网站。我在这里展示我的设计作品和思考。</p>
</main>
</body>
</html>
进阶：注意 position: sticky 让导航菜单"粘"在顶部。当你向下滚动网页时，菜单始终可见。
代码已经是一个不错的表单了。补充说明：
注意：这个表单现在只是一个"空壳"。真正要把数据发送给服务器，还需要后端代码（比如 Python Flask 或 Node.js）来处理。但作为"前端界面"，这已经完成了。