前端修炼の道 | 如何成为一名合格前端开发工程师？

上期回顾

在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师？ 相信这个问题是大家比较关心的。

前端开发工程师

如果大家在一些搜索引擎上搜索“前端开发工程师”需要具备什么技能？可以看到搜索结果中会出现许多诸如要掌握：
“HTML” “CSS” “JavaScript” “DOM” “Ajax” “React.js” “vue. js” “node.js” 等技术的信息。一些想入行的朋友看到要学习这么多东西,可能会望而却步，不敢去了解它。

其实前面所搜索到的结果，很多都是由前端开发的核心技术衍变而来的。不管前端开发技术怎么发展，万变不离其宗，它的核心都是 HTML、CSS 和 JavaScript 这三大技术。

只要把这些核心技术的知识体系掌握扎实， 就可以顺利地进行前端开发了，至于“React.js” “vue.js” “node.js”这些技术，不妨等基础稳妥扎实后，再慢慢地学习，毕竟很多“框架”或“类库”都是流行一时，没准正在看本书的你在学完本书后发现，有些技术早不流行了，而那些原生语言却依然有着强悍的生命力，仍然活跃在各类商业应用中。因此，从这个意义上来说，作为开发者掌握原生语言的开发技能才是重点。

在人类社会,语言是人与人之间用来沟通的方式

比如和英国人说话需要用英语，和俄罗斯人说话就得用俄语。在计算机世界，我们要与计算机进行信息的交流同样需要语言，这个语言称为计算机语言。

人类语言存在不同的类型，计算机语言也同样存在不同类型。针对不同的应用,我们需要使用不同的计算机语言, 比如针对服务端进行业务逻辑和数据的处理需要 Java、C#、C++ 等计算机语言，而针对在浏览器中展现网页以及实现用户与网页的交互等效果的应用，则需要使用 HTML、CSS、JavaScript 等计算机语言。

HTML 超文本标记语言：搭建网页“结构”

HTML(Hypertext Markup Language)

中文意思是超文本标记语言。为了方便记忆和理解,我们将 HTML 中的 3 个单词拆分开来,分别解释其中含义。
Hypertext(超文本)
指的是页面中的各种内容。在一个网页中,有文字、超链接、图片、音频、视频等, 这些内容共同构成了网站信息,这些信息以计算机语言的形式编写而成,因此称它们为“超文本”内容。

Markup(利润。在这里指标记或标签)
HTML 语言在大多情况下,使用一对标签“<></>”来 表示,其中“<>”为开始标签,“</>”为结束标签。标签的尖括号内放置着各种英文关键词,例如:“

</ div>”,它是一段 HTML 代码,用来表示一个“div”的标签对。值得注意的是 HTML 代码(标签)并不会 显示在浏览器中,能在网页中显示的是标签对中包含的文字,比如:“

我们是内容

”这段代码
如果希望在网页中放置一段文字,可以使用“

”这样的标签对。

例如： “

妙味课堂是国内知名的 IT 培训机构

”,它将会把“妙味课堂是国内知名的 IT
培训机构”作为一段文字放置在网页中。

又比如： “

”这个标签对代表着网页中的一个一级标题, 例如:“<h1 前端概要

”,它将会把“前端概要”设置为一级标题放置在网页中。可见,不同的标签 代表着网页上不同的内容。

一个 HTML 页面就是由不同的标签组合而成的。在本文后续内容中还会介绍更多标签类型。

Language(语言)

HTML 就是由各种各样的标签组成的语言,在这套语言体系内,描述着网页的“视频、 音乐、文字、图片”等内容。
HTML 从诞生到现在经历多个版本，依次是

• HTML2.0
• HTML3.2
• HTML4.0
• HTML4.01
• HTML5
  HTML5 相比于其他版本,增加了许多语义化标签,如 header、nav 等文档结构标签,音频和视频以及 canvas 画布等标签。

CSS 层叠样式表：给网页添加“样式”

CSS(Cascading Style Sheets)
中文意思是层叠样式表,以下简称为“样式表”。样式表的作用就是给网 页加样式。使用 HTML 标签搭建页面结构时,标签使用的都是自己本身在浏览器中的“模样”,即默认样式。 这些默认样式大部分情况下都毫无美感。而 CSS 样式就相当于“化妆师”,把页面上的内容“梳妆打扮”一番, 然后将美好的状态呈现在用户面前。

例如：
图 1-8 就是浏览器默认显示的样式,

图 1-9 则是使用 CSS 稍加修 饰以后的样式。

图 1-8 默认样式输出结果 图 1-9 CSS 样式输出结果
从图 1-9 中可以看到,使用 CSS 样式可以修改页面内容的对齐方式、颜色以及背景颜色等样式。两图相比较,图 1-9 更加丰富多彩,更能突出重点,也更吸引人。

JavaScript:让网页响应某种“行为”

JavaScript(简称 JS)
一种脚本式语言，它可以让网页响应某些“行为”。例如用户在网页中用鼠标单击某个按钮以后，如果他希望浏览器能够切换下一张图片，这样的想法就可以通过 JS 来实现。在图 1-10 中, 用户可以通过单击图片左、右两边的 < 和 > 箭头来实现图片的切换。

又或者我们希望在搜索框中输入部分内容时能在弹出的下拉框中显示出所有相关的数据供用户选择,如 图 1-11 所示。这种根据部分内容弹出下拉框并显示出所有相关数据的效果使用 JS 将很容易实现。

图 1-10 单击图片两边向左和向右箭头切换图片

图 1-11 根据部分内容实现相关数据的下拉显示

综上所述

我们可以看到：HTML、CSS 和 JavaScript 各司其职，分工合作，共同构建 Web 页面。

• HTML 用于搭建页面结构，就像人的骨骼，有了骨骼才能支撑起身体；
• CSS 样式表相当于“化妆师”，让页面内容以美好的状态呈现在用户面前，这就如同每个人都有不同的穿衣风格一样；
• JS 能让页面具备响应各种“行为”的能力，产生各种交互效果，使页面真正的“鲜活”起来，就如同让一个原本静止的模特开始活动，他可以微笑、可以表演。

本文连载更新中，敬请关注后续文章发表~

订阅号ID：Miaovclass

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；