前端須要用到的東西

介紹一些經常使用的網站之類的

● w3school 在線教程       http://www.w3school.com.cn/
● 菜鳥教程                http://www.runoob.com/
● 腳本之家                http://www.jb51.net/
● 博客園                  http://www.cnblogs.com/
● segmentfault技術論壇    https://segmentfault.com/
● CSDN博客                http://www.csdn.net/?ref=toolbar
● 慕課網                  http://www.imooc.com/
● jQuery WeUI             http://jqweui.com/
● Veda 原型               http://www.nowamagic.net/
● HTML5中文門戶           http://html5cn.org/
● 前端網                  http://www.qdfuns.com/
● 前端開發博客             http://caibaojian.com/
● cavin blog js           http://www.j--d.com/
● HTML5驗證器(可識別對錯)   http://html5.validator.nu
● 工具the HTML5 Live DOM Viewer驗證：http://livedom.validator.nu
● 在線HTML5大綱分析器：     http://gsnedders.html5.org/outliner

擴展網站

● Linux公社                http://www.linuxidc.com/index.htm
● 千圖網                   http://www.58pic.com
● 花瓣網                   http://www.huaban.com
● Bootstrap中文站          http://www.bootcss.com
● Bootstrap英文站          http://www.getbootstrap.com
● Lufylegend遊戲引擎        http://www.lufylegend.com
● Jquery在線手冊            http://jquery.cuishifeng.cn
● 認識webGL                 http://www.jj51.com/
● 好例子網                http://www.haolizi.net/example/view_8913.html

 

瀏覽器：
Google Chrome 瀏覽器  佔瀏覽器市場的22%、  IETester  測試工具
 Mozilla Firefox 火狐瀏覽器、世界之窗、360瀏覽器、搜狗瀏覽器、獵豹瀏覽器、UC瀏覽器、百度瀏覽器、QQ瀏覽器、Opera瀏覽器
市面上有不少的瀏覽器，一些不太規範的瀏覽器在顯示效果上面可能和其餘的瀏覽器會有差別。針對這種狀況，咱們須要作到統一。也就是兼容。

 

咱們開發一個網站的時候，大概是如下流程：
業務員/產品經理   ==>   跑業務
設計師           ==>   設計一個圖片。
前端工程師        ==>   把設計稿作成一個靜態的網頁。
後臺程序員        ==>   把靜態的網頁動態化。

 

	PHP學習的大體基礎內容：
	photoshop：切圖佈局和資源來源
	html：網頁結構
	css：美化網頁
	javascript和jQuery：讓網站動起來（特效：在百度中搜反轉 旋轉 閃爍 抖動 跳躍 黑洞能夠出特效）
	php：讓網站活起來（支付寶，登錄交流）

 

	HTML5Web前端設計學習的大體基礎內容：
	(1)photoshop：切圖佈局和資源來源
	(2)html：網頁結構
	(3)css：美化網頁
	(4)響應式佈局(PC端實戰)、移動端實戰、Bootstrap和sass
	(5)javascript和jQuery：讓網站動起來（特效：在百度中搜反轉 旋轉 閃爍 抖動 跳躍 黑洞能夠出特效）
	(6)H5遊戲開發 核心技術：canvas + javascript
	(7)前段架構師：前段自動化工具 + 架構理念 + Angular 框架
	(8)APP 開發 核心技術：Dcloud + 本地存儲 + （HTML5+） 服務器開發

做爲初學者，我比較喜歡用的編輯器是Sublime Text 3 和 HBuilder，下面介紹下一些實用的快捷鍵

 

Sublime Text 3 快捷鍵

