web前端開發(fā)基礎環(huán)境配置

Web前端和全棧的定義：

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

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

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

D、NodeJS:就是用JS為基礎的一門后臺的語言,讓前端無所不能，現在的前端已經是突破所有邊界。

web前端開發(fā)環(huán)境的搭配：

A、Sublime3安裝配置：Sublime跨平臺的前端開發(fā)神器,是一個共享軟件,免費使用;下載最新Sublime3安裝包;

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

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

-安裝包管理器

打開Sublime3控制臺，ctrl+~

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

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

-安裝第三方插件(包)

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

輸入install，然后回車，然后可以搜索想要的插件，回車安裝；Atom工具使用

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

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

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

C、WebStorm10的安裝與使用：WebStrom是最專業(yè)的前端IDE開發(fā)工具，是一個非常重量級的開發(fā)工具,是專業(yè)為我們前端設計的IDE,用他來開發(fā)是效率非常高;

D、總結三款開發(fā)工具的優(yōu)劣：Sublime3：需要安裝第三方的包，一般。Atom：集成度非常好，也很輕，需要自己安裝第三方的包。Webstrom：大項目，建議使用webstrom，非常強大，但是也很重。

操作系統(tǒng)常用快捷鍵：快捷鍵是讓你成為高級的，專業(yè)的前端工程師必經的途徑，是大家必須要掌握的。

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：刷新活動窗口

本文版權歸黑馬程序員前端與移動開發(fā)學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：黑馬程序員前端與移動開發(fā)學院

首發(fā)：http://web.itheima.com/