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

　　1、CSS基礎

　　層疊和繼承

　　優先級

　　盒模型

　　定位

　　浮動

　　2、進階

　　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  規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為絕大部分的兼容性問題都是它們引起的。CSSFrameworks：CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式、通用規則等代碼塊,用于簡化web前端開發的工作，提高工作效率。目前常見框架有：960 Grid System；Blueprint CSSBluetrip；Minimum Page。

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

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

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

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

　　3、java基礎：數據類型；變量；表達式與運算符；控制語句；函數；異常；OO；事件；BOM；閉包。

　　DOM：DOM即文檔對象模型，HTML DOM 定義了訪問和操作HTML文檔的標準方法。幾乎所有的現代瀏覽器都能很好的支持DOM了。

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

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

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

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

　　本地音頻視頻播放

　   Canvas/SVG

　　地理信息

　　硬件加速

　　本地運行

　　本地存儲

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

　　語義化標簽，Form表單

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

　　MustCache

　　JsRender

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

　　（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

　　Backbone.js

　　Spine

　　YUI

　　Agility.js

　　Ember.js

　　Batman.js

　　Dojo

　　AngularJS(MVVM)

　　KnockoutJS(MVVM)

　　模塊化開發:特點是“模塊化開發，按需加載“。這其中CommonJS組織定義了AMD的規范用來規范瀏覽器端的模塊定義。RequireJS和SeaJS是實現了AMD的兩個的框架。詳見：

　　Java單元測試:QUnit

　　Java設計模式

　　NodeJS:把Java移植到服務器端了，這樣前端和后端就可以使用同樣的技術，方便統一開發。而且NodeJS是非阻塞調用的，在特定領域性能是非常強勁的。而且這是前端開發人員進軍后臺開發的好機會，進而前后端統一開發，但又不用去學習其它后臺開發語言。

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

　　Others

　　響應式設計：伴隨著各種智能設備的流行，響應式設計現在是非常火熱。以前做網頁只要面向PC機的瀏覽器，頁面直接固定寬度就行，比如960px，而現在通過手機的訪問量已經超過PC機，并且設備的尺寸多種多樣，未來會更多。在這種背景下，網頁支持所有設備進行訪問是基本要求了，而響應式設計能很好的解決這些問題。

　　Http1.1：GET，POST方式，Request/Response 頭部，狀態碼等。

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

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

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

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

　　cookie劫持，通過獲取頁面的權限，在頁面中寫一個簡單的到惡意站點的請求，并攜帶用戶的cookie 獲取cookie后通過cookie 就可以直以被盜用戶的身份登錄站點。

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

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

　　SEO：搜索引擎優化

　　A/B test：確定兩個元素或版本（A和B）哪個版本更好，你需要同時實驗兩個版本。，選擇的版本使用。

　　可用性/可訪問性：

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

　　可訪問性：上網用戶中那些視力受損的人，通過屏幕閱讀器使用鍵盤命令將網頁的內容讀給他們聽。以語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，就可以讓此類用戶更容易導航，且網頁文件中的重要信息也更有可能被這些用戶找到。

　　前端流程/部署：Grunt，Bower和Yeoman現在幾乎是前端的自動化的項目構建工具

　　正則表達式

　　瀏覽器插件開發

　　瀏覽器原理

　　溝通能力

　　的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。產品經理——這些是負責策劃應用程序的一群人。他們能夠想象出怎樣通過應用程序來滿足用戶需求，以及怎樣通過他們設計的模式賺到錢（往往事與愿違）。一般來說，這些人追求的是豐富的功能。UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什么敏感、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實現的用戶界面，但考慮問題往往不周全。項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間（uptime）——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。終用戶——當然是應用程序的主要消費者。盡管我們不會經常與終用戶打交道，但他們的反饋意見至關重要；沒人想用的應用程序毫無價值。終用戶要求多的就是對個人有用的功能，以及競爭性產品所具備的功能。

　　從某種意義上說，的前端工程師就像是一位大使，需要時刻抱著外交官的心態來應對每的工作。

　　如果你對HTML5感興趣，想學習專業的HTML5教技術，請點擊在線咨詢HTML5教程，或者來粵嵌實地參觀了解哦！