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

struggle_LZ發表於2018-05-19
Web前端筆記

從今天開始，本人就要學習WEB前端了。

經過老師的建議，說到他每天都會記錄下來新的知識點，每天都是在圍繞著這些問題來度過，很有必要每天抽出半個小時來寫一個知識總結，及時對一天工作的一個小結，

也是對自己知識的一個梳理，之前特別喜歡記在本子上，不過長期的不用，就會發現記在本子上很容易就忘，所以後面開始寫部落格。首先，它並不單單是對自己的一些技術心得

的總結亦或是一些技術討論，更重要的是對自己不斷學習提高的一種要求和檢驗，一種技術沉澱。其次，通過技術部落格我們可以彼此分享一些技術經驗，讓有類似問題的同學不

在迷茫。同時老師也建議我們這樣做，我感覺這樣非常好，因為我本身就是一隻小小小小鳥————菜鳥，就是0基礎，而課堂那短短的幾個小時並不能教得了多少，所以更需

要自己多多查詢資料和及時通過總結成筆記加深印象來使自己成長，但是筆記總結只寫給自己看，總覺得實在達不到提高的目的。因為自己看不到自己需要提高的地方，只有不

斷分享，讓別人指點，甚至捱罵，才能瞭解不足。所以希望我以後能夠堅持下來認真寫部落格，並且能得到大家的指點。

我的座右銘是：每天進步一點點，每天成長一點點。


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

● 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瀏覽器
市面上有很多的瀏覽器，一些不太規範的瀏覽器在顯示效果上面可能和其他的瀏覽器會有差異。針對這種情況，我們需要做到統一。也就是相容。


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只用了十幾次，很多快捷鍵還不知道，不過你們喜歡用這個的話可以百度一下的。



相關文章