與幾年前的開發模式不同，今天當我們做前端設計或開發時，往往需要組合很多不同的技術、框架，并且使用不同的工具。要熟悉這些新東西，特別是熟練掌握它們并不容易，尤其記住那些命令和語法需要很長的時間。

很多人會在使用它們時借助書籍或在網上搜索，但這樣卻會使你的工作效率降低。我首先使用的是那些優秀的Cheat Sheet（小抄），它們往往只有一兩頁，但卻歸納和設計得非常科學，能讓我快速找到我所需要的命令、語法規則或工具的快捷鍵，從而大大提高了我的工作效率。下面要分享的便是我在工作中整理的，對于設計師和前端開發都非常有用的那些Cheat Sheet。

高清大圖/PDF 打包下載：http://pan.baidu.com/s/1i5GZQYT

HTML5 & CSS

CSS Cheatsheet

這張Cheat Sheet 包含了CSS中常見的選擇器、盒模型、背景、色彩、字體等語法，以及使用說明。

HTML5 Cheet Sheet [TAGS]

HTML5引入了很多新的tag，下面這個Cheet Sheet將那些HTML 5中新增的標簽獨立成一個小節，讓我們能夠很快掌握如何使用它們。

HTML5 Cheet Sheet

由Antonio Lupetti設計的一張HTML5 Cheet Sheet，對HTML 5標簽進行了概括，而且設計得很新穎。

HTML元素索引

HTML Elements Index包含了所有HTML元素，并按照字母順序進行索引。

JavaScript & JQuery

JavaScript Cheet Sheet

jQuery API 快速參考網站

jQuery Quick API Reference這個網站包含了所有JQuery中的API，點擊某一個API后會直接鏈接到官方說明文檔。另外你還能根據JQuery的不同版本來進行查詢，非常方便。

流行前端庫

Bootstrap 3 - Cheat Sheet

Bootstrap 可能是目前最流行的CSS框架了，下面是Bootstrap 3的一張Cheat Sheet，包含了對Grid系統以及不同Device下適配的說明。

Font Awesome圖標參考

每次使用Font Awesome時總需要打開網站然后去查找所需要的圖標，對于英文單詞不是很熟悉的人來說，找一個圖標往往要上下翻看好幾遍，而且隨著圖標庫的擴大搜索圖標成了一件讓人頭疼的事。有了這張Font Awesome圖標參考，你只需要將它打印出來，放在桌邊，需要時便能很快找到你想要的圖標了。

ns Cheatsheet

Bootstrap 3 Glyphicons Cheatsheet是另一套非常常用的圖標集，特別是在使用Bootstrap時，經常會用到它。

設計工具

Sketch Shortcuts Cheatsheet

Skech已經成為我最常使用過的一個UI設計工具，大到做一個完整的UI方案，小到加工一張圖片，我都會使用Sketch來完成。下面是Sketch中常用的快捷鍵。。

Adobe CC Cheat Sheet

THE ULTIMATE ADOBE CREATIVE CLOUD KEYBOARD SHORTCUTS CHEAT SHEET包含了Adobe CC系列中所有產品的快捷鍵Cheat Sheet.（由于圖片非常大，完整版請參考頂部提供的資源連接）

Adobe Illustrator CS6 Shortcuts Cheatsheet

Adobe Photoshop CS6 Shortcuts Cheatsheet

開發工具

Sublime Text 3 (OSX) Cheat Sheet

PDF版本（PDF版本請參考頂部提供的資源連接）。

Atom Editor Cheat Sheet

Atom是 Github 專門為程序員推出的一個跨平臺文本編輯器。具有簡潔和直觀的圖形用戶界面，并有很多有趣的特點：支持CSS，HTML，JavaScript等網頁編程

Markdown

Markdown Cheatsheet

Markdown因為其簡潔高效的特性，而成為很多開發或設計文檔的寫作標準。下面這張Cheat Sheet包含了Markdown中常見的語法標準。

瀏覽器中的開發者工具

Chrome Devtools Cheatsheet

Chrome自帶了非常強大的開發者工具，通過快捷鍵去控制它能讓你的程序調試速度飛起來。

Firebug Cheatsheet

Firefox上強大的網站調試插件，Firebug Cheatsheet中包含了所有快捷鍵。

操作系統

Command Line Cheat Sheet

這張Cheat Sheet包含了最常用的Linux命令行，及使用示例。

Git & GitHub

Git Cheat Sheet

Git已經取代SVN成為目前最流行的版本控制及分布協作工具。但用好Git并不容易，你需要掌握許多Git命令，下面這張Cheat Sheet能夠幫你快速找到所需要的命令。

總結：

以上只是那些實用的Cheat Sheet中很小的一部分 ，我也建議你平時注意收集并使用那些Cheat Sheet，它們能極大提升你的開發或設計效率。

歡迎關注作者的微信公眾號：

【牛總的精品教程合集】

MBE 風格圖標：
《PS熱門教程！教你5分鐘快速繪制超火的MBE風格圖標》

五分鐘海報教程：
《PS教程！5分鐘設計出極具格調的藝術海報（一）》
《PS教程！5分鐘設計出極具格調的藝術海報（二）》

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com