什麼是web前端

前端簡介

Web前端開發工程師是一個很新的職業，在國内乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。随着人們對使用者體驗的要求越來越高，前端開發的技術難度越來越大，Web前端開發工程師這一職業終于從設計和制作不分的局面中獨立出來。

早期的前端其實就是Table布局，後來發展到所謂的Div + CSS網站重構，再到現在的讓人眼花缭亂的各種各樣的新技術，Web前端技術發展是非常快速的，是以選擇了前端這個行業就意味着不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構：

什麼是web前端

前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC架構，即HTML作為資訊模型（Model），CSS控制樣式（View），JavaScript負責排程資料和實作某種展現邏輯（Controller）。

什麼是web前端

HTML

1. 标簽的分類

1. 标簽表示一個元素

2. 按性質劃分: Block-Level和Inline-Level

3. 按語義劃分:

Headings: h1, h2, h3, h4, h5, h6
Paragraphs: p
Text Formatting: em, strong, sub, del, ins, small
Lists: ul, li, ol, dl, dt, dd
Tables: table, thead, tbody, tr, th, td
Forms and Input: form, input, select, textarea
Others: div, span, a, img,
HTML5: header, footer, article, section

2. XHTML

XHTML 于2000年的1月26日成為 W3C 标準。W3C 将 XHTML 定義為最新的HTML版本。XHTML 将逐漸取代 HTML。XHTML是通過把 HTML 和 XML 各自的長處加以結合形成的。XHTML 文法規則如下：

屬性名和标簽名稱必須小寫
屬性值必須加引号
屬性不能簡寫
用 Id 屬性代替 name 屬性
XHTML 元素必須被正确地嵌套
XHTML 元素必須被關閉

3. 标簽的語義化

為表達語義而标記文檔，而不是為了樣式，結構良好的文檔可以向浏覽器傳達盡可能多的語義，不論是浏覽器位于掌上電腦還是時髦的桌面圖形浏覽器。結構良好的文檔都能向使用者傳達可視化的語義，即使是在老的浏覽器，或是在被使用者關閉了 CSS 的現代浏覽器中。同時結構良好的HTML代碼也有助于搜尋引擎索引你的網站。

不要使用table布局，table是用來表格顯示的。
不要到處濫用div标簽，div是用來分塊用的。
不要使用樣式标簽，如font, center, big, small, b, i，樣式可以用CSS來控制，b和i可以用strong和em來代替。
不要使用換行标簽<br />和空格來控制樣式，請用CSS。
盡量不要使用内聯CSS

CSS

1. CSS基礎知識

層疊和繼承
優先級
盒模型
定位
浮動

2. CSS進階

CSS Sprite
浏覽器相容性
IE HasLayout和Block Format Content
CSS Frameworks
CSS3
CSS性能優化
LESS and SASS

CSS Sprite

CSS Sprite主要用于前端性能優化的一種技術，原理是通過将多張背景圖檔合成在一張圖檔上進而減少HTTP請求，加快載入速度。

浏覽器相容性

絕大部分情況下我們需要考慮浏覽器的相容性，目前正在使用的浏覽器版本非常多，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。

IE HasLayout和Block Format Content

IE HasLayout是一個 Internet Explorer for Windows的私有概念，它決定了一個元素如何顯示以及限制其包含的内容、如何與其他元素互動和建立聯系、如何響應和傳遞應用程式事件、使用者事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則預設就具有”layout”。目前隻有IE6和IE7有這個機率。BFC是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其内容進行定位，以及與其他元素的關系和互相作用。這個其實和浏覽器的相容性有關，因為絕大部分的相容性問題都是它們引起的。參考：CSS BFC和IE Haslayout介紹

CSS Framework

CSS架構是一系列CSS檔案的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式、通用規則等代碼塊,用于簡化web前端開發的工作，提高工作效率。目前常見架構有：

960 Grid System
Blueprint CSS
Bluetrip
Minimum Page

