当前位置:网站首页 / 1.零基础学网页前端 / 正文

1-3.新手学习前端顺序参考

时间:2015年03月15日 | 作者 : daPeng | 分类 : 1.零基础学网页前端 | 浏览: 5827次 | 评论 0

上网的人越来越多,学习网站的人也相应多起来了。今天我们来探讨一下网站学习的问题。

一、网站后台和网站前端

顾名思义,网站后台就是网站的幕后,网站前端就是我们平时浏览网页时候所看到的页面。网站管理员通过网站后台更新和发布信息,我们通过浏览器访问页面前端去获取信息。

网站后台和网站前端实现需要不同的代码。但是无论你我学习前台还是后台,网站前端的html、css都是我们学习网站的基础。毕竟无论后台语言采用哪种,最终都是会自动生成HTML代码并返回给浏览器。不信,可以随便在一个网站上鼠标右键查看网站源代码,从里面你永远无法知道我这个网站的后台是如何实现的(看不到任何一丁点的后台语言代码)。

二、网站前端的学习顺序?

网站前端网上学习的资源很多,那么新手们该如何下手?这里仅提供一个参考,各人当然可以有各人自由的选择:

  1. 首先阅读建立网站的根目录,学习如何建立自己网站的根目录和运用记事本或下载第三方软件建立网页文件。

  2. 接着阅读网页的编码,学会正确选择编码以避免中文乱码。

  3. 购买或使用书籍、视频资源进行学习,打好基础。笔者这里推荐一个学习网站w3school学习HTML。但要注意一边看一边敲代码(输入保存,然后才可以看效果)一边打开浏览器(不用每次打开,同一个页面F5刷新看最新效果)查看效果。注意,不要太细,不要把每个标签每个属性都了解得十分透彻,大概知道他有这个标签,这个标签有什么用就可以了。不要死记硬背。(红色框部分可以先不看,就是HTML对象,速查手册,实例/测验/总结/参考手册那里),特别HTML5部分,对于初学者建议先不要学,等到有一定经验,熟悉HTML后再去正式接触,开始时候先学会基本用法(CSS3也是如此)。

    QQ截图20150315155057.png

    QQ截图20150315145021.png

  4. 看完HTML的,看w3school学习XHTML。XHTML其实和HTML差不多,只是语法上更严谨,更标准。

  5. 看完XHTML,接着学CSS。CSS的学习链接如下:学习CSS。CSS的学习顺序请参见我下面的图(先看css简介,再看CSS创建并且创建外部CSS文件,在html的head标签上用link标签引用该CSS的路径,然后再看基础语法以及各个选择器,之后就一直按照网站给定顺序继续吧。)(有关路径的写法请参考我前端第四篇文章:相对路径和绝对路径)

    温馨提示:

    (1)为什么要使用外部文件?这是因为web标准中结构、表现、行为分离(意思就是HTML专注表现内容,CSS专注样式风格设置,Javascript或Jquery专注行为的设定,一网页三文件分离,内容不杂合一起)。

    (2)注意,学习过程中,要一边看一边敲代码,一边看效果。

    2015-03-15_150344.gif

  6. 学习Bootstrap前端框架。Bootstrap前端框架笔者最喜欢他的地方是他的响应式布局,移动设备优先的原则还有就是Javascript/Jquery效果的封装(插件)。熟悉使用他的朋友可以比较快的制作前端网站和使用上动画交互效果。学习Bootstrap需要html和css基础,但是不需要js基础(只是懂怎么用就可以了)。当然你如果要改成自定义效果还是要懂的,至于html,css那些也是可以根据自己需要进行改动的。(该项目不是必学,只是笔者推荐,大家可以自由选择)。

  7. JavaScript。可以为网站添加动画,动态改变HTML内容等。学习网站:学习javascript

  8. Jquery。Jquery是JavaScript的封装库。通过他可以更简单地为网站添加动态交互效果。它和Javascript实现的效果其实几乎一样,只是更简单而已。学习网站:学习jquery

  9. ajax。ajax是网站的局部刷新。就是不用刷新网站页面就可以自动加载更多的新数据出来。学习网站:学习ajax

网站学习是一个细水长流的过程,切勿心浮气盛。如果学习过程中,遇到什么问题,欢迎在评论区域写出来,也可以加入我们的群进行咨询。群链接在首页的融入我们模块。


上一篇:2-6.体验式学习(快速建站)——PHP可以做什么,PHP有什么用
下一篇:2-1.新手学习后台程序(这里只说PHP)顺序参考?

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。