web_dev basics / front end
WEB Dev Basic
记录一下学习互联网应用开发的一些笔记，这里主要是一些比较大的概念
概念
- HTML
- CSS
- JavaScript
- React
- Vite
HTML
HTML 是网页的结构骨架，负责“有什么内容”。
- 超文本标记语言（HyperText Markup Language）
- 不是编程语言，是标记语言，用标签描述页面结构
- 决定页面里有哪些东西：标题、段落、图片、链接、按钮、表单等
- 整个网页的根节点是
<html>，实际内容放在<body>里
核心作用：
- 定义页面结构
- 放置内容
- 给浏览器提供语义（哪里是标题、哪里是导航、哪里是正文）
简单理解：
HTML 就是盖房子时的钢筋水泥框架，只有结构，没有样式和交互。
CSS
CSS 是网页的样式外观，负责“长什么样”。
- 层叠样式表（Cascading Style Sheets）
- 用来美化 HTML，控制颜色、大小、位置、字体、布局、动画等
- 可以写在标签内（行内样式）、
<style>标签内（内部样式）、单独.css文件（外部样式）
核心作用：
- 控制外观和样式
- 实现布局（居中、分列、弹性布局、网格）
- 让页面好看、适配不同屏幕
简单理解：
CSS 就是给房子装修、刷墙、摆家具，让结构变好看、变整齐。
JavaScript
JavaScript 是网页的行为逻辑，负责“动起来”。
- 前端唯一的脚本编程语言
- 让网页具备交互能力：点击、输入、弹窗、请求数据、修改页面内容
- 可以操作 HTML 和 CSS，实现动态更新
核心作用：
- 实现交互逻辑
- 操作 DOM（修改 HTML 元素、CSS 样式）
- 处理事件（点击、输入、滚动等）
- 发送网络请求、获取数据
- 实现复杂功能：表单验证、轮播图、下拉菜单、单页应用等
简单理解：
JavaScript 就是给房子装电路、装开关、装智能系统，让房子能用、会动、能交互。
React
React 是用于构建用户界面的 JavaScript 库，用来快速开发大型前端项目。
- 由 Meta（Facebook）开发的主流前端框架
- 基于组件化和函数式编程思想
- 使用 JSX 语法，可以在 JS 中写 HTML 结构
- 通过 useState 等 Hook 管理页面状态，数据变页面自动更新
核心作用：
- 把页面拆成组件，复用、维护更简单
- 数据驱动视图：只改数据，不用手动操作 DOM
- 适合开发复杂交互、大型项目（后台系统、APP 网页、桌面软件等）
- 可以配合 Electron/Tauri 开发桌面软件
简单理解：
原生 HTML/CSS/JS 是“手工盖房子”，React 是模块化预制建房，效率更高、扩展性更强。
一些特性
- 使用
<StrictMode>的情况下，Dev的时候会执行两遍函数，确保你遵循了函数式编程的特性， - “快照‘”：当一个函数没有结束的时候，会保存state的快照，因此注意在一个函数内部处理的是不是具有完整函数特性的，这样连续执行是否合法（比如更新一个useState）
- 修改一个对象的时候要重建一个对象（引用要变化才能触发刷新），原本的对象会被GC
Vite
Vite 是前端构建工具，负责项目的运行、打包、编译。
- 新一代前端工程化工具，比传统 Webpack 更快
- 由 Vue 作者尤雨溪开发，支持 React、Vue、原生 JS 等
- 启动极快、修改代码后热更新、自动编译 JSX/TS/CSS 等
核心作用：
- 快速创建项目模板
- 启动开发服务器，本地预览网页
- 自动处理 JSX、ES6+、CSS 等语法
- 最终打包成可上线的静态文件（
dist文件夹）
简单理解：
Vite 就是前端项目的工地总指挥 + 施工队，你只管写代码，它负责编译、运行、打包。
三者关系
- HTML：结构（有什么）
- CSS：样式（好看吗）
- JavaScript：行为（能干嘛）
React = 高效开发方式
Vite = 工程化工具
前端开发 = 用 HTML + CSS + JS 构建页面，用 React 提升效率，用 Vite 管理项目