● Ctrl+G：跳轉到第幾行
● Ctrl+Shift+V：粘貼並縮進
● Ctrl+D 選中光標所佔的文本，繼續操做則會選中下一個相同的文本
● Ctrl+J 合併選中的多行代碼爲一行
● Ctrl+L 選中整行，繼續操做則繼續選擇下一行
● Ctrl+Shift+Enter 在上一行插入新行
● Ctrl+X：刪除當前行
● Ctrl+Shift+F：查找並替換
● Ctrl+M 光標移動至括號內結束或開始的位置
● Ctrl+Shift+M：選中當前括號內容，重複可選着括號自己
● Ctrl+/：註釋當前行
● Alt+F3：選擇全部相同的詞
● Alt+Shift+數字：分屏顯示
● Ctrl+Shift+[ 選中代碼，按下快捷鍵，摺疊代碼
● Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼
● Ctrl+Alt+↓ 向下添加多行光標，可同時編輯多行
● Ctrl+Shift+↓ 將光標所在行和下一行代碼互換
● Shift+Tab 向左縮進
● F6 單詞檢測拼寫

 

HBuilder 快捷鍵：不一樣於Sublime，HBuilder自帶插件不少，功能強大的同時卻運行有點卡。
快捷鍵與sublime也有不少不一樣（特別是不要按Ctrl+Shift+V、這並非粘貼縮進，一旦按了很容易卡死程序）。
● 摺疊代碼：'Ctrl+Alt+-'
● 合併下行：'Ctrl+Alt+j
● Ctrl+d  刪除一行

由於剛開始學習，只是作一些簡單的頁面和知識點檢驗。相對於suSublime Text 3，HBuilder過卡，因此我比較喜歡Sublime Text，
HBuilder只用了十幾回，不少快捷鍵還不知道，不過大家喜歡用這個的話能夠百度一下的。

 

PS總結

網頁經常使用的圖片格式(目前最經常使用的是JPG和GIF):須要強調說明的是咱們在web頁面上所使用的圖像都是位圖
jpg/jpeg
通常狀況下都會使用jpg的方式保存圖片。jpg保存的圖片會進行壓縮。會產生少許色彩的丟失。共支持16000種顏色

gif
支持動態圖片。也會對圖片進行壓縮。壓縮比率比jpg更小。支持透明圖片。共支持256種顏色


png
能最大限度地完整的保存圖片。也支持透明圖片,不支持動態圖片。 須要切透明圖時通常使用PNG
png-8 ：共支持256種顏色
png-24：共支持16000種顏色

實際應用
何時應該使用PNG
一、圖像上顏色較少，而且主要以純色或者平滑的漸變色進行填充。
二、具有較大亮度差別以及強烈對比的簡單圖像（如「馬上購買」按鈕中的背景和文字）。
何時應該使用JPG
對於寫實的攝影圖像或是顏色層次很是豐富的圖像採用JPG的圖片格式保存通常能達到最佳的壓縮效果。

根據經驗咱們在頁面中使用的商品圖片、採用人像或者實物素材製做的廣告Banner等圖像更適合採用JPG的圖片格式保存。
因而可知在存儲圖像時採用JPG仍是PNG主要依據圖像上的色彩層次和顏色數量進行選擇。通常層次豐富顏色較多的圖像採用JPG存儲，而顏色簡單
對比強烈的則須要採用PNG。但也會有一些特殊狀況，例若有些圖像儘管色彩層次豐富，但因爲圖片尺寸較小，上面包含的顏色數量有限時，也可
以嘗試用PNG進行存儲。而有些矢量工具繪製的圖像因爲採用較多的濾鏡特效也會造成豐富的色彩層次，這個時候就須要採用JPG進行存儲了。

另外還有一個原則就是用於頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該儘可能用PNG格式進行存儲，這樣才能更好的保證
設計品質。而其餘一些內容元素，如廣告Banner、商品圖片等對質量要求不是特別苛刻的，則能夠用JPG去進行存儲從而下降文件大小。

PS快捷鍵：
♠ 空格+鼠標左鍵    -> 拖動,臨時使用抓手工具   ♠ ALT+鼠標滾輪     ->放大縮小
♠ ctrl+shift+alt+s -> 保存切圖                ♠ ctrl+d           ->取消選擇
♠ F8               ->控制面板信息             ♠ shift+鼠標左鍵   ->保存切圖時多選
♠ 雙擊切圖         ->更改切圖信息             ♠ 【F12】          ->把文件恢復到打開時的狀態
♠ ALT+點擊小眼睛   ->所選圖層背景透明          ♠ alt+鼠標左鍵     ->隱藏所選圖層的其餘圖層(從新操做一次恢復)
♠ ctrl+R           -> 標尺                   ♠ ctrl+h           ->隱藏/顯示選區
♠ 量長度           ->吸管工具裏有個標尺工具    ♠ ctrl+T           ->自由變化(能夠肯定中心點位置)
♠ 【Shift + F7】或【Ctrl + Shift + I】- 選擇→反選
♠ 【Ctrl】- 臨時使用移動工具                  ♠ 【Alt】 - 臨時使用吸色工具
♠ 【Ctrl + R】- 顯示/隱藏標尺                 ♠ 【Ctrl + ;】- 顯示/隱藏參考線
♠ 【Ctrl + "】- 顯示/隱藏網格                 ♠ 【Ctrl + 1】- 以 100% 顯示圖像

通常所需的切圖：背景圖，logo，廣告圖，小標籤，藝術字，文字與圖像相互指向

保存切圖的要點：保存文件時使用通常使用「選中的切片」，若想一次性保存全部圖片除了能夠
               選擇全部圖片保存外還能夠直接使用「全部切片」，但選擇這個時須要確保你
               切的全部圖都沒有多餘的，否則多出來的圖會形成冗餘（保存文件時會自動
               建立一個images文件夾）

PS摳圖
我的以爲做爲前端切圖必備技能之一，摳圖仍是要掌握的，下面給出一些如何摳圖的網站做爲學習。
摳圖教程大全      http://www.68ps.com/zt/koutu/
PS學習網          http://www.ps-xxw.cn/shiyongjiqiao/1119.html
Photoshop摳圖方法大全 http://www.3lian.com/edu/2014/07-24/157912.html

還有一種比較簡單的方法，不過要安裝美圖秀秀才能用，並且網頁版無摳圖功能
http://jingyan.baidu.com/article/adc81513301eb9f722bf737b.html

 

但願在前端開發這條路上越走越遠，作一個牛逼的攻城獅