从零到一：AI 全栈开发笔记

从零到一：AI 全栈开发入门笔记

一、项目架构：前后端分离

现代 Web 开发的第一课，不是写代码，而是划分职责。一个可维护的项目，从目录结构开始就有了清晰的边界：

复制代码

fe/        ← 前端：用户看到的一切
backend/   ← 后端：数据、逻辑、接口

为什么不能把所有代码塞进一个文件？因为单体文件的宿命是：改不动、不敢删、加不了。模块化的核心思想很简单------每个文件夹有自己的职责，每个文件只做一件事。这不是教条，是无数项目"屎山"化之后换来的教训。

二、前端三件套：让页面早一点被看见

前端说到底就是三种语言各司其职：

语言	职责	引入方式
HTML	结构------页面有什么	标签
CSS	样式------页面长什么样	`<link>` 头部引入
JS	行为------页面能干什么	`<script>` 引入

这里有一个容易被忽视的体验细节：CSS 放在头部，让样式尽早加载 。用户打开网页的那一瞬间，如果 HTML 结构已经渲染而样式还没到，页面会"闪一下"------先看到裸结构，再突然穿上衣服。把 CSS 放在 <head> 中，就是在跟浏览器的渲染时序赛跑，让用户更快看到完整的页面。这一点小小的"爽感"，就是前端体验的起点。

三、盒子思维与布局体系

写 HTML 不是在写字，是在搭盒子。每个页面区域都是一个容器，先把盒子摆好位置，再往里面填内容。

块级元素 vs 行内元素，这是 CSS 世界的第一性原理：

块级元素（div、section、header）天生独占一行，适合做盒子
行内元素（span、a、em）可以和平共处，适合装内容

在 PC 时代，屏幕尺寸五花八门，于是有了经典的"容器 + 行列"布局模式：

markdown 复制代码

.container  →  固定宽度，左右留白，居中显示
  .row       →  一行
    .col     →  一列

这套思路被 Bootstrap 框架发扬光大。聊到"页面好看"这个话题，Bootstrap 的 Twitter 团队用一套 CSS 类名解决了无数开发者的布局痛点------栅格系统、响应式断点、预制组件，让后端程序员也能写出能看的页面。

四、语义化 HTML：不要 div 满天飞

如果页面里全是 <div>，在浏览器眼中它只是一堆没有意义的盒子。搜索引擎看不懂你的内容层级，屏幕阅读器也不知道哪里是导航、哪里是正文。

语义化标签就是给 HTML 装上"说明书"：

xml 复制代码

<header>   <!-- 比 <div class="header"> 更有语义 -->
<nav>      <!-- 导航区域 -->
<main>     <!-- 主体内容 -->
<article>  <!-- 独立文章 -->
<aside>    <!-- 侧边栏 -->
<footer>   <!-- 页脚 -->

表格也是重灾区。很多人直接用 <div> 拼表格，但正确的做法是：

css 复制代码

<table>
  <thead>
    <tr><td>姓名</td><td>年龄</td></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>25</td></tr>
  </tbody>
</table>

thead + tbody 是表格语义的关键，缺少它们，这只是一个"长得像表格的 div 堆"。大厂面试特别爱问这个------不是问你用过什么框架，而是问你知道 <header> 和 <div> 的区别吗？框架会过时，语义化不会。

五、DOM：从 HTML 到 JavaScript 的桥梁

HTML 文档的本质是什么？它是一段文本，但通过 HTTP 传输时，Content-Type: text/html 告诉浏览器："这段文本里有标签，请按 HTML 解析"。

xml 复制代码

<!DOCTYPE html>  <!-- 告诉浏览器：这是 HTML5 -->

这个声明不能省。HTML4 和 HTML5 的解析规则不同，<!DOCTYPE html> 就是浏览器的"模式开关"。

当浏览器解析完 HTML，它就变成了一个可以被 JavaScript 操作的对象树------DOM（Document Object Model） ：

dart 复制代码

// document 是整个文档的入口
document.documentElement  // <html> 根节点
document.body             // <body>

// 用选择器在树上"旅行"
const el = document.querySelector('.box')  // 找到节点
el.innerHTML = '新内容'                     // 修改内容

// 遍历树
el.parentNode     // 父节点
el.children       // 子节点
el.nextSibling    // 兄弟节点

// 挂载新节点
document.body.appendChild(newEl)

HTML 标签到了 JS 内存里，就变成了可以增删改查的 Document Node。理解了这层映射关系，才真正跨过了"会用框架"到"理解前端"的门槛。动态插入 HTML、事件绑定、组件渲染------所有前端框架的底层原理，都建立在这棵 DOM 树之上。

六、后端起步：一行命令跑起 HTTP 服务

JavaScript 的野心不只在前端。Node.js 让它通吃前后端，而 npm 是进入后端世界的钥匙：

csharp 复制代码

npm init -y          # 生成 package.json，项目的"身份证"
npm i json-server    # 安装 JSON Server

package.json 是 Node.js 项目的描述文件------项目名、版本、依赖、脚本，都在里面。几行配置，json-server 就能把一个 JSON 文件变成 RESTful API，支持 CRUD 操作，让前端开发者不用等后端就能跑通完整的数据流。

七、总结

回头看这条路：HTML 搭结构，CSS 管样式，JS 管交互------然后模块化拆分目录，语义化写标签，理解 DOM 树，用 Node.js 搭后端。每一步都在回答同一个问题：代码怎么写，才能让三个月后的自己还敢改？

模块化是为了维护，语义化是为了可读，前后端分离是为了独立演进。这些都不是炫技，是生存策略。