前端学习笔记1(开端)

NANO140

已于 2024-03-10 22:42:54 修改

阅读量1.4k

点赞数 17

文章标签：前端学习 html5 css javascript vue.js 笔记

于 2024-03-04 23:08:01 首次发布

本文链接：https://blog.csdn.net/m0_72661111/article/details/136460165

版权

一、学习路径

HTML+CSS+JS + VUE3(Vue+Vite)+Router+ElementUI + Echarts等

在掌握HTML的基础上，学会CSS基础使用方式，以及JS基础。在学习过程中慢慢学习CSS与JS。之后再学习VUE3等额外内容的使用。不过你也要意识到，就像是MDN所写的那样：

前端的学习是一个需要长期努力持之以恒的过程，这需要你不断的努力与动手实践

切记一定要动手！切记一定要动手！切记一定要动手！

二、参考/准备 ( 资料以及你所需要的软件等 [最基本的] )

MDN：mdn是mozilla基金会的开发者文档，是非常详细的前端文档。三件套的学习可以在这里进行。为什么我更推荐你直接去看mdn而不是看网课呢？首先我个人觉得mdn讲的已经足够详细，并且拥有大量的、跟随课程进度的、简单易懂的在线练习。你甚至可以在mdn的playground直接在线的写下三件套来进行练习（当然长时间的看文档当然会是一件令人痛苦的事情，所以看不下去的时候不如站起来出去走走，或者找点网课加深巩固一下学习内容）（mdn的链接如下）【点开以后你会发现全是英文，不要担心，点击搜索框搜索你想要了解的东西就好】；MDN Web Docs (mozilla.org)https://developer.mozilla.org/zh-CN/
Vue：（官方）一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。（翻译成最简单的人话就是，最基本的就是，原来你需要写一个.html文件，一个.css文件，一个.js文件。现在可以全部写在一个.vue文件内）；（注意，安装Vue之前确保你已经安装了node.js。同时你需要注意，Vue对于node的版本是有要求的【截至24.03.04，Vue3要求“18.0 或更高版本的 Node.js”】，请下载符合要求的版本。node.js官网：Node.js (nodejs.org)）Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)https://cn.vuejs.org/
Vue Router：（官方）Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。。。。。。（以后再详细说）；Vue Router | The official Router for Vue.jsThe official Router for Vue.jshttps://router.vuejs.org/
VScode：文本编辑器，用来写代码；Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/
浏览器：用以测试代码；
图形编辑器（你可以暂时不需要它）：我推荐使用AI(是Adobe Illustrator，不是人工智能)或者XD来制作矢量图。
关于安装软件还有进行相关配置，推荐参考下方链接指引的文章，讲的非常的清楚（b站也有视频版的）http://t.csdnimg.cn/kh71phttp://t.csdnimg.cn/kh71p
在此期间，你也许会遇到各种各样的问题（报错等等），不要气馁，你可以在互联网的海洋之中找到解决的办法。（一定要学会利用几乎万能的互联网来解决你的问题！！！）

三、开始你的前端学习之路吧少年！

1、HTML、CSS基础学习

我们先来看看mdn是怎么简单描述HTML和CSS的：

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。

CSS（Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。一条 CSS 的样式定义包括属性和属性值，它们共同决定网页的外观。

官方讲的肯定比我好的多，所以你可以直接移步mdn看喽：开始学习 HTML - 学习 Web 开发 | MDN本文将从 HTML 最基础的部分讲起，对元素（Element）、属性（Attribute）以及可能涉及的一些重要术语进行介绍，并明确它们在 HTML 文档中所处的位置。本文还会讲解 HTML 元素和页面的组织方式，以及其他一些重要的基本语言特性。学习的过程中，我们也会使用 HTML 做一些好玩的事情。https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started

CSS 基础 - 学习 Web 开发 | MDNCSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。本节将介绍 CSS 的基础知识，并解答像这样的问题：怎样将文本设置为红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics

2、JavaScript

同样的，先看看mdn怎么说的：

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。

我想你已经意识到了，HTML与CSS并不是什么传统意义上的编程语言，JS才是！

我不做什么自己的叙述，请大家直接移步mdn学习JS喽：JavaScript 基础 - 学习 Web 开发 | MDNJavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。本文介绍了 JavaScript 的精彩之处和主要用途。https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

四、本文总结

我个人在学习前端时，过程是先学习HTML以及CSS，再是JS。但是我并不推荐各位按顺序死磕——把CSS和JS彻底学完后再向后推进。正确的做法是，在实践之中慢慢学会CSS和JS。CSS的用法很简单，主要是内容十分庞杂，正确的做法应当是一边用一边学，想要实现什么效果就去查，用的多了自然就会了。而JS作为脚本语言，可以去适量的刷些题。

总而言之——多动手！多动手！多动手！

祝愿各位可以愉快的开始自己的前端学习之路！

NANO140

关注

17
点赞
踩
47

收藏

觉得还不错? 一键收藏
1
评论
前端学习笔记1(开端)

我个人在学习前端时，过程是先学习HTML以及CSS，再是JS。但是我并不推荐各位按顺序死磕——把CSS和JS彻底学完后再向后推进。正确的做法是，在实践之中慢慢学会CSS和JS。CSS的用法很简单，主要是内容十分庞杂，正确的做法应当是一边用一边学，想要实现什么效果就去查，用的多了自然就会了。而JS作为脚本语言，可以去适量的刷些题。总而言之——多动手！多动手！多动手！祝愿各位可以愉快的开始自己的前端学习之路！
复制链接

扫一扫