- 核心概念：在写代码前，你需要知道的基本原理。
- 三大基石：构成网页的 HTML、CSS 和 JavaScript。
- 实践与进阶：如何组织项目、学习资源和下一步。
第一部分：核心概念
在开始写代码之前,理解这几个基本概念至关重要。
（图片来源网络，侵删）
网站是如何工作的？
想象一下访问一个网站（google.com）的过程：
- 输入网址：你在浏览器地址栏输入
google.com并回车。 - DNS 解析：你的电脑会去问一个“电话本”（DNS 服务器）：“
google.com的地址（IP 地址）是什么？” - 发送请求：得到地址后，你的浏览器向 Google 的服务器发送一个 HTTP 请求：“你好，我想看你的首页。”
- 服务器响应：Google 的服务器收到请求，处理它，然后发回一个 HTML 文件（以及 CSS、JS 等文件）作为响应。
- 浏览器渲染：你的浏览器接收到这个 HTML 文件，然后根据里面的 CSS 样式让它变漂亮，再根据 JavaScript 让它变得可以交互，最终你就在屏幕上看到了完整的网页。
前端 vs. 后端
- 前端：用户直接看到和交互的部分，负责网站的“颜值”和“交互体验”，技术栈主要是 HTML, CSS, JavaScript。
- 后端：在服务器上运行，用户看不到的部分，负责处理数据、逻辑、用户认证等，技术栈可以是 Python (Django/Flask), Java (Spring), Node.js, PHP 等。
- 数据库：存储网站数据的地方，比如用户信息、文章内容等，如 MySQL, PostgreSQL, MongoDB。
对于初学者,我们只关注 前端。
开发工具
- 代码编辑器：用来写代码的软件，强烈推荐 Visual Studio Code (VS Code)，它免费、强大、插件丰富。
- 浏览器：推荐使用 Chrome 或 Firefox，它们自带的“开发者工具”是前端开发的利器，可以实时调试代码、查看页面结构。
第二部分：三大基石
HTML、CSS 和 JavaScript 是构建网页的三个核心技术，它们各司其职。
HTML (超文本标记语言) - 骨架
HTML 定义了网页的，它就像人体的骨骼，告诉你哪里是头，哪里是身体。
（图片来源网络，侵删）
核心概念：
- 用尖括号
< >包围的关键词，如<h1>,<p>,<a>。 - 元素：由开始标签、内容和结束标签组成，如
<p>这是一个段落。</p>。 - 属性：提供额外信息，如
<a href="https://www.google.com">点击这里</a>中的href属性。
常用标签：
<html>：根元素，所有内容都放在里面。<head>：包含页面的元数据，如标题、字符编码、引入的 CSS/JS 文件。<body>：包含页面的所有可见内容。<h1>-<h6>标签，<h1>是最重要的标题。<p>：段落标签。<a>：超链接标签，href属性指定链接地址。<img>：图片标签，src属性指定图片路径，alt属性提供替代文本。<ul>/<ol>/<li>：无序列表 / 有序列表 / 列表项。<div>：块级容器，用于布局和分组内容。<span>器，用于对文本的一部分进行样式化。
实例：一个简单的 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>这是一个段落，用 <strong>p</strong> 标签定义。</p>
<h2>我的爱好</h2>
<ul>
<li>编程</li>
<li>阅读</li>
<li>旅行</li>
</ul>
<p>访问 <a href="https://www.google.com" target="_blank">Google</a> 了解更多。</p>
<img src="https://www.w3schools.com/html/pic_mountain.jpg" alt="一张山的图片">
</body>
</html>
CSS (层叠样式表) - 衣服
CSS 负责网页的视觉表现，比如颜色、字体、间距、布局等，它给人穿上漂亮的衣服。
（图片来源网络，侵删）
核心概念：
- 选择器：选择你想要样化的 HTML 元素，如
p(所有段落),.class-name(所有特定类名的元素),#id-name(特定ID的元素)。 - 声明块：由花括号 包围，包含一个或多个声明。
- 声明：由属性和值组成，用冒号 分隔，用分号 如
color: blue;。
实例：为上面的 HTML 添加样式
在同一目录下，创建一个名为 style.css 的文件，然后在 index.html 的 <head> 部分添加 <link rel="stylesheet" href="style.css"> 来引入它。
style.css 文件内容：
/* 全局样式 */
body {
font-family: "Microsoft YaHei", Arial, sans-serif; /* 设置字体 */
background-color: #f0f0f0; /* 设置背景色 */
color: #333; /* 设置默认文字颜色 */
margin: 0; /* 去掉默认外边距 */
padding: 20px;
}
样式 */
h1 {
color: #0056b3; /* 设置标题颜色 */
text-align: center; /* 文字居中 */
}
/* 段落样式 */
p {
line-height: 1.6; /* 设置行高 */
}
/* 链接样式 */
a {
color: #28a745; /* 设置链接颜色 */
text-decoration: none; /* 去掉下划线 */
}
a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
/* 图片样式 */
img {
max-width: 100%; /* 图片最大宽度为100%，防止溢出容器 */
height: auto; /* 高度自动调整，保持比例 */
display: block; /* 块级显示，方便设置外边距 */
margin: 20px auto; /* 上下外边距20px，左右自动实现居中 */
}
现在刷新你的 index.html 页面，是不是漂亮多了？
JavaScript (JS) - 行为
JavaScript 让网页“活”起来，实现交互和动态效果，比如点击按钮弹出提示框、表单验证、动态更新内容等。
核心概念：
- 变量：存储数据的容器，使用
let或const声明。 - 函数：可重复执行的代码块。
- 事件：用户或浏览器的行为，如点击 (
click)、鼠标悬停 (mouseover)、页面加载 (load)。 - DOM (文档对象模型)：JavaScript 可以通过 DOM 来访问和修改 HTML 和 CSS。
实例：添加一个简单的交互功能
在同一目录下，创建一个名为 script.js 的文件，然后在 index.html 的 </body> 标签前添加 <script src="script.js"></script> 来引入它。
script.js 文件内容：
// 等待整个 HTML 文档加载完毕后再执行 JS 代码
document.addEventListener('DOMContentLoaded', function() {
// 1. 获取页面上的 h1 元素
const myHeading = document.querySelector('h1');
// 2. 为 h1 元素添加一个点击事件监听器
myHeading.addEventListener('click', function() {
// 当 h1 被点击时，执行这个函数
alert('你点击了标题！');
});
// 3. 获取页面上的第一个链接元素
const myLink = document.querySelector('a');
// 4. 为链接添加一个鼠标悬停事件
myLink.addEventListener('mouseover', function() {
// 鼠标悬停时，改变链接文字
this.textContent = '点击这里去 Google (悬停中)';
});
myLink.addEventListener('mouseout', function() {
// 鼠标移开时，恢复链接文字
this.textContent = '访问 Google';
});
});
刷新 index.html，现在你可以点击标题，并将鼠标移到链接上试试看效果。
第三部分：实践与进阶
如何组织项目？
一个专业的网站项目结构应该是这样的：
my-website/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/
│ └── my-image.jpg
└── README.md (可选，项目说明)- 根目录：存放
index.html。 - css/ 文件夹：存放所有样式表。
- js/ 文件夹：存放所有脚本。
- images/ 文件夹：存放所有图片。
这样做的好处是结构清晰,易于管理和维护。
学习资源
- MDN Web Docs (Mozilla 开发者网络)：最权威、最全面的 Web 技术文档，遇到任何问题，第一反应应该是查 MDN。
- freeCodeCamp：一个完全免费、互动性极强的学习平台，提供从零到一的完整课程。
- W3Schools：一个非常流行的在线教程和参考网站，例子丰富，适合快速查询。
- YouTube 频道：
- Traversy Media：高质量的编程教程。
- The Net Ninja：系统化的 Web 开发系列教程。
下一步学什么？
当你掌握了 HTML, CSS, JavaScript 基础后，可以开始学习：
- 响应式设计：让你的网站在不同尺寸的设备（手机、平板、电脑）上都能良好显示，核心技术是 CSS Media Queries。
- CSS 框架：学习使用像 Bootstrap 或 Tailwind CSS 这样的框架，它们能让你快速构建出美观、响应式的界面。
- 前端工具链：学习使用 Git (版本控制) 和 npm/yarn (包管理器)，以及构建工具如 Webpack 或 Vite，这是现代前端开发的标配。
- 后端入门：选择一门后端语言（如 Python 或 Node.js），学习如何创建 API，让你的前端能够与后端进行数据交互。
希望这份指南能帮助你顺利开启网站建设之旅！祝你学习愉快！
