摘要：上期回顾在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师相信这个问题是大家比较关心的。
上期回顾
在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师？ 相信这个问题是大家比较关心的。
前端开发工程师
如果大家在一些搜索引擎上搜索“前端开发工程师”需要具备什么技能？可以看到搜索结果中会出现许多诸如要掌握：
“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 语言在大多情况下,使用一对标签“<>”来 表示,其中“<>”为开始标签,“”为结束标签。标签的尖括号内放置着各种英文关键词,例如:“
妙味课堂是国内知名的 IT 培训机构
”,它将会把“妙味课堂是国内知名的 IT 培训机构”作为一段文字放置在网页中。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
关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99037.html
摘要：面对这些较高的要求，前端在开发环节中的作用也变得越来越重要因而近几年来前端工程师备受青睐一般水平的前端工程师平均年薪可达万元资深前端工程师年薪高达万元。这种用户体验的细节问题是否处理妥当是判断一名前端工程师是否优秀的因素。 本文是为了给那些想要了解前端开发是什么，或者刚刚打算开始学习前端的朋友们准备，希望可以帮助准备入行的你;showImg(https://segmentfault.c...
摘要：番茄工作法简约而不简单，本书亦然。在番茄工作法一个个短短的分钟内，你收获的不仅仅是效率，还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的，不开放全文转载许可，谢谢！ showImg(/img/remote/1460000007319503?w=728&h=792); 广而告之时间：我的新书《Android 高...
摘要：番茄工作法简约而不简单，本书亦然。在番茄工作法一个个短短的分钟内，你收获的不仅仅是效率，还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的，不开放全文转载许可，谢谢！ showImg(https://segmentfault.com/img/remote/1460000007319503?w=728&h=792...
摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...
摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...
阅读 6355·2021-11-16 11:39
阅读 1737·2021-09-29 09:35
阅读 2504·2021-09-22 15:25
阅读 1855·2021-08-23 09:43
阅读 1858·2019-08-30 15:54
阅读 3192·2019-08-30 15:53
阅读 2279·2019-08-30 13:50
阅读 2266·2019-08-30 11:24
