学习小贴士

学习方法

多写代码，少看不练=白学

️ F12打开DevTools是你的超能力

遇到问题先搜MDN文档

每天坚持写一点，哪怕10行

看别人的代码也是学习

学会用AI辅助编程

常用快捷键

Ctrl + S → 保存文件

Ctrl + / → 注释代码

Ctrl + D → 选中相同词

Ctrl + F → 搜索内容

Ctrl + H → 查找替换

Alt + ↑↓ → 移动行

Shift + Alt + ↑↓ → 复制行

Ctrl + Shift + K → 删除行

前端技术栈

核心三件套

HTML5 - 页面结构

CSS3 - 样式美化

JavaScript - 交互逻辑

进阶技术

TypeScript - 类型安全

ES6+ - 现代语法

React / Vue / Angular

Webpack - 构建工具

Tailwind CSS - 原子化CSS

学习资源

HTML & CSS 学习导航

系统化前端学习资料，从零到一

️ HTML 学习

序号对应文档目录章节，括号内为该文件合并的其他章节

1.1 HTML结构(1.2)

HTML基础结构、模板

1.3 常见文本标签(1.5)

标题、段落、强调、行内元素

全局属性、事件属性、style/class/id

1.5.1 列表标签

有序列表、无序列表、定义列表

1.6 HTML区块（2.1 语义化标签）

语义化标签、页面结构、div/span、区块

1.7 HTML表单（2.4 表单进阶）

表单验证、fieldset分组、datalist

2.2 多媒体标签（图片）

img标签、alt属性、懒加载、响应式图片

2.3 表格进阶

表格结构、合并单元格

2.5 链接进阶

锚点、邮件、下载链接、base标签

2.6 HTML5新增标签

结构标签、input新类型、进度条

2.7 嵌入与代码

音频、视频、iframe嵌入

2.8, 2.9 进阶与兼容

字符实体、link引入CSS与图标

HTML 学习（简化版）

精简版教程，覆盖核心知识点，适合快速入门

1.1 HTML基础简化版

标签、属性、文本、列表、图片、链接

1.2 HTML结构简化版

区块、div、行内块元素

1.3 HTML交互简化版

表单、输入框、按钮、验证

1.4 HTML媒体简化版

音频、视频、iframe嵌入

1.5 HTML进阶简化版

字符实体、SEO、link引入

CSS 学习

序号对应文档目录章节，括号内为该文件合并的其他章节

1.3 CSS导入方式

内联样式、内部样式表、外部样式表

1.4 CSS选择器

基础选择器、组合选择器、伪类、伪元素

px、em、rem、vw、vh、%

1.6 CSS文本与字体

字体属性、文本样式、行高、对齐

2.1 CSS盒模型

content、padding、border、margin

2.2 CSS布局定位

position、z-index、float、clearfix

2.3 CSS Flex布局

flex容器、flex项目、主轴、交叉轴

2.4 CSS Grid布局

grid容器、grid项目、fr单位、区域布局

2.5 CSS视觉美化

背景、阴影、透明度、滤镜、渐变

2.6 CSS动效与变换

transform、transition、animation

JavaScript 学习

JavaScript 学习模块即将上线，敬请期待...

本网页依靠 AI (MiClaw) 开发

编辑时间：2026年6月7日 11：05：00