认识大前端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/

 

posted @ 2017-09-20 16:17  骑码行天下  阅读(1464)  评论(0编辑  收藏  举报