認識大前端html+css+js

認識大前端：前端就是將效果圖生成網頁，利用html+css+js等技術。

       若是把前端比做一臺汽車，那麼html就是車的骨架，css就是完整的車的模型，而js就充當着車的發動機...

建議：   剛剛開始學的話，html，css，js時間要合理分配；博主的時間的分配是這樣html2天，css7天，js基礎3天，博主的僅供參考，具體時間還要看你本身的學習進度。

作前端沒一個好的瀏覽器是不行的：

                   

建議每一個人都下一個火狐或者谷歌，博主用着還不錯，不要忘記把它設置成默認瀏覽器。

有了一個好的瀏覽器，就必須有個好的開發工具：

                                                     

                                                                                                   Dw  歷史悠久，設計師使用。

                                                                                        Sublime   輕量級    有不少好用的插件。

                                                                                            Webstorm  重量級    太過智能。

剛剛入行的話，先使用第二個sublime，簡便輕巧，到熟悉以後就建議使用WebStrom了，博主在下面附下網盤地址，須要的自行下載：

sublime:連接: https://pan.baidu.com/s/1o8hx0Iu 密碼: wqbu    沒有安裝條件，按要求安裝便可！

WebStrom：連接：  https://pan.baidu.com/s/1dFNDopr  密碼：vsah  這個是安裝的壓縮包

                     連接：  https://pan.baidu.com/s/1i5b2aUD  密碼： x9tg  這個是安裝教程

 

sublime的快捷鍵：

              

Html:xt+tab

Html結構代碼

                    

tab	補全標籤代碼
Ctrl+shift+d	快速複製一行
Ctrl+shiif+k	快速刪除一行
Ctrl+鼠標左鍵單擊	集體輸入
Ctrl+h	查找替換
Ctrl+f	查找
Ctrl+/	註釋
Ctrl+L	快速選擇一行
Ctrl+shift+↑（↓）	快速上移（下移）一行
F11	全屏

 知道以上幾點快捷鍵就差很少了，若是還想知道更多的快捷鍵就看，sublime快捷鍵使用： http://blog.csdn.netdetails/11530751

WebStrom的快捷鍵：

      ctrl+c        複製
      ctrl+v        粘貼
      ctrl+x        剪切一行或刪除一行
      ctrl+d        複製本行到下一行
      ctrl+z        退回以前操做
      ctrl+shift+z    已經作好的退回以後的下一步
      ctrl+a        全選
      ctrl+/         註釋行
      ctrl+shift+/    註釋選定區域
      ctrl+g        查找行號
      ctrl+shift+up/down    上下移動代碼
      table        補齊代碼
      ctrl+f        查找文本

html+css+js：

 

補充：學習資料百度網盤地址,須要的朋友自取

連接: https://pan.baidu.com/s/1qOZm348vori1SrQE_0bTzw 提取碼: e5ca 

 

附加：http://www.ofmonkey.com/   （程序員在線工具）

 

附上我作的一個頁面的小樣：

   因爲太佔文本，我就取了一小部分，想要獲取源代碼，請在文章下面留言！

  

 

 

博主的知識產權，寫着也辛苦是吧，轉載請註明出處：http://www.cnblogs.com/hejun

 

 

 

       博主學了不少年，一直想找個記錄本身學習過程的地方，就忽然想註冊一個博客，把本身想寫的東西給寫進去，能幫本身留有一個屬於本身的地方，也但願能幫助到須要幫助的人，因爲是第一次寫，寫的很差的地方請多擔待一下，仍是須要咱們共同進步，博主有什麼錯誤的地方，也但願網友們指出，博主才能更正本身的錯誤，以爲博主寫的還能夠的，關注一下博主，之後博主有什麼更新的地方，還須要你們檢閱，查找錯誤，也但願能有幫助到大家的地方,謝謝！

 

附加：http://www.jq22.com/   最新的jq插件庫

    http://www.lvyestudy.com/  學習地址

附加：

bootstrap , Element-UI，Mint-UI , Ant-Design,animate.css等組件庫； 

 

附加：

 http://mes.gitwms.com/    帳號：administrator 密碼000000

         

 項目上線清理緩存：在服務器端作了更新，瀏覽器使用的還是緩存在本地的js文件，除非強制清緩存（ctrl+F5)。可是用戶並不會去清理緩存，因此前端須要來清理緩存：

1.添加隨機數：

document.write("<link rel='stylesheet' href='css/index.css?random=" + Math.random() + "' />");
document.write("<script type='text/javascript' src='js/index.js?random=" + Math.random() + "'></s" + "cript>");

2.加上版本號：

<link rel="stylesheet" href="css/index.css?v=1.0.0" />

 

前端UI庫推薦（pc和移動）

 

1. pc 端

 

1. elementUI （生態強大，樣式生硬）
2. iview （推薦，組件豐富）
3. bootStrap
4. layUI
5. easyUi

 

2. 移動端

 

1. mintUI
2. ant-design
3. vonic 
4. vux
5. Muse-ui
6. VantUI

博客園公開api地址：http://openapi.cnblogs.com/