太棒了！自己动手做一个简易网页是学习编程和互联网技术的绝佳入门方式，这个过程就像搭积木一样,简单又有趣。
（图片来源网络，侵删）
我会为你提供一个从零开始的、手把手的指南,让你能快速做出自己的第一个网页。
核心思想：网页的三驾马车
无论多复杂的网页,其基础都由三部分构成：
- HTML (HyperText Markup Language - 超文本标记语言)：网页的骨架，它负责定义网页的结构和内容，比如哪里是标题，哪里是段落,哪里是图片。
- CSS (Cascading Style Sheets - 层叠样式表)：网页的颜值，它负责网页的视觉表现，比如颜色、字体、布局、间距等,让你的网页变得美观。
- JavaScript (JS)：网页的交互和动态行为，它负责让网页“活”起来，比如点击按钮后弹出提示、制作轮播图、表单验证等。
对于“简易网页”，我们主要专注于 HTML 和 CSS，JavaScript 可以作为后续学习的进阶内容。
第一步：准备工作（工具篇）
你不需要安装任何复杂的软件，只需要一个最简单的工具：文本编辑器。
（图片来源网络，侵删）
- 强烈推荐：
- Visual Studio Code (VS Code)：功能强大，免费，是目前最受欢迎的代码编辑器，它对初学者非常友好，有代码高亮、自动补全等功能。
- Sublime Text：轻量、快速,也非常受欢迎。
- 系统自带（不推荐，但也能用）：
- Windows：记事本
- Mac：文本编辑
下载并安装 VS Code,这是你接下来最重要的工具。
第二步：创建你的第一个网页文件
- 在你的电脑上新建一个文件夹，命名为
my-website或你喜欢的任何名字。 - 打开 VS Code，然后通过
文件->打开文件夹，选择你刚刚创建的my-website文件夹。 - 在 VS Code 的左侧文件浏览器中，点击“新建文件”按钮。
- 给这个文件命名为
index.html。注意后缀名必须是.html。
你有了一个空白的 index.html 文件,这就是你的网页起点。
第三步：编写 HTML 代码（搭建骨架）
在 index.html 文件中，输入以下代码，你可以直接复制粘贴，但建议尝试自己打一遍,感受一下代码的格式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的个人主页！</h1>
<p>这是一个段落，这里是关于我的一些介绍。</p>
<p>这里还有另一个段落。</p>
<h2>我的爱好</h2>
<ul>
<li>编程</li>
<li>阅读</li>
<li>看电影</li>
</ul>
<h2>照片墙</h2>
<img src="https://via.placeholder.com/150" alt="一张示例图片">
</body>
</html>
代码解释：
（图片来源网络，侵删）
<!DOCTYPE html>：告诉浏览器这是一个 HTML5 文件。<html>：整个网页的根元素,所有内容都放在这里面。<head>：网页的“头”，包含一些不直接显示在页面上的信息，比如标题、字符编码等。<title>：显示在浏览器标签栏上的网页标题。<body>：网页的“身体”,所有在页面上能看到的内容都放在这里面。<h1>,<h2>标签，<h1>是最大的标题。<p>：段落标签。<ul>：无序列表（bullet list）。<li>：列表项。<img>：图片标签。src属性指向图片的地址，这里我们用了一个占位图服务，你可以换成自己图片的路径，images/my-photo.jpg（记得把图片也放到my-website文件夹里）。
第四步：用 CSS 美化网页（穿上漂亮衣服）
现在网页有了内容，但看起来很朴素,我们来给它加点样式。
- 在
my-website文件夹中，再新建一个文件，命名为style.css。 - 回到
index.html文件，在<head>标签内部，添加下面这行代码，用来引入你的 CSS 文件：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
<link rel="stylesheet" href="style.css"> <!-- 在这里添加 -->
</head>
- 打开
style.css文件,输入以下代码：
/* body 样式 */
body {
font-family: "Microsoft YaHei", sans-serif; /* 设置一个好看的字体 */
background-color: #f0f2f5; /* 设置浅灰色背景 */
color: #333; /* 设置默认文字颜色 */
margin: 0; /* 去掉默认的外边距 */
padding: 20px; /* 添加一些内边距，让内容不贴边 */
}
样式 */
h1 {
color: #007bff; /* 设置蓝色 */
text-align: center; /* 文字居中 */
}
h2 {
color: #28a745; /* 设置绿色 */
border-bottom: 2px solid #28a745; /* 添加一条下划线 */
padding-bottom: 10px;
}
/* 段落样式 */
p {
line-height: 1.6; /* 增加行高，让段落更易读 */
}
/* 列表样式 */
ul {
list-style-type: square; /* 将列表项标记改为方块 */
}
/* 图片样式 */
img {
border: 5px solid #fff; /* 给图片加个白色边框 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加一个轻微的阴影效果 */
max-width: 100%; /* 确保图片不会超出屏幕宽度 */
}
CSS 代码解释：
body { ... }：选择body这个元素,并给它设置样式。font-family：指定字体。color：文字颜色。background-color：背景颜色。text-align: center：文本居中对齐。- 这是 CSS 的注释,解释代码的作用。
第五步：查看你的杰作！
所有工作都完成了,如何看到网页呢？
- 最简单的方法：在 VS Code 中打开
index.html文件，右键点击编辑区，选择Open in Browser(在浏览器中打开)，或者直接按快捷键Alt + B。 - 或者：找到你电脑上的
my-website文件夹，双击index.html文件,它也会用你的默认浏览器打开。
恭喜你！ 现在你应该能在浏览器里看到一个有颜色、有布局、比你之前输入的纯文本好看得多的网页了！
进阶与练习
你已经完成了基础，接下来可以尝试一些小挑战,让网页更丰富：
- 添加更多内容：试试
<a>标签（超链接，<a href="https://www.google.com">访问谷歌</a>），<table>标签（表格）。 - 布局：学习使用
div标签和 CSS 的display: flex或grid属性来创建简单的两栏或三栏布局。 - 响应式设计：在 CSS 中加入
@media查询，让网页在手机上也能很好地显示。@media (max-width: 600px) { body { padding: 10px; } } - 学习一点点 JavaScript：在
index.html的</body>标签前，加入<script src="script.js"></script>，然后创建一个script.js文件，在里面写一行alert('你好，世界！');,刷新网页看看会发生什么。
学习资源推荐
- MDN Web Docs (Mozilla 开发者网络)：https://developer.mozilla.org/zh-CN/
这是 Web 技术的“圣经”，权威、免费、文档极其详尽，遇到任何不懂的 HTML、CSS、JS 概念,第一个就查它！
- W3Schools：https://www.w3schools.com/
另一个非常棒的入门教程网站，有大量在线实例,可以实时修改代码并查看效果。
从现在开始，大胆地尝试和修改你的代码吧！你会发现，每一次小小的改动，都会带来新的发现和乐趣,祝你玩得开心！