還是一個比較出名和特殊的架構是Twitter的Bootstrap。Bootstrap是快速開發Web應用程式的前端工具包。它是一個CSS和HTML的集合，它使用了最新的浏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基于Less開發的。不支援IE6，在IE7和IE8裡效果也不咋地。

CSS3

雖然CSS3還沒有正式成為标準，但是包括IE9+, chrome, Firefox等現代浏覽器都支援CSS3。CSS提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能有：

圓角
多背景
@font-face
動畫與漸變
漸變色
Box陰影
RGBa-加入透明色
文字陰影

CSS性能優化

CSS 代碼是控制頁面顯示樣式與效果的最直接“工具”，但是在性能調優時他們通常被 Web 開發工程師所忽略，而事實上不規範的 CSS 會對頁面渲染的效率有嚴重影響，尤其是對于結構複雜的 Web 2.0 頁面，這種影響更是不可磨滅。是以，寫出規範的、高性能的 CSS 代碼會極大的提高應用程式的效率。參考CSS性能優化探讨

LESS和SASS

LESS和SASS都是 CSS 預處理器，用來為 CSS 增加一些程式設計的的特性，無需考慮浏覽器的相容性問題，例如你可以在 CSS 中使用變量、簡單的程式邏輯、函數等等在程式設計語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，适應性更強，代碼更直覺等諸多好處。

SASS基于Ruby開發。LESS既可以在用戶端運作，也可以借助Node.js或者Rhino在服務端運作。

JavaScript

1. JavaScript基礎知識

資料類型
變量
表達式與運算符
控制語句
函數
異常
OO
事件
BOM
閉包

2. JavaScript進階

DOM
JSON
AJAX
JavaScript Frameworks
HTML5
前端模闆
前端MVC
子產品化開發
JavaScript單元測試
JavaScript設計模式
NodeJS
ES5

DOM

DOM即文檔對象模型，HTML DOM 定義了通路和操作HTML文檔的标準方法。幾乎所有的現代浏覽器都能很好的支援DOM了。

JSON

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，易于人閱讀和編寫，同時也易于機器解析和生成。是目前事實上資料交換的标準格式，幾乎所有語言都支援JSON，比XML強太多了。

AJAX

AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX并非縮寫詞，而是由Jesse James Gaiiett創造的名詞，由Google發揚光大。用于建立更好更快以及互動性更強的 Web 應用程式的技術。

JavaScript Frameworks

JavaScript Frameworks可以極大簡化我們JavaScript程式設計的工作量，它主要提供了以下幾個主要功能： DOM操作，跨浏覽器相容性，以及程式架構。當然像jQuery它本身其實并不是一個架構，它是一個庫(lib)。目前主流的架構或庫有如下幾個：

jQuery
YUI
DOJO
Mootoolos
ExtJS
Prototype

以上都是一些重量級的架構或者庫，還是小巧的庫也是強烈推薦的，比如Underscore

HTML5

HTML5同CSS3類似，即雖然沒有成為标準，但是主流的浏覽器都支援了。HTML5不是HMTL，雖然也提供了一些新标簽，但是它的主要用途還是JavaScript。HTML5主要提供以下功能：

本地音頻視訊播放
Canvas/SVG
地理資訊
硬體加速
本地運作
本地存儲
從桌面拖放檔案到浏覽器上傳
語義化标簽，Form表單

前端模闆

前端模闆主要是為了解決複雜的資料拼接問題，可以将模闆語言轉換化為HTML結構，可以大大簡化工作量，同時代碼的可維護性得到很大的提高。目前比較主流前端模闆有：

MustCache
JsRender

前端MVC

Web應用的功能越來越強，Javascript代碼也越來越多，大量的JS代碼要以何種架構來組織就成了一個亟待解決的問題，于是就有人把傳統的MVC架構移植到前端來解決這些問題。目前主流前端MVC架構主要有以下這些：

Backbone.js
Spine
KnockoutJS
YUI
Agility.js
Ember.js
Batman.js
AngularJS(Google)
Dojo

TodoMVC用上面所有的MVC架構寫了同一個示例代碼“Todo List”，是個學習對比MVC架構的好地方。

子產品化開發

