1.2　前端开发技术

在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师？相信这个问题是大家比较关心的。如果大家在一些搜索引擎上搜索前端开发工程师需要具备什么技能，可以看到搜索结果中会出现许多诸如要掌握“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、CSS、JavaScript。此外，还需要熟悉这些技术在不同浏览器上的兼容处理、网页的性能优化、SEO（搜索引擎优化）、工程化模块化开发，以及一些制图软件如Photoshop，开发辅助工具，如Google Chrome的开发者调试工具等。

在本节将介绍HTML、CSS、JavaScript，其他技术和软件及工具的介绍请参见本书后续相关章节和本系列其他图书。

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

HTML（Hypertext Markup Language），中文意思是超文本标记语言。为了方便记忆和理解，我们将HTML中的3个单词拆分开来，分别解释其中含义。

Hypertext（超文本）指的是页面中的各种内容。在一个网页中，有文字、超链接、图片、音频、视频等，这些内容共同构成了网站信息，这些信息以计算机语言的形式编写而成，因此称它们为“超文本”内容。

Markup（利润、盈利。在这里指标记或标签），HTML语言在大多情况下，使用一对标签“<></>”来表示，其中“<>”为开始标签，“</>”为结束标签。标签的尖括号内放置着各种英文关键词，例如：“<div></div>”，它是一段HTML代码，用来表示一个“div”的标签对。值得注意的是HTML代码（标签）并不会显示在浏览器中，能在网页中显示的是标签对中包含的文字，比如：“<div>我们是内容</div>”这段代码在网页上能看到的就只有“我们是内容”这几个字，那些包含文字的标签是不可见的。标签的作用是组织HTML页面内容，让内容之间有一种结构关系。如果希望在网页中放置一段文字，可以使用“<p></p>”这样的标签对。例如“<p>妙味课堂是国内知名的IT培训机构</p>”，它将会把“妙味课堂是国内知名的IT培训机构”作为一段文字放置在网页中。又比如“<h1></h1>”这个标签对代表着网页中的一个一级标题，例如：“<h1>前端概要</h1>”，它将会把“前端概要”设置为一级标题放置在网页中。可见，不同的标签代表着网页上不同的内容。一个HTML页面就是由不同的标签组合而成的。在本书后续章节中还会介绍更多标签类型。

Language（语言），HTML就是由各种各样的标签组成的语言，在这套语言体系内，描述着网页的“视频、音乐、文字、图片”等内容。

HTML从诞生到现在经历多个版本，依次是HTML2.0、HTML3.2、HTML4.0、HTML4.01、HTML5这几个版本，另外，在HTML4.01发展到HTML5之前又出现了XHTML1.0和XHTML2.0（未推行应用）两个版本。HTML5相比于其他版本，增加了许多语义化标签，如header、nav等文档结构标签，音频和视频以及canvas画布等标签。

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

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

图1-8　默认样式输出结果

图1-9　CSS样式输出结果

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

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

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

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

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

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

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