文章

web_dev basics / front end

web
本文目录 9

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 管理项目