前端学习_鱼皮哥

1前段入门

学习前端基础三件套，边学边练，培养兴趣，快速入门。
在线练习前端编程的资源
https://developer.aliyun.com/learning/roadmap/frontend
https://www.w3cschool.cn/codecamp/
https://www.w3cschool.cn/codecamp/
目标：了解和实战各个语言的基础语法，可以使用开发工具独立开发一个留言板网站。

开发工具：
浏览器：chrome
编辑器：VSCode、WebStorm、sublime text
文档笔记：Markdown，Typora，语雀，CSDN

HTML

编写网站的内容和结构
https://developer.mozilla.org/zh-CN/docs/Learn/HTML

基础语法

标签：
分区 div(小盒子)
标题 h1-h6
段落 p
图像 img
列表 ul/ol
超链接 a
表单 form
表格 table
框架 iframe

属性：改变标签的行为

HTML5特性 ：
语义化标签
浏览器支持
多媒体标签
Canvas画布
x内存SVG
本地存储：localStorage 、 sessionStorage 、 x Web SQL
Web Workers
应用缓存(Cache Manifest)
无障碍

CSS

层叠样式表，用于设计风格和布局。
https://developer.mozilla.org/zh-CN/docs/Learn/CSS
基本语法
引入方式：行内样式 内部样式表 外部样式表
选择器：通用选择器、标签选择器、id选择器、class选择器、属性选择器、派生选择器（后代选择器、子元素选择器、相邻兄弟选择器）、组合选择器、伪选择器、选择器优先级
属性：单位(px em rem vw vh)、背景、文本、字体、列表、表格、
文档流：标准流、浮动流、定位流
内联元素、块状元素：
盒子模型：content、padding、border、margin
浮动：设置浮动、清除浮动
定位：static、absolute、fixed、relative、sticky
层叠规则

JavaScript

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
基础语法
数据类型：值类型，引用类型
函数
对象
作用域
BOM API
DOM API
JSON
Ajax
JavaScript执行机制
ES6+特性

2前端工程化

使用软件工程的技术和方法来进行前段的开发流程、技术、工具、经验等规范化、标准化，目的是为了提高开发过程中的开发效率，减少不必要的重复工作时间。
目标：至少学一个主流前端开发框架（Vue/React），并配合脚手架、组件库、工具等从0开始独立搭建开发一个完整的前端网页，可以试着模仿一些知名网页。遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。
https://www.zhihu.com/question/433854153/answer/1713597311
**研发流程：**技术选型、初始化、开发、本地测试、代码提交、编译打包构建、部署、集成测试、发布上线、监控运维
代码托管： GitHub、Gitee、GitLab 集中存储、备份代码，并且能和团队成员协作开发。
**Node.JS：**用于安装Node.js的扩展、工具， npm yarn bower npx
**开发框架:**解决特定问题，提高开发效率、简化我们的代码复杂度。CSS框架（BootStrap/Tailwind CSS）JavaScript 框架（Vue/React 二选一）Vue Router Vuex
**封装库：**组件库： ElementUI（Vue） Ant Design（Vue）、数据可视化、组件插件、工具库、动效库、字体图表库
**脚手架：**快速生成新项目的目录模板，提升开发效率和开发舒适度。
前段框架设计
CSS in JS
**开发调试：**将内网外网通过nat隧道打通，让内网的网站、数据让外网可以访问。
CSS预编译：
测试：
代码质量：
构建工具：
CI/CD:
部署：