网站基础教程

1. 网站是如何工作的？

• 用户（客户端） 在浏览器输入网址（如 https://www.example.com）。

• DNS 服务器 将域名解析为服务器的 IP 地址。

• 浏览器向该 服务器 发送 HTTP 请求。

• 服务器 处理请求并返回 HTML、CSS、JavaScript 等资源。

• 浏览器 解析资源并渲染成你看到的网页。

2. 前端三件套：HTML、CSS、JavaScript

HTML – 网页的骨架

• 作用：定义网页的结构和内容（标题、段落、图片、按钮等）。

• 核心概念：标签、元素、属性。

示例:

<h1>这是标题</h1>
<p>这是一个段落。</p>
<img src="photo.jpg" alt="图片描述">

CSS – 网页的皮肤

• 作用：控制样式和布局（颜色、字体、位置、动画等）。

• 引入方式：内联、内部样式表、外部样式表。

示例:

 body {
background-color: #f0f0f0;
font-family: Arial;
}
h1 {
color: blue;
}

JavaScript – 网页的行为

• 作用：实现交互、动态更新内容、操作 DOM、发送网络请求等。

示例:

 document.getElementById("myButton").onclick = function() {
alert("按钮被点击了！");
};

3. 后端基础：让网站“活”起来

• 后端：运行在服务器上，处理数据库、用户登录、数据存储、业务逻辑等。

• 常见后端语言：PHP、Python、Java、Node.js、Go、Ruby 等。

• 常见数据库：MySQL、PostgreSQL、MongoDB。

• 工作流程：

  1. 前端（HTML/JS）发送请求（如登录表单）。

  2. 后端接收并验证数据。

  3. 后端查询数据库，处理业务逻辑。

  4. 后端返回响应（如 JSON 或新页面）。

  5. 前端展示响应结果。

4. 学习路径建议（零基础）

1. HTML（1周）

   • 学习常用标签：div, p, a, img, ul, table, form, input

   • 理解块级元素与行内元素

   • 掌握语义化 HTML

2. CSS（2周）

   • 选择器、盒模型、定位、Flex、Grid

   • 响应式设计（媒体查询）

   • 常用布局实践

3. JavaScript（3-4周）

   • 变量、函数、数组、对象

   • DOM 操作与事件

   • fetch / Ajax 请求

   • 了解 ES6+ 特性

4. 版本控制（1天）

   • Git 基础：clone, add, commit, push, pull

5. 后端入门（按需选择）

   • 如 PHP + MySQL 或 Node.js + Express

   • 理解 HTTP 方法（GET, POST, PUT, DELETE）

   • 学习简单的 API 开发

6. 部署上线

   • 购买域名、虚拟主机 / 云服务器（如阿里云、腾讯云、Vercel）

   • 使用 FTP 或 Git 上传代码

5. 常用工具与资源

• 代码编辑器：VS Code、Sublime Text、WebStorm

• 浏览器开发者工具：F12（检查元素、控制台、网络）

• 在线学习平台：MDN Web Docs、freeCodeCamp、W3Schools

• 图标/图片资源：FontAwesome、Unsplash、Pexels

• 前端框架（后期）：React、Vue、Angular

6. 小提示

• 先模仿，再创造：从复制简单页面开始，逐步修改。

• 多做笔记：记录易错点和常用代码片段。

• 多调试：善用 console.log 和浏览器开发者工具。

• 保持好奇：遇到不懂的标签或属性，立刻查 MDN 文档。