前端基礎入門第一階段-Web前端開發基礎環境配置

Web前端和全棧的定義：

A、什麼是傳統傳統web前端：須要把設計師的設計稿，切完圖，寫標籤和樣式，實現JS的效果，簡而言之即只須要掌握HTML的頁面結構，CSS的頁面樣式，javaScript頁面的行爲(包括頁面的效果和整合)；

B、HTML5時代的大前端：要處理各類端的兼容開發(PC,移動端,各類瀏覽器)、移動APP開發和移動站點開發，Ajax+服務器端技術開發,異步開發和後臺的交互、高級設計模式和框架(MVC,AngularJS...)、運用自動化工做流(Grunt)、網站安全、SEO、測試、源代碼管理、團隊合做、製做HTML5遊戲等。

C、全棧時代:集前端和後端一體的大牛，會前端的語言和後臺的語言,先後臺通吃,可以快速的找到問題和解決問題的能力。

D、NodeJS:就是用JS爲基礎的一門後臺的語言,讓前端無所不能，如今的前端已是突破全部邊界。

web前端開發環境的搭配：

A、Sublime3安裝配置：Sublime跨平臺的前端開發神器,是一個共享軟件,無償使用；下載最新Sublime3安裝包；

-官網地址:http://www.sublimetext.com/

-網盤地址:http://pan.baidu.com/s/1ntszCgT

-安裝包管理器

打開Sublime3控制檯,ctrl+~

輸入安裝包管理器命令代碼，注意須要聯網才能安裝,由於是在線下載包

包管理器的官網地址:https://packagecontrol.io

-安裝第三方插件(包)

打開命令面板:ctrl+shift+p；

輸入install,而後回車，而後能夠搜索想要的插件,回車安裝；Atom工具使用

B、Atom工具使用：由github發佈的前端開發工具，集成了chrome的調試工具，是一款很是強大和開發的開發工具平臺。在file裏面的setting裏面進行設置,包括字體的大小,快捷鍵,背景顏色主題等；

官網地址：https://atom.io/

百度網盤下載地址：http://pan.baidu.com/s/1ntszCgT

C、WebStorm10的安裝與使用：WebStrom是最專業的前端IDE開發工具，是一個很是重量級的開發工具,是專業爲咱們前端設計的IDE,用他來開發是效率很是高；

D、總結三款開發工具的優劣：Sublime3:須要安裝第三方的包，通常。Atom：集成度很是好，也很輕，須要本身安裝第三方的包。Webstrom：大項目，建議使用webstrom，很是強大，可是也很重。

操做系統經常使用快捷鍵：快捷鍵是讓你成爲高級的,專業的前端工程師必經的途徑,是你們必需要掌握的。

Win+數字鍵:打開/顯示超級任務欄第N個圖標表明的程序

Win+D:快速顯示桌面

Win+R:快速運行,打開軟件,cmd命令行等

Win+E:快速打開資源管理器

Win+方向鍵:最大化,還原/最小化窗口

Win+L:快速鎖定計算機

Ctrl+Alt+Del:顯示如下選項:鎖定計算機,切換用戶,註銷,更改密碼,和啓動任務管理器

CTRL+SHIFT+ESC:打開任務管理器

Alt+F4:關閉當前活動項目或退出活動程序

Alt+Tab:在打開的項目中進行切換

Alt+向上方向鍵:在Windows Explorer 中查看當前文件夾的上一級目錄

Ctrl+A:在文檔或窗口中全選Ctrl+C:複製選中的項目

Ctrl+向下方向鍵:將光標移到下一段的段首

Ctrl+Esc:打開開始菜單

Ctrl+F4:關閉活動文檔(在程序中可以讓你同時打開多個文檔)

Ctrl+上方向鍵:將光標移動到以前一段的開頭

Ctrl+V:粘貼選定項目

Ctrl+X:剪切選定項目

Ctrl+Y:還原一個操做

Ctrl+Z:撤銷一個操做

DELETE:刪除選定項目並移動到回收站

ESC:取消當前任務

F2:重命名選定的項目

F4:在Windows Explorer 中顯示地址欄列表

F5:刷新活動窗口