太棒了！制作一个简单的网站是一个非常有趣且实用的技能，我会为你提供一个从零开始的、非常详细的指南,即使你完全没有编程基础也能看懂。
我们将使用最主流、最适合初学者的技术：HTML、CSS 和一点点 JavaScript。
核心思想：三层结构
想象一下盖房子：
- HTML (结构层)：是房子的钢筋水泥框架，决定了哪里是客厅，哪里是卧室，哪里是门和窗户,它定义了内容的结构和含义。
- CSS (样式层)：是房子的装修和粉刷，决定了墙壁是什么颜色，家具怎么摆放，窗帘是什么样式,它负责让网页变得美观。
- JavaScript (行为层)：是房子的智能家居系统，比如自动开关的灯、能调节的空调，它负责让网页产生交互效果,比如点击按钮后弹出提示框。
对于“简单网站”，我们先专注于 HTML 和 CSS，最后会用一点点 JavaScript 增加一点“魔法”。
第一步：准备工作（你的工具箱）
你不需要安装任何复杂昂贵的软件！只需要两样东西：
-
一个代码编辑器：这是一个专门用来写代码的工具，它会用不同颜色高亮显示代码,让你更容易阅读和修改。
- 强烈推荐：Visual Studio Code (简称 VS Code)，它是目前最流行、功能最强大的免费代码编辑器。
- 下载地址：https://code.visualstudio.com/
- 安装提示：下载后，一路点击“下一步”即可安装，安装时，可以勾选“Add to PATH”选项,方便以后在命令行中使用。
-
一个网页浏览器：你已经有了！Chrome、Firefox、Edge 或 Safari,我们用它来查看我们制作的网页。
第二步：创建你的第一个网页文件
- 创建项目文件夹：在你的电脑上，找到一个你喜欢的地方（比如桌面或 D 盘），新建一个文件夹，命名为
my-first-website。 - 创建 HTML 文件：
- 在
my-first-website文件夹里，右键点击，选择“新建” -> “文本文档”。 - 将文件名从
新建文本文档.txt重命名为index.html。 - 重要提示：确保文件名后缀是
.html，而不是.txt，如果看不到后缀，需要在文件资源管理器的“查看”选项中勾选“文件扩展名”。
- 在
- 用 VS Code 打开文件：
- 右键点击
index.html文件，选择“使用 VS Code 打开”。
- 右键点击
你拥有了一个空白的网页画布！
第三步：编写 HTML 内容（搭建框架）
在 VS Code 中，打开 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>
<h2>关于我</h2>
<p>我是一个正在学习网站制作的新手。</p>
<h2>我的爱好</h2>
<ul>
<li>编程</li>
<li>阅读</li>
<li>看电影</li>
</ul>
<h2>联系我</h2>
<a href="mailto:someone@example.com">给我发邮件</a>
</body>
</html>
代码解释：
<!DOCTYPE html>：告诉浏览器，这是一个 HTML5 文件。<html lang="zh-CN">：整个网页的根标签，lang="zh-CN"表示网站的语言是中文。<head>：网页的“头部”，存放了网页的元信息，比如标题、字符编码等，这些内容不会直接显示在页面上。<meta charset="UTF-8">：确保网页能正确显示中文、英文等所有字符。<title>：显示在浏览器标签页上的标题。
<body>：网页的“身体”，所有在浏览器中能看到的内容都放在这里。<h1>,<h2>标签，<h1>是最重要的标题，<h2>是次一级标题。<p>：段落标签。<ul>：无序列表（项目符号列表）。<li>：列表项。<a>：超链接标签，href="mailto:..."表示这是一个邮件链接。
保存这个文件，然后用浏览器打开它（直接双击 index.html 文件即可）。
恭喜！你已经成功创建了一个有基本结构的网页！虽然它现在看起来非常朴素,但这是最核心的一步。
第四步：用 CSS 美化你的网页（添加样式）
我们的房子框架搭好了，但空空如也，很丑，让我们用 CSS 来装修它。
-
创建 CSS 文件：
- 在
my-first-website文件夹里，再新建一个文件，命名为style.css。
- 在
-
连接 HTML 和 CSS：
- 打开
index.html文件，在<head>标签里，添加下面这行代码，用来告诉 HTML 去哪里找样式文件。<link rel="stylesheet" href="style.css">
你的
index.html的<head>部分现在应该是这样：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网站</title> <link rel="stylesheet" href="style.css"> </head>
- 打开
-
编写 CSS 代码：
- 用 VS Code 打开
style.css文件，输入以下代码来美化你的网页。/* 给整个页面设置一个背景色和字体 */ body { background-color: #f0f8ff; /* 淡蓝色背景 */ font-family: Arial, sans-serif; /* 设置字体 */ margin: 0; /* 去掉默认的页面边距 */ color: #333; /* 设置文字颜色为深灰色 */ line-height: 1.6; /* 增加行高，让文字更易读 */ }
/ 让内容居中，并设置宽度 / .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #ffffff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
/ 标题样式 / h1 { color: #0056b3; / 深蓝色标题 / border-bottom: 2px solid #0056b3; padding-bottom: 10px; }
h2 { color: #0066cc; / 另一种蓝色 / margin-top: 30px; }
/ 段落样式 / p { margin-bottom: 15px; }
/ 列表样式 / ul { padding-left: 20px; }
/ 链接样式 / a { color: #0066cc; text-decoration: none; / 去掉下划线 / }
a:hover { text-decoration: underline; / 鼠标悬停时显示下划线 / }
**CSS 代码解释**： * `body { ... }`：选择 `body` 这个元素，给它设置样式。 * `color`, `background-color`：设置文字和背景颜色。 * `.container`：这是一个“类选择器”，我们在 HTML 中还没有用到它，现在马上加上！ * `max-width`, `margin: auto`：这是让内容居中的常用技巧。 * `a:hover`：当鼠标移动到链接上时应用的样式。 - 用 VS Code 打开
-
在 HTML 中使用 CSS 类：
- 打开
index.html文件，找到<body>标签，把里面的所有内容都用<div class="container">包裹起来。<body> <div class="container"> <h1>欢迎来到我的个人空间！</h1> <p>这是一个由我亲手制作的简单网站。</p> <h2>关于我</h2> <p>我是一个正在学习网站制作的新手。</p> <h2>我的
- 打开
