天天成長一點---WEB前端學習入門筆記

WEB前端學習入門筆記

　　從今天開始，本人就要學習WEB前端了。
　　通過老師的建議，說到他天天都會記錄下來新的知識點，天天都是在圍繞着這些問題來度過，頗有必要天天抽出半個小時來寫一個知識總結，及時對一天工做的一個小結，也是對本身知識的一個梳理，以前特別喜歡記在本子上，不過長期的不用，就會發現記在本子上很容易就忘，因此後面開始寫博客。首先，它並不僅僅是對本身的一些技術心得的總結亦或是一些技術討論，更重要的是對本身不斷學習提升的一種要求和檢驗，一種技術沉澱。其次，經過技術博客咱們能夠彼此分享一些技術經驗，讓有相似問題的同窗不在迷茫。同時老師也建議咱們這樣作，我感受這樣很是好，由於我自己就是一隻小小小小鳥————菜鳥，就是0基礎，而課堂那短短的幾個小時並不能教得了多少，因此更須要本身多多查找資料和及時經過總結成筆記加深印象來使本身成長，可是筆記總結只寫給本身看，總以爲實在達不到提升的目的。由於本身看不到本身須要提升的地方，只有不斷分享，讓別人指點，甚至捱罵，才能瞭解不足。因此但願我之後可以堅持下來認真寫博客，而且能獲得你們的指點。
　　個人座右銘是：天天進步一點點，天天成長一點點。

好了，下面開始進入正題，今天老師講的內容很少，主要講一些WEB前端工程師的就業前景和發展方向之類云云，後面纔開始講了一點點前端切圖所需掌握的ps基礎知識。
課堂教的很少，下面都是我本身查閱資料和上網所得並總結的。

介紹一些我找到的有用的學習網站：

● 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+d 刪除所在行 = Shift+Backspace 刪除所在行，這個也是跟sublime很大不一樣啊
● ctrl+shift+→ 向右選詞，按多一詞可再選一詞而且無視中間符號
● ctrl+shift+A 選擇相同詞
● ctrl+alt+↑ 選中當前標籤全部內容，很是好用
● ctrl+【 選擇成對內容
● shift+home 選擇至行首
● shift+end 選擇至行尾
● Ctrl+home：跳到第一行代碼
● Ctrl+end：跳到最後一行代碼
● alt+↑或↓ 跳到上一個或者下一個文本輸入點，對於跳轉引號輸入內容頗有用
● ctrl+P 激活邊看邊改視圖
● ctrl+M 編輯器最大化
● ctrl+shift+B 設置斷點
● Ctrl+Backspace 刪除前一詞
● ctrl+shift+T 刪除當前標籤
● ctrl+alt+J 合併下一行
● ctrl+shift+F 整理代碼格式
● ctrl+↓ 向下移動行
● ctrl+L 選中當前行
● shift+enter 在html中快速插入<br />
● ctrl+shift+- 首字母大寫

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存儲，而顏色簡單對比強烈的則須要採用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

　　最後，引用學姐「閒雲遠岫」的一段文字以結束今天的博文筆記，後面但凡在網上看到哪些好的網站或者資源之類的，及時寫下來到博客上與博友分享；課堂上有什麼點滴體會，趕忙三言兩語記在本子上，空餘時間整理一下，發到博客上與博友交流；遇到什麼困惑，也寫到博客上，讓博友們爲我指點迷津；生活中的快樂，寫到博客上，讓博友們快樂着個人快樂；與同窗們之間的有趣故事，寫到博客上，讓博友們和我一同體驗學習之樂.....
　　哦，對了。我很喜歡看些有關前端的書，我也有些電子書資源和網站，後面會分享出來，各位若是有什麼好的網站或者資源，能夠的話分享出來最好不過了。就把網址放在下面評論也行，還有就是，過高深的就不要發了，最好是比較適合我一個新手看的最好。英文版什麼的就更不要了。