在上一期，粵嵌HTML5教程分享了初學(xué)者必讀的前端知識(shí)（上），接上篇分享我們來(lái)看看下篇都講了些什么呢？

　　1、CSS基礎(chǔ)

　　層疊和繼承

　　優(yōu)先級(jí)

　　盒模型

　　定位

　　浮動(dòng)

　　2、進(jìn)階

　　CSS Sprite：CSS Sprite主要用于前端性能優(yōu)化的一種技術(shù)，原理是通過(guò)將多張背景圖片合成在一張圖片上從而減少HTTP請(qǐng)求，加快載入速度。瀏覽器兼容性：絕大部分情況下我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。IE HasLayout和Block Format Content：IE HasLayout是一個(gè) Internet Explorer for Windows的私有概念，它決定了一個(gè)元素如何顯示以及約束其包含的內(nèi)容、如何與其他元素交互和建立聯(lián)系、如何響應(yīng)和傳遞應(yīng)用程序事件、用戶事件等。這種渲染特性可以通過(guò)某些CSS屬性被不可逆轉(zhuǎn)地觸發(fā)。而有些HTML元素則默認(rèn)就具有”layout”。目前只有IE6和IE7有這個(gè)概率。BFC是W3C CSS 2.1  規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。這個(gè)其實(shí)和瀏覽器的兼容性有關(guān)，因?yàn)榻^大部分的兼容性問(wèn)題都是它們引起的。CSSFrameworks：CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁(yè)面排版、網(wǎng)格布局、表單樣式、通用規(guī)則等代碼塊,用于簡(jiǎn)化web前端開(kāi)發(fā)的工作，提高工作效率。目前常見(jiàn)框架有：960 Grid System；Blueprint CSSBluetrip；Minimum Page。

　　還是一個(gè)比較出名和特殊的框架是Twitter的Bootstrap。Bootstrap是快速開(kāi)發(fā)Web應(yīng)用程序的前端工具包。它是一個(gè)CSS和HTML的集合，它使用了的瀏覽器技術(shù)，給你的Web開(kāi)發(fā)提供了時(shí)尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。它是基于Less開(kāi)發(fā)的。不支持IE6，在IE7和IE8里效果也不咋地。

　　CSS3：雖然CSS3還沒(méi)有正式成為標(biāo)準(zhǔn)，但是包括IE9+,chrome,Firefox等現(xiàn)代瀏覽器都支持CSS3。CSS提供了好多以前需要用Java和切圖才能搞定的功能，目前主要功能有：圓角；多背景；@font-face；動(dòng)畫(huà)與漸變；漸變色；Box陰影；RGBa-加入透明色；文字陰影。

　　CSS性能優(yōu)化：CSS 代碼是控制頁(yè)面顯示樣式與效果的直接“工具”，但是在性能調(diào)優(yōu)時(shí)他們通常被 Web 開(kāi)發(fā)工程師所忽略，而事實(shí)上不規(guī)范的 CSS 會(huì)對(duì)頁(yè)面渲染的效率有嚴(yán)重影響，尤其是對(duì)于結(jié)構(gòu)復(fù)雜的 Web 2.0 頁(yè)面，這種影響更是不可磨滅。所以，寫(xiě)出規(guī)范的、高性能的 CSS 代碼會(huì)極大的提高應(yīng)用程序的效率。

　　LESS and SASS：CSS 預(yù)處理器，用來(lái)為 CSS 增加一些編程的的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題，例如你可以在 CSS 中使用變量、簡(jiǎn)單的程序邏輯、函數(shù)等等在編程語(yǔ)言中的一些基本技巧，可以讓你的 CSS 更見(jiàn)簡(jiǎn)潔，適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處。SASS基于Ruby開(kāi)發(fā)。LESS既可以在客戶端運(yùn)行，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行。

　　3、java基礎(chǔ)：數(shù)據(jù)類(lèi)型；變量；表達(dá)式與運(yùn)算符；控制語(yǔ)句；函數(shù)；異常；OO；事件；BOM；閉包。

　　DOM：DOM即文檔對(duì)象模型，HTML DOM 定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法。幾乎所有的現(xiàn)代瀏覽器都能很好的支持DOM了。

　　JSON：(Java Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式，易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成。是目前事實(shí)上數(shù)據(jù)交換的標(biāo)準(zhǔn)格式，幾乎所有語(yǔ)言都支持JSON，比XML強(qiáng)太多了。

　　AJAX：即“Asynchronous Java and XML”（異步Java和- XML)，AJAX并非縮寫(xiě)詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，由Google發(fā)揚(yáng)光大。用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)。

　　Java Frameworks：極大簡(jiǎn)化我們Java編程的工作量，它主要提供了以下幾個(gè)主要功能： DOM操作，跨瀏覽器兼容性，以及程序架構(gòu)。當(dāng)然像jQuery它本身其實(shí)并不是一個(gè)框架，它是一個(gè)庫(kù)(lib)。目前主流的框架或庫(kù)有如下幾個(gè)：；jQuery；YUI；DOJO。

