零、准备起航

68 阅读5分钟

什么是前端

我对前端的理解是:在电子设备的世界里,目之所及,皆为前端。

大概是因为很多人也这么理解前端,所以大概在2020年左右出现了一个概念,叫作 “大前端”,这个概念就囊括了整个前端世界,包括传统的Web前端、手机应用前端 (Android/iOS 应用、H5、小程序)以及穿戴设备的前端等等。

传统的Web前端里,核心三把刷子就是 HTMLCSSJavaScript

本专的内容主要是关于 Web 前端的学习,所以将主要包括的是 HTML、CSS 和 JavaScript,其他的前端技术仅仅提供入门的知识。

HTML

HTML 即超文本标记语言 (HyperText Markup Language), HTML 共有几十个标签,随着 HTML 的发展,HTML 标签数量也在变化,有的标签被废弃,也有新的标签加进来。

关于 HTML 的详细介绍,可以看一下 MDN 上的讲解。简单来说就是,我们可以通过 HTML 标签,来展示我们所期望展示的内容,每个标签都有自己的特性。

比如 img 标签是用来在界面上展示一个图片的。

比如 video 标签是用来展示一个视频的。

比如 audio 标签是用来呈现和播放音频的。

比如 input 标签是用来呈现输入框的,根据不同的 type 属性,呈现出不同的作用和样子。

比如 ul 标签和 li 标签用来组合呈现列表。

比如 div 标签就是单纯的用来承载元素的,且 div 标签所代表的元素是一个块级元素,它会独占一行;而 span 标签虽然也是单纯用来承载元素的,但 span 所代表的元素是一个行内元素,它会和相邻的行内元素放在同一行里,根据不同情况来换行。

虽然我们想呈现的内容呈现出来了,但是它并没有那么美观,人们期望这些内容能更美观一些,最好是能按自己的想法来呈现,于是就出现了用来对这些内容的样子进行修改的技术:CSS

CSS

CSS 即层叠样式表 (Cascading Style Sheets),CSS 经历了 CSS1、CSS2和CSS3的发展,现在已经有几百个属性了,且还在继续发展着。

关于 CSS 的详细介绍,可以看一下 MDN 上的讲解。

使用 CSS ,我们想修改字体,可以用 font/font-family/font-size 等属性;我们想修改布局,可以用 flex/grid,甚至是通过定位 (position)、浮动 (float) 来控制元素的位置,进而实现期望的布局……

CSS 提供了非常强大的样式能力,你所期望的一切样式几乎都可以用它来实现,不管是静态的样式,还是动态的样式 (transition/animation),都可以。

由于 CSS 发展的速度非常快,且起初时由于没有标准和规范,导致各个浏览器厂商对一些特有的 CSS 属性加了自己特有的前缀,而这里面的很多属性都被后来的 CSS 标准收纳了。对于开发者而言,自己去写代码来实现样式在各个浏览器里的兼容是非常痛苦的,于是有志之士在开源社区发布了 PostCSS 这个利器来做这件事,PostCSS 极大地解放了开发者的生产力,有力地推动了 CSS 的发展。

随着开发者们对 CSS 的使用越来越多,他们觉得 CSS 的一些写法很繁琐,于是很多人开始了新的探索,就出现了 LessSASS/SCSSstylus 这样的 CSS 预处理语言,而且这些预处理语言的一些特性正在逐渐成为正式的 CSS 标准。

有了 CSS 之后,Web 网页终于有了非常丰富的表现力和非常精美的样子,但人们还期望和网页进行互动,要是它能跟根据我所期望的来执行一些动作,就最好不过了,浏览器把这件事交给了 JavaScript 来做。

JavaScript

JavaScript 是一门有故事的语言。1995年,JavaScript 之父 Brendan Eich 仅用了2周的时间就把它的核心写了出来。虽然编程语言写出来了,但给它起什么名字呢?那时候是 Java 热度很高的时候,这门语言也借鉴参考了 Java 的一些特性,而且这门语言是脚本语言,大概是结合了这些原因,Brendan Eich 就把它命名为了 JavaScript。这个名字在当时既蹭到了 Java 的热度,又表明了自己与 Java 没啥关系,还表达了自己的定位 (这波操作属实🐂🍺)。

关于 JavaScript 的详细介绍,可以看一下 MDN 上的讲解。

JavaScript 的内容非常非常多,它是 Web 前端交互的核心,所以也是学习的核心后续的所有文章将主要介绍 ECMAScript2015 及以后版本的 JavaScript。

总结

本文简单介绍了Web前端的三大技术:HTML、CSS和JavaScript,并提供了这三大技术的介绍文档。在正式开始学习之前,了解并熟悉这三大技术的基本概念,可以让自己更好地进入后面的学习。

推荐资源