20張小抄，讓前端開發(fā)與設(shè)計(jì)的效率大幅提升（原圖已打包）

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

很多人會(huì)在使用它們時(shí)借助書籍或在網(wǎng)上搜索，但這樣卻會(huì)使你的工作效率降低。我首先使用的是那些優(yōu)秀的Cheat Sheet（小抄），它們往往只有一兩頁(yè)，但卻歸納和設(shè)計(jì)得非?？茖W(xué)，能讓我快速找到我所需要的命令、語(yǔ)法規(guī)則或工具的快捷鍵，從而大大提高了我的工作效率。下面要分享的便是我在工作中整理的，對(duì)于設(shè)計(jì)師和前端開發(fā)都非常有用的那些Cheat Sheet。

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

HTML5 & CSS

CSS Cheatsheet

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

HTML5 Cheet Sheet [TAGS]

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

HTML5 Cheet Sheet

由Antonio Lupetti設(shè)計(jì)的一張HTML5 Cheet Sheet，對(duì)HTML 5標(biāo)簽進(jìn)行了概括，而且設(shè)計(jì)得很新穎。

HTML元素索引

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

JavaScript & JQuery

JavaScript Cheet Sheet

jQuery API 快速參考網(wǎng)站

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

流行前端庫(kù)

Bootstrap 3 - Cheat Sheet

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

Font Awesome圖標(biāo)參考

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

ns Cheatsheet

Bootstrap 3 Glyphicons Cheatsheet是另一套非常常用的圖標(biāo)集，特別是在使用Bootstrap時(shí)，經(jīng)常會(huì)用到它。

設(shè)計(jì)工具

Sketch Shortcuts Cheatsheet

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

Adobe CC Cheat Sheet

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

Adobe Illustrator CS6 Shortcuts Cheatsheet

Adobe Photoshop CS6 Shortcuts Cheatsheet

開發(fā)工具

Sublime Text 3 (OSX) Cheat Sheet

PDF版本（PDF版本請(qǐng)參考頂部提供的資源連接）。

Atom Editor Cheat Sheet

Atom是 Github 專門為程序員推出的一個(gè)跨平臺(tái)文本編輯器。具有簡(jiǎn)潔和直觀的圖形用戶界面，并有很多有趣的特點(diǎn)：支持CSS，HTML，JavaScript等網(wǎng)頁(yè)編程

Markdown

Markdown Cheatsheet

Markdown因?yàn)槠浜?jiǎn)潔高效的特性，而成為很多開發(fā)或設(shè)計(jì)文檔的寫作標(biāo)準(zhǔn)。下面這張Cheat Sheet包含了Markdown中常見的語(yǔ)法標(biāo)準(zhǔn)。

瀏覽器中的開發(fā)者工具

Chrome Devtools Cheatsheet

Chrome自帶了非常強(qiáng)大的開發(fā)者工具，通過快捷鍵去控制它能讓你的程序調(diào)試速度飛起來。

Firebug Cheatsheet

Firefox上強(qiáng)大的網(wǎng)站調(diào)試插件，Firebug Cheatsheet中包含了所有快捷鍵。

操作系統(tǒng)

Command Line Cheat Sheet

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

Git & GitHub

Git Cheat Sheet

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

總結(jié)：

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

歡迎關(guān)注作者的微信公眾號(hào)：

【牛總的精品教程合集】

MBE 風(fēng)格圖標(biāo)：
《PS熱門教程！教你5分鐘快速繪制超火的MBE風(fēng)格圖標(biāo)》

五分鐘海報(bào)教程：
《PS教程！5分鐘設(shè)計(jì)出極具格調(diào)的藝術(shù)海報(bào)（一）》
《PS教程！5分鐘設(shè)計(jì)出極具格調(diào)的藝術(shù)海報(bào)（二）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com