编辑导语:产品经理在日常工作中会接触到很多同事，也会有更多的交流。除了接受和判断需求，他们更可能与开发兄弟“战斗”；笔者分享一些前端开发工程师的日常工作。让我们来看看。
今天我要介绍的是产品经理的小伙伴之一:前端开发工程师。虽然我们每天都和他们打交道，但我觉得大家都没有“关心”过他们。今天我们就来看看我们每天遇到的前端工程师到底在忙些什么。
现在移动互联网发展这么快，前端开发领域越来越广。前端早就告别了“切图”的时代。web、移动、手表、小程序、微信官方账号开发、混合app开发都能看到前端开发工程师的身影。
狭义来说，前端工程师使用的是HTML、CSS、Javascript等专业技能和工具。将产品UI设计稿实现为网站产品，覆盖用户的PC和移动网页，处理视觉和交互问题。
广义来说，用户终端产品中所有与视觉和交互相关的部分，都是前端工程师的专业领域。
简单来说，前端开发工程师的日常工作就是创建网页或移动页面等前端界面并呈现给用户的过程。通过前端的HTML、CSS、Javascript三块以及各种衍生的技术、框架和解决方案，实现互联网产品的用户界面交互。
用户看到的每一个网页主要由三部分组成:结构、性能和行为。
HTML-structure，决定网页的结构和内容；CSS-presentation，设置网页的呈现风格；Javascript-behavior，控制网页的行为；HTML、CSS、Javascript是前端开发中最基础、最必要的技能；在前端开发中，页面布局时，HTML定义元素，CSS定位显示的元素，然后通过Javascript实现相应的效果和交互。接下来就说说这三件事，知己知彼。
1.什么是HTML？
把HTML结构想象成一个裸体的人。
超文本标记语言。“超文本”是指一个页面可以包含图片、链接，甚至音乐、程序等非文本元素；前端开发使用HTML标签来标记网页中的文本。
上面的代码是最基本的HTML结构。网页的结构通常包括“标题”和“正文”。表头的内容用header标签进行标记，主要存储一些网页信息，如网页标题、内容摘要、关键词等。页眉内容也是SEO优化的重要对象。
主体的一部分标有标签body标签，网页的所有内容都放在body标签下，body标签包含了很多代表不同含义的标签。
这些不同的标签构成了页面的内容。需要注意的是，整个网页的内容要放在一个顶级标签html标签下。
例如：我们点击某个链接，然后自动跳转一个新的页面，这过程都是a标签在起作用；还有看到的图片，就是img标签承载图片的数据源。比如我们点击一个链接，就自动跳转到一个新的页面，A标签就在这个过程中发挥了作用；还有图片可以看，就是img标签携带图片的数据源。
最后告诉你两种查看HTML源代码的方法。好奇的小伙伴可以试试。
打开浏览器，在页面上点击鼠标右键，然后点击“查看页面源代码”；打开浏览器并按“F12”键；
二、什么是CSS？
把CSS想象成给一个裸体的人化妆穿衣，它的作用就是让它变美。
CSS指的是层叠样式表，是一种将网页内容和网页样式分离的技术。
我们经常评论一个网站:为什么这个网站的页面这么乱，这个网站看起来真的很大气——这些都是受到CSS的影响。
CSS能做什么？
1)CSS主要用于设计网页的风格，美化网页；它不仅可以静态地装饰网页，还可以用各种脚本语言动态地格式化网页的元素。例如，起初，文本显示为红色，当我单击一个按钮时，文本会变成黑色。
2)可以轻松控制页面的布局。CSS可以在像素级别精确控制网页中元素的布局，所以我们可以看到各种各样的布局风格。
3)在页面制作中使用CSS技术，可以更准确的有效控制页面的布局、字体、颜色、背景等效果；例如，通过文本属性，您可以更改颜色、字符间距、对齐文本、修饰文本、缩进文本等等。
4)可以同时更新多个网页的样式和格式，而不是逐页更新；你可以使用一个CSS文件来控制网站上所有的网页样式。只需修改这个CSS文件中相应的行，整个网站的所有页面都会随之改变。
5)CSS几乎可以在所有浏览器中使用。
CSS的代码示例
3.JS是什么？
JS可以让HTML构造这个人“跳舞”、“跑步”等动作。主要目的是让“人”动起来。
JS是一种属于网络的高级脚本语言，在Web应用开发中得到了广泛的应用，经常被用来给网页添加各种动态功能，为用户提供更加流畅美观的浏览效果。通常，Javascript脚本嵌入在HTML中，实现自己的功能。
js能做什么:
让网页具有交互性，比如横幅轮播效果，手动切换标签等。您可以处理表单，检查用户的输入，并提供及时的反馈以节省用户的时间。例如，如果表单要求您输入您的电子邮件地址，但您输入了手机号码，您应该会得到一个错误警告。还可以根据用户的操作动态创建页面。比如发邮件的时候，加个附件。设置cookies。cookies是存储在浏览器中的一些临时信息，例如您访问过的网站的地址和您使用过的用户名。大多数浏览器支持的跨平台特性可以在多个平台上运行。……
JS代码示例
三个前端的介绍到此结束，但是现在其他语言的一些程在讨论HTML，CSS，JS是不是编程语言。
四。全栈工程师
前端开发工程师可以进一步发展为全栈工程师，发展为T型人才或者π型人才。
全栈工程师熟悉多种开发语言，具备前端和后端开发能力。他们可以是前端也可以是后端，可以自己完成一个产品的前端和后端开发。
让我们简单看一下全栈工程师的技术栈:
前端技术:HTML/HTML5、CSS/CSS3、LESS/Javascript、jQuery、RequireJS、AngularJS、Vue等。后端技术:node.js或Java、php等。；中间件:Nginx或Dubbo；数据库:MySQL或MongoDB；代码管理:git、svn；工具:webpack、gulp、Jenkins；......我们可以看到，对于全栈工程师来说，要生活，要学习，最重要的属性就是思维方式不同，学习能力强。
最后，请重新认识一下身边的素颜前端朋友！你也可以把这篇文章分享给他，多么相似啊，哈哈。
作者:三刀，电子商务PM；微信官方账号:产品秘籍
本文由@三刀原创发布。大家都是产品经理，未经作者允许，禁止转载。
题目来自Unsplash，基于CC0协议。