　　HTML5:同CSS3類(lèi)似，即雖然沒(méi)有成為標(biāo)準(zhǔn)，但是主流的瀏覽器都支持了。HTML5不是HMTL，雖然也提供了一些新標(biāo)簽，但是它的主要用途還是Java。HTML5主要提供以下功能：

　　本地音頻視頻播放

　   Canvas/SVG

　　地理信息

　　硬件加速

　　本地運(yùn)行

　　本地存儲(chǔ)

　　從桌面拖放文件到瀏覽器上傳

　　語(yǔ)義化標(biāo)簽，F(xiàn)orm表單

　　前端模板:主要是為了解決復(fù)雜的數(shù)據(jù)拼接問(wèn)題，可以將模板語(yǔ)言轉(zhuǎn)換化為HTML結(jié)構(gòu)，可以大大簡(jiǎn)化工作量，同時(shí)代碼的可維護(hù)性得到很大的提高。目前比較主流前端模板有：

　　MustCache

　　JsRender

　　前端MVC:Web應(yīng)用的功能越來(lái)越強(qiáng)，Java代碼也越來(lái)越多，大量的JS代碼要以何種架構(gòu)來(lái)組織就成了一個(gè)亟待解決的問(wèn)題，于是就有人把傳統(tǒng)的MVC架構(gòu)移植到前端來(lái)解決這些問(wèn)題。目前主流前端MVC框架主要有以下這些：

　　（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)！）

　　Backbone.js

　　Spine

　　YUI

　　Agility.js

　　Ember.js

　　Batman.js

　　Dojo

　　AngularJS(MVVM)

　　KnockoutJS(MVVM)

　　模塊化開(kāi)發(fā):特點(diǎn)是“模塊化開(kāi)發(fā)，按需加載“。這其中CommonJS組織定義了AMD的規(guī)范用來(lái)規(guī)范瀏覽器端的模塊定義。RequireJS和SeaJS是實(shí)現(xiàn)了AMD的兩個(gè)的框架。詳見(jiàn)：

　　Java單元測(cè)試:QUnit

　　Java設(shè)計(jì)模式

　　NodeJS:把Java移植到服務(wù)器端了，這樣前端和后端就可以使用同樣的技術(shù)，方便統(tǒng)一開(kāi)發(fā)。而且NodeJS是非阻塞調(diào)用的，在特定領(lǐng)域性能是非常強(qiáng)勁的。而且這是前端開(kāi)發(fā)人員進(jìn)軍后臺(tái)開(kāi)發(fā)的好機(jī)會(huì)，進(jìn)而前后端統(tǒng)一開(kāi)發(fā)，但又不用去學(xué)習(xí)其它后臺(tái)開(kāi)發(fā)語(yǔ)言。

　　ES5:ECMA 5，也就是的Java規(guī)范，對(duì)之前的Java作了很多改進(jìn)，增加了好多新的特性，比如JSONECMA 5，也就是的Java規(guī)范，對(duì)之前的Java作了很多改進(jìn)，增加了好多新的特性，比如JSON。

　　Others

　　響應(yīng)式設(shè)計(jì)：伴隨著各種智能設(shè)備的流行，響應(yīng)式設(shè)計(jì)現(xiàn)在是非?；馃帷Ｒ郧白鼍W(wǎng)頁(yè)只要面向PC機(jī)的瀏覽器，頁(yè)面直接固定寬度就行，比如960px，而現(xiàn)在通過(guò)手機(jī)的訪問(wèn)量已經(jīng)超過(guò)PC機(jī)，并且設(shè)備的尺寸多種多樣，未來(lái)會(huì)更多。在這種背景下，網(wǎng)頁(yè)支持所有設(shè)備進(jìn)行訪問(wèn)是基本要求了，而響應(yīng)式設(shè)計(jì)能很好的解決這些問(wèn)題。

　　Http1.1：GET，POST方式，Request/Response 頭部，狀態(tài)碼等。

　　Web移動(dòng)開(kāi)發(fā)：開(kāi)發(fā)方式一般是native的方式或者Web方式，作為前端開(kāi)發(fā)人員來(lái)說(shuō)自然是去學(xué)習(xí)Web移動(dòng)開(kāi)發(fā)了。PhoneGap是必學(xué)的，前端層面的框架如jQueryMobile, Sencha Touch, jQTouch等都是不錯(cuò)的選擇。

　　前端安全：隨著前端技術(shù)的發(fā)展,安全問(wèn)題已經(jīng)從服務(wù)器悄然來(lái)到了每一個(gè)用戶的的面前，盜取用戶數(shù)據(jù), 制造惡意的可以自我復(fù)制的蠕蟲(chóng)代碼,讓病毒在用戶間傳播,使服務(wù)器當(dāng)?shù)? 更有甚者可能會(huì)在用戶不知覺(jué)得情況下,讓用戶成為攻擊者,這不是駭人聽(tīng)聞。富客戶端的應(yīng)用越來(lái)越廣，前端的安全問(wèn)題也隨之增多。常見(jiàn)的攻擊方法有：

