編輯導語：産品經理在日常工(gōng)作中(zhōng)會接觸到多方面的同事，也會産生(shēng)比較多的交流，那除了接受需求以及判斷需求以外(wài)，更多的是與開(kāi)發小(xiǎo)哥“battle”；本文作者分(fēn)享了關于前端開(kāi)發工(gōng)程師的一(yī)些工(gōng)作日常，我(wǒ)(wǒ)們一(yī)起來了解一(yī)下(xià)。
今天要介紹的是産品經理的小(xiǎo)夥伴之一(yī)：前端開(kāi)發工(gōng)程師，雖然天天和他們打交道，但是想必大(dà)家都沒有好好的“關心”過他們，今天我(wǒ)(wǒ)們一(yī)起來看看天天接觸的前端工(gōng)程師到底在忙些什麽。
現在移動互聯網發展的這麽快，前端開(kāi)發領域也越來越廣，前端早已經告别了切圖崽的時代，在web端、移動端（安卓、IOS）、Watch、小(xiǎo)程序、公衆号開(kāi)發、混合app開(kāi)發都能看到前端開(kāi)發工(gōng)程師的影子。
從狹義上講，前端工(gōng)程師使用 HTML、CSS、JavaScript 等專業技能和工(gōng)具将産品UI設計稿實現成網站産品，涵蓋用戶PC端、移動端網頁，處理視覺和交互問題。
從廣義上來講，所有用戶終端産品與視覺和交互有關的部分(fēn)，都是前端工(gōng)程師的專業領域。
簡單的說，前端開(kāi)發工(gōng)程師日常工(gōng)作是創建Web頁面或移動頁面等前端界面呈現給用戶的過程，通過前端三大(dà)件HTML、CSS、JavaScript以及衍生(shēng)出來的各種技術、框架、解決方案，來實現互聯網産品的用戶界面交互 。
用戶看到的每一(yī)個網頁主要由三部分(fēn)組成：結構（ Structure） 、 表現（ Presentation） 和行爲（ Behavior）。
HTML —— 結構， 決定網頁的結構和内容（“是什麽”）；
CSS —— 表現（ 樣式） ， 設定網頁的表現樣式（“什麽樣子”）；
JavaScript —— 行爲， 控制網頁的行爲（“做什麽”）；
HTML、CSS、JavaScript是前端開(kāi)發中(zhōng)最基本也是最必須的三個技能；前端開(kāi)發中(zhōng)，在頁面的布局時， HTML将元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。接下(xià)來我(wǒ)(wǒ)們好好聊聊這三大(dà)件，知(zhī)己知(zhī)彼。
一(yī)、HTML是什麽？
可以把HTML結構想象成一(yī)個沒穿衣服的人。
HTML指超文本标記語言（HyperText Markup Language），“超文本”就是指頁面内可以包含圖片、鏈接，甚至音樂、程序等非文字元素；前端開(kāi)發利用HTML标簽（Tag）來标記（Markup）網頁中(zhōng)的文字。
上述代碼是一(yī)個最基礎HTML結構，一(yī)個網頁的結構往往包括“頭”和“主體(tǐ)”，頭部的内容使用header标簽标記，主要存放(fàng)一(yī)些網頁信息，例如網頁标題、内容摘要、關鍵詞等，頭部内容也是SEO優化的重要對象。
主體(tǐ)部分(fēn)用标簽body标簽标記，網頁的内容全部放(fàng)在body标簽下(xià)，其内部又(yòu)包含了很多代表不同含義的标簽（如下(xià)表所示，隻展示部分(fēn)常用的）。
這些形形色色的标簽就構成了頁面的内容，要注意的是整個網頁的内容都要放(fàng)在一(yī)個頂層标簽html标簽下(xià)。
例如：我(wǒ)(wǒ)們點擊某個鏈接，然後自動跳轉一(yī)個新的頁面，這過程都是a标簽在起作用；還有看到的圖片，就是img标簽承載圖片的數據源。
最後，告訴大(dà)家兩個查看HTML源碼的方法，好奇的夥伴可以去(qù)試試。
打開(kāi)浏覽器，鼠标在頁面上右擊，然後點擊“查看頁面源碼”；
打開(kāi)浏覽器，按 “F12” 鍵；
二、CSS是什麽？
可以把CSS想象成給一(yī)個沒穿衣服的人(HTML結構)化妝、穿衣服等，作用是讓它變得美美的 。
CSS 指層疊樣式表（Cascading Style Sheets），是一(yī)種将網頁内容與網頁樣式分(fēn)離(lí)的技術。
我(wǒ)(wǒ)們經常會對一(yī)個網站評價道：這網站頁面怎麽這麽亂、這網站看起來真大(dà)氣——這背後都是受CSS影響。
CSS可以做什麽？
1）CSS主要用來設計網頁的樣式，美化網頁；它不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化；比如一(yī)開(kāi)始文字顯示是紅色，我(wǒ)(wǒ)點擊某個按鈕後文字變黑色了。
2）你可以輕松地控制頁面的布局，CSS 能夠對網頁中(zhōng)元素位置的排版進行像素級精确控制，因此我(wǒ)(wǒ)們能看到各式各樣的布局風格。
3）在頁面制作時采用CSS技術，可以有效地對頁面的布局、字體(tǐ)、顔色、背景和其它效果實現更加精确的控制；例如通過文本屬性，可以改變文本的顔色、字符間距，對齊文本，裝飾文本，對文本進行縮進等等。
4）你可以将許多網頁的風格格式同時更新，不用再一(yī)頁一(yī)頁地更新了；你可以将站點上所有的網頁風格都使用一(yī)個CSS文件進行控制，隻要修改這個CSS文件中(zhōng)相應的行，那麽整個站點的所有頁面都會随之發生(shēng)變動。
5）CSS在幾乎所有的浏覽器上都可以使用。
三、JS是什麽？
JS能夠讓HTML結構這個人“跳舞”、“跑步”等動作，主要目的是讓“人”動起來。
JS（JavaScript）是一(yī)種屬于網絡的高級腳本語言，已經被廣泛用于Web應用開(kāi)發，常用來爲網頁添加各式各樣的動态功能，爲用戶提供更流暢美觀的浏覽效果；通常JavaScript腳本是通過嵌入在HTML中(zhōng)來實現自身的功能的。
js可以做什麽：
使網頁具有交互性，例如，banner輪播效果、手動Tab切換等效果；
可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。例如，表單中(zhōng)要你輸入電(diàn)子郵箱而你卻輸入一(yī)個手機号，那麽應該給你一(yī)個錯誤提醒。
還可以根據用戶的操作，動态的創建頁面。例如，發郵件時，添加附件操作。
設置cookie，cookie是存儲在浏覽器上的一(yī)些臨時信息，例如你浏覽過的網站地址，使用過的用戶名。
跨平台特性，在絕大(dà)多數浏覽器的支持下(xià)，可以在多種平台下(xià)運行（如Windows、Linux、Mac、Android、iOS等）。
……
JS代碼示例
前端三大(dà)件到此介紹完畢，不過現在有些其他語言的程序猿在讨論HTML、CSS、JS倒是算不算編程語言。
四、全棧工(gōng)程師
前端開(kāi)發工(gōng)程師在精進一(yī)步可以發展爲全棧工(gōng)程師，向T型人才或者π型人才發展。
全棧工(gōng)程師熟悉多種開(kāi)發語言，同時具備前端和後台開(kāi)發能力，既能做前端（需要熟悉前端三大(dà)件以及Vue等各種前端技術），又(yòu)能做後端（需要熟悉Node.js或Java或ASP.net或php或Go等），可以獨自完成一(yī)個産品的前、後台開(kāi)發工(gōng)作。
簡單了解下(xià)全棧工(gōng)程師的技術棧有哪些：
前端技術：HTML/HTML5、CSS/CSS3、LESS/Javascript、jQuery、RequireJS、AngularJS、Vue等；
後端技術：node.js或Java、php、.net等；
中(zhōng)間件：Nginx或Dubbo；
數據庫：MySQL或MongoDB；
代碼管理：git、svn；
構建工(gōng)具：webpack、gulp、Jenkins；
……
我(wǒ)(wǒ)們可以看到，對于全棧工(gōng)程師來說，要活到老，學到老，其中(zhōng)最重要的屬性，就是不同的思維方式和強大(dà)的學習能力。