其實作在JavaScript子產品化是個很熱門的東西了，主要特點是“子產品化開發，按需加載“。這其中CommonJS組織定義了AMD的規範用來規範浏覽器端的子產品定義。RequireJS和SeaJS是實作了AMD的兩個優秀的架構。詳見：http://www.weakweb.com/articles/341.html

JavaScript單元測試

但是随着單元測試的普及，尤其是靈活開發的推動，湧現了許多優秀的JavaScript單元測試架構，見詳細清單。所有的這些架構基本上都能對Javascript代碼進行很好的測試，當然UI部分的代碼測試一樣比較麻煩，但是我們可以通過精心構造我們的測試代碼來測試部分UI代碼。主流的測試架構如下：

QUnit
Jasmine
JsTestDriver

目前jQuery的所有代碼都是通過QUnit進行測試的，并且将測試代碼放在Github上了，大家感興趣可以參考一下。詳見：JavaScript單元測試架構介紹

JavaScript設計模式

好多設計模式是可以應用于JavaScript的，比如經常用到的事件處理的觀察者模式，是以設計模式是提升編碼層次的必學技術。

NodeJS

NodeJS現在是比較火熱的，其最大的貢獻就是把JavaScript移植到伺服器端了，這樣前端和後端就可以使用同樣的技術，友善統一開發。而且NodeJS是非阻塞調用的，在特定領域性能是非常強勁的。而且這是前端開發人員進軍背景開發的好機會，進而前後端統一開發，但又不用去學習其它背景開發語言。

ES5

ES5就是ECMAScript 5，也就是最新的JavaScript規範，對之前的JavaScript作了很多改進，增加了好多新的特性，比如JSON，而且現代主流浏覽器都開始支援ES5了，還是非常有必要學習一下的。

Others

下面是一些和HTML, CSS, JavaScript沒有直接關系，但是對于前端開發同樣非常重要的一些技術。

Http1.1
Web移動開發
前端安全
跨域處理
調試工具
SEO
A/B test
可用性/可通路性
前端流程/部署
正規表達式
編輯器
浏覽器插件開發
浏覽器原理

Http1.1

HTTP對于前端開發來說還是很重要的，比如最簡單的GET，POST方式，Request/Response 頭部，狀态碼等。

Web移動開發

現在移動開發非常非常流行了，而開發方式一般是native的方式或者Web方式，作為前端開發人員來說自然是去學習Web移動開發了。PhoneGap是必學的，前端層面的架構如jQueryMobile, Sencha Touch, jQTouch等都是不錯的選擇。

前端安全

随着前端技術的發展,安全問題已經從伺服器悄然來到了每一個使用者的的面前，盜取使用者資料, 制造惡意的可以自我複制的蠕蟲代碼,讓病毒在使用者間傳播,使伺服器當掉. 更有甚者可能會在使用者不知覺得情況下,讓使用者成為攻擊者,這絕對不是駭人聽聞。富用戶端的應用越來越廣，前端的安全問題也随之增多。常見的攻擊方法有：

XSS，跨站腳本攻擊(Cross Site Script)。它指的是惡意攻擊者往Web頁面裡插入惡意html代碼，當使用者浏覽該頁之時，嵌入的惡意html代碼會被執行，進而達到惡意使用者的特殊目的。
CSRF(Cross Site Request Forgery)，跨站點僞造請求。顧名思義就是通過僞造連接配接請求在使用者不知情的情況下，讓使用者以自己的身份來完成攻擊者需要達到的一些目的。
cookie劫持，通過擷取頁面的權限，在頁面中寫一個簡單的到惡意站點的請求，并攜帶使用者的cookie 擷取cookie後通過cookie 就可以直以被盜使用者的身份登入站點。

跨域處理

同源政策規定跨域之間的腳本是隔離的，一個域的腳本不能通路和操作另外一個域的絕大部分屬性和方法。所謂的跨域處理就是處于不用域之間的腳步互相調用，目前有很多方法來處理它。

調試工具