　　XSS，跨站腳本攻擊(Cross Site )。它指的是惡意攻擊者往Web頁(yè)面里插入惡意html代碼，當(dāng)用戶瀏覽該頁(yè)之時(shí)，嵌入的惡意html代碼會(huì)被執(zhí)行，從而達(dá)到惡意用戶的特殊目的。

　　CSRF(Cross Site Request Forgery)，跨站點(diǎn)偽造請(qǐng)求。顧名思義就是 通過(guò)偽造連接請(qǐng)求在用戶不知情的情況下，讓用戶以自己的身份來(lái)完成攻擊者需要達(dá)到的一些目的。

　　cookie劫持，通過(guò)獲取頁(yè)面的權(quán)限，在頁(yè)面中寫(xiě)一個(gè)簡(jiǎn)單的到惡意站點(diǎn)的請(qǐng)求，并攜帶用戶的cookie 獲取cookie后通過(guò)cookie 就可以直以被盜用戶的身份登錄站點(diǎn)。

　　跨域處理：同源策略規(guī)定跨域之間的腳本是隔離的，一個(gè)域的腳本不能訪問(wèn)和操作另外一個(gè)域的絕大部分屬性和方法。所謂的跨域處理就是處于不用域之間的腳步互相調(diào)用，目前有很多方法來(lái)處理它。

　　調(diào)試工具：前端的調(diào)試工具很多，比如Firebug，Webkit核心的web inspector, IE的iedeveloper。HTTP相關(guān)的fiddler, httpwatch等，還有格式化代碼的jsbeatutifier，它有助于閱讀壓縮處理過(guò)的Java代碼。IETester可以模擬所有的IE版本，是調(diào)試IE兼容性的好工具。

　　SEO：搜索引擎優(yōu)化

　　A/B test：確定兩個(gè)元素或版本（A和B）哪個(gè)版本更好，你需要同時(shí)實(shí)驗(yàn)兩個(gè)版本。，選擇的版本使用。

　　可用性/可訪問(wèn)性：

　　可用性指的是：產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過(guò)程中用戶的主觀感受可好，是從用戶的角度來(lái)看產(chǎn)品的質(zhì)量。可用性好意味著產(chǎn)品質(zhì)量高，是企業(yè)的核心競(jìng)爭(zhēng)力。

　　可訪問(wèn)性：上網(wǎng)用戶中那些視力受損的人，通過(guò)屏幕閱讀器使用鍵盤(pán)命令將網(wǎng)頁(yè)的內(nèi)容讀給他們聽(tīng)。以語(yǔ)義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離的HTML）編寫(xiě)的網(wǎng)頁(yè)文件，就可以讓此類(lèi)用戶更容易導(dǎo)航，且網(wǎng)頁(yè)文件中的重要信息也更有可能被這些用戶找到。

　　前端流程/部署：Grunt，Bower和Yeoman現(xiàn)在幾乎是前端的自動(dòng)化的項(xiàng)目構(gòu)建工具

　　正則表達(dá)式

　　瀏覽器插件開(kāi)發(fā)

　　瀏覽器原理

　　溝通能力

　　的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)。在任何情況下，前端工程師至少都要滿足下列四類(lèi)客戶的需求。產(chǎn)品經(jīng)理——這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們能夠想象出怎樣通過(guò)應(yīng)用程序來(lái)滿足用戶需求，以及怎樣通過(guò)他們?cè)O(shè)計(jì)的模式賺到錢(qián)（往往事與愿違）。一般來(lái)說(shuō)，這些人追求的是豐富的功能。UI設(shè)計(jì)師——這些人負(fù)責(zé)應(yīng)用程序的視覺(jué)設(shè)計(jì)和交互模擬。他們關(guān)心的是用戶對(duì)什么敏感、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實(shí)現(xiàn)的用戶界面，但考慮問(wèn)題往往不周全。項(xiàng)目經(jīng)理——這些人負(fù)責(zé)實(shí)際地運(yùn)行和維護(hù)應(yīng)用程序。項(xiàng)目管理的主要關(guān)注點(diǎn)，無(wú)外乎正常運(yùn)行時(shí)間（uptime）——應(yīng)用程序始終正常可用的時(shí)間、性能和截止日期。項(xiàng)目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡(jiǎn)單化，以及不在升級(jí)更新時(shí)引入新問(wèn)題。終用戶——當(dāng)然是應(yīng)用程序的主要消費(fèi)者。盡管我們不會(huì)經(jīng)常與終用戶打交道，但他們的反饋意見(jiàn)至關(guān)重要；沒(méi)人想用的應(yīng)用程序毫無(wú)價(jià)值。終用戶要求多的就是對(duì)個(gè)人有用的功能，以及競(jìng)爭(zhēng)性產(chǎn)品所具備的功能。

　　從某種意義上說(shuō)，的前端工程師就像是一位大使，需要時(shí)刻抱著外交官的心態(tài)來(lái)應(yīng)對(duì)每的工作。

　　如果你對(duì)HTML5感興趣，想學(xué)習(xí)專(zhuān)業(yè)的HTML5教技術(shù)，請(qǐng)點(diǎn)擊在線咨詢HTML5教程，或者來(lái)粵嵌實(shí)地參觀了解哦！