本篇文章将随着我个人知识的更新而更新~
前端学习路线
前端基础
1.HTML
HTML语言是用来编写网页骨架的一种语言。
HTML是文本标记语言,门槛比较低,但知识点杂。
学习HTML的主要目标是:
- 理解HTML的语法和编写规则,对网页是如何形成的有大致的了解
- 掌握常见的标签,手敲感受
- 掌握表单及表单验证
学习HTML的目的是学会开发网页,而不是记住所有标签名、属性名等
建议过一遍知识点(可以找线上教程),然后掌握重点即可。
表单验证课程:BV16K4y1Z7Gb
HTML标签参考手册:w3school
2.CSS
CSS是用来设置HTML元素样式的一种语言
个人在写网页时的感受是 HTML的标签中虽然设置了宽、高、颜色等属性来调整元素的样式,但是我一般不会用,而是只用HTML标签来搭建网站的架子,具体的元素样式都由CSS来设置
CSS中的内容相比HTML更加得杂且多
学习CSS的主要目标是:
- 了解CSS语言的语法规则,掌握常见的选择器
- 学会使用CSS来进行网页的页面布局!
CSS中关于样式的具体设置不是记忆的重点,比如说CSS可以调整字体的大小、颜色、粗细等等,只需要简单的了解一下,在真正要用的时候再去搜索具体该怎么用就好了。
CSS比较全面的基础教程:BV1Bx411u7cS
CSS3进阶教程,侧重于实践,需要一定的基础:BV1et411q74F
CSS参考手册:w3school
3.JavaScript
JavaScript 和HTML、CSS不同,是一种编程语言,是浏览器端的脚本语言。
用HTML和CSS写出来的网站是“静态”的,利用 JavaScript可以实现一些动态效果。
JS 快速入门时学习的主要目标
- 掌握基础语法(变量声明、基本数据类型、流程控制语法等)
- 了解 JS 中 函数、对象的用法
- 学习 Web API (即DOM 和 BOM)
JS 相比HTML、CSS难很多,相比其它编程语言则属于易学难精的类型 ,即便是初学者(比如我)在没有完全理解掌握这门语言的情况下就已经可以用它来做项目了。
入门时的重点是学习HTML DOM,学完就能做出很多页面上的动态效果
PS:如果完全没有学过其它编程语言建议还是先过一遍语法
JS 视频教程,讲得很细而且有很多小案例,适合入门: BV1Sy4y1C7ha
ES6电子书教程:Es6入门教程
4.实践
在掌握HTML + CSS + JS 后 就已经能实现非常多的页面了
毕竟早年没那么多框架和技术的时候,程序员就是用这几门语言来开发网页的~
我自己收集了一些纯前端的小案例:纯前端项目
最新版本
HTML的最新版本为 HTML5,新增了绘图标签<canvas>
、音频播放标签audio
等新标签,该网站可以测试浏览器对HTML5的支持情况:
CSS的最新版本为CSS3,包含了很多较为重要且实用的样式,各个浏览器对其的支持度已经比较好了。
JS的历史:
-
JS目前共有 ES1~ES6 共计六个大版本
-
ES1、ES2、ES3分别于1997、1998、1999年发布
-
ES3是JavaScript第一个在业界被广泛支持的版本,入门所学的语法知识就是ES3中的内容
-
ES4 对ES3 的改动过于激烈,因此没有被通过
-
ES5 中新增了
use strict
、Array对象和Object对象的一些方法 等等 -
ES6 中新增了let、const等关键字,Class,迭代器,Map、Set 以及大量的API等等等。ES6 继承了曾经的ES4 中的许多内容,且向下版本兼容。
ES6目前只被部分支持
Can I Use网站可以查询某个HTML5标签、某个CSS3样式甚至某个JS语法在浏览器中的支持情况。如:
绿色表示支持,红色表示不支持。表格第一行为是各个浏览器的名称,后面的每一行对应浏览器的一个版本,越下面的为越新的版本。上图表面怪异盒模型在所有的较新版本浏览器中都已经被支持了。
HTML、CSS、JS 新版本中的很多特性都已经被浏览器接纳、使用。
但其中的很多内容在B站的课程上没有被提到过,可能是开发时使用的较少?
所以我对这些新版本的态度是不全学,而是遇到了再去查即可