前端的調試工具很多，比如Firebug，Webkit核心的web inspector, IE的iedeveloper。HTTP相關的fiddler, httpwatch等，還有格式化代碼的jsbeatutifier，它有助于閱讀壓縮處理過的JavaScript代碼。IETester可以模拟所有的IE版本，是調試IE相容性的好工具。

SEO

前端開發人員很多時候還是需要了解搜尋引擎優化的。

A/B test

A / B測試的核心就是：确定兩個元素或版本（A和B）哪個版本更好，你需要同時實驗兩個版本。最後，選擇最好的版本使用。

可用性/可通路性

可用性指的是：産品是否容易上手，使用者能否完成任務，效率如何，以及這過程中使用者的主觀感受可好，是從使用者的角度來看産品的品質。可用性好意味着産品品質高，是企業的核心競争力。

可通路性：上網使用者中那些視力受損的人，通過螢幕閱讀器使用鍵盤指令将網頁的内容讀給他們聽。以語義化的HTML（結構和表現相分離的HTML）編寫的網頁檔案，就可以讓此類使用者更容易導航，且網頁檔案中的重要資訊也更有可能被這些使用者找到。

可以通過逐漸強化你的網站功能，同時對支援性進行測試。運用“漸進增強”和“平穩退化”原則開發網站。

正規表達式

估計絕大部分的程式設計語言都會用到它，當處理字元串時可以極大的簡化你的工作。必學啊。

編輯器

人人都有自己喜歡的編輯器，從前端的角度看，Eclipse + Aptana, Notepad++, VIM都是不錯的選擇。我個人比較喜歡用Notepad++,簡潔，快。

前端流程/部署

目前端項目比較複雜時，我們就應該考慮引入自動建構，自動化部署等技術了。可以使用JSLint來對JavaScript進行文法檢查，用CSSLint或CSS Validator檢查CSS文法，用JSMin或YUI Compressor對JavaScript代碼進行壓縮，可以使用JSDoc/YUIdoc進行文檔自動化生成，使用Jasmine/JsTestDriver進行自動化單元測試，可以使用Ant/Maven/Make進行自動建構部署。

浏覽器插件開發

浏覽器是我們的工作平台，在上面開發插件是很有趣的，很多時候也是很有用的。

浏覽器原理

前端工作絕大部分都是運作在浏覽器上面，是以了解浏覽器原理有助于更深入的了解各種技術的原理，工作過程。

溝通能力

優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

1. 産品經理——這些是負責策劃應用程式的一群人。他們能夠想象出怎樣通過應用程式來滿足使用者需求，以及怎樣通過他們設計的模式賺到錢（但願如此）。一般來說，這些人追求的是豐富的功能。
2. UI設計師——這些人負責應用程式的視覺設計和互動模拟。他們關心的是使用者對什麼敏感、互動的一貫性以及整體的好用性。他們熱衷于流暢靓麗但并不容易實作的使用者界面。
3. 項目經理——這些人負責實際地運作和維護應用程式。項目管理的主要關注點，無外乎正常運作時間（uptime）——應用程式始終正常可用的時間、性能和截止日期。項目經理追求的目标往往是盡量保持事情的簡單化，以及不在更新更新時引入新問題。
4. 最終使用者——當然是應用程式的主要消費者。盡管我們不會經常與最終使用者打交道，但他們的回報意見至關重要；沒人想用的應用程式毫無價值。最終使用者要求最多的就是對個人有用的功能，以及競争性産品所具備的功能。

那麼，前端工程師應該最關注哪些人的意見呢？答案是所有這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期，然後在此基礎上拿出最佳解決方案。由于前端工程師處于與這四類人溝通的交彙點上，是以其溝通能力的重要性不言而喻。如果一個非常酷的新功能因為會影響前端性能，必須删繁就簡，你怎麼跟産品經了解釋？再比如，假設某個設計如果不改回原方案可能會給應用程式造成負面影響，你怎麼才能說服UI設計師？作為前端工程師，你必須了解每一類人的想法從何而來，必須能拿出所有各方都能接受的解決方案。從某種意義上說，優秀的前端工程師就像是一位大使，需要時刻抱着外交官的心态來應對每一天的工作。

如何提高前端技術

Github是一個優秀的代碼托管網站，我們可以在上建立我們個人的項目，同時也是學習的好地方，我們可以關注其它優秀的項目。JSFiddle是一個web開發人員的練習場，一個可以在很多方面應用的工具。我們可以用他來線上編輯一些HTML,CSS,javascript片段。你編輯的代碼可以與其他人分享，或嵌入你的部落格等
閱讀優秀的開源代碼
參加前端聚會
關注技術發展趨勢，了解最新的行業技術，可以通過訂閱知名部落格，閱讀技術新聞擷取
寫部落格/記筆記，可以進行知識積累。部落格可以自己買空間或者各大知名部落格網站。筆記的話比如evernote，有道筆記等。

按階段劃分

如何劃分仁者見仁，智者見智，要根據項目的情況作出調整，以下是我根據我自身的經驗作出的劃分，給大家作個參考。

第一階段

入門，打基礎同時能參與到項目中去。

HMTL & XHTML
CSS基礎知識
JavaScript基礎知識
DOM
JSON
AJAX
JavaScript Frameworks
編輯器

第二階段

掌握前端核心技術，可以獨立幹活。

HTML5标簽，TML标簽語義化
CSS Sprite
浏覽器相容性
IE HasLayout和Block Format Content
CSS3
精通JavaScript Frameworks
HTML5
前端模闆
前端MVC
子產品化開發
Http1.1
調試工具
正規表達式

第三階段

把握整個前端項目，做整個前端項目的架構師。

CSS性能優化
LESS and SASS
JavaScript單元測試
JavaScript設計模式
NodeJS
ES5
Web移動開發
浏覽器插件開發
前端安全
跨域處理
SEO
A/B test
可用性/可通路性
前端流程/部署
浏覽器原理

第四階段

一代宗師。

不停的學習新的技術
互動設計能力，管理能力

前端工程師未來的路在哪？

第一條路是走技術流路線，即深入研究前端相關的各項技術，比如浏覽器原理，JavaScript本身的研究，W3C各種标準等。前端技術發展很快，各種新技術層出不窮，這條路走下去是很累的。

第二路是往互動設計方向走，前端工程師做到一定程度後互動設計能力也會得到很大的提高，對整個資訊架構的把握能力也會更強。可以很好的彌補視覺設計師在交換設計上的不足。這條路其實和第一條是不沖突的，甚至可以了解為同一條路。

第三條路是往後走，即去學習背景開發的技術，比如JAVA/PHP等，其實絕大部分傳統的背景開發人員就是這個狀态，即前背景都做。個人認為這樣的話其實已經走回老路了，畢竟前端就是從原來的背景開發那裡獨立出來的。

最後一條路就是往管理方向，比如項目經理，或者幹脆轉行，比如公務員等。

原文連結：https://blog.csdn.net/weixin_34032779/article/details/92077802

什麼是web前端

前端簡介

HTML

1. 标簽的分類

1. 标簽表示一個元素

2. 按性質劃分: Block-Level和Inline-Level

3. 按語義劃分:

2. XHTML

3. 标簽的語義化

CSS

1. CSS基礎知識

2. CSS進階

CSS Sprite

浏覽器相容性

IE HasLayout和Block Format Content

CSS Framework

CSS3

CSS性能優化

LESS和SASS

JavaScript

1. JavaScript基礎知識

2. JavaScript進階

DOM

JSON

AJAX

JavaScript Frameworks

HTML5

前端模闆

前端MVC

子產品化開發

JavaScript單元測試

JavaScript設計模式

NodeJS

ES5

Others

Http1.1

Web移動開發

前端安全

跨域處理

調試工具

SEO

A/B test

可用性/可通路性

正規表達式

編輯器

前端流程/部署

浏覽器插件開發

浏覽器原理

溝通能力

如何提高前端技術

按階段劃分

第一階段

第二階段

第三階段

第四階段

前端工程師未來的路在哪？

繼續閱讀