-
Notifications
You must be signed in to change notification settings - Fork 0
/
p-00001.html
125 lines (124 loc) · 13.7 KB
/
p-00001.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>从零开始如何系统学好前端开发基础?</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/question.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css">
</head>
<body>
<div class="top">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container f21">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">校园虚拟社区</a>
<!-- 判断登录状态 -->
<!-- 未登录 -->
<span class="login-in "><a href="login.html" >登录 </a><i class="icon iconfont"></i></span>
<!-- 已登录 用户名 相关消息数-->
<span class="user"><a href="#">用户名</a><a href=""><span class="item">4</span></a><a href="#">登出 </a><i class="icon iconfont"></i></span>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="question.html">技术研讨</a>
</li>
<li>
<a href="video.html">精彩视频</a>
</li>
<li>
<a href="announce.html">校园公告</a>
</li>
<li>
<a href="weibo.html">趣味微博</a>
</li>
<li>
<a href="index.html#program">创意项目</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 article-page">
<div class="title-img text-center">
<img src="http://img.pptstore.net/pptpic/00/21/6d0d871565a2c679_middle.jpg" alt="thumbnail">
</div>
<h1>从零开始如何系统学好前端开发基础?</h1>
<div class="author-info">
<img src="http://img1.2345.com/duoteimg/qqTxImg/2013/12/ns/18-024824_754.jpg" alt="">
<span class="author">Zamrony</span>
<span class="time">9-Jul-15 9:31am</span>
</div>
<section>
<p>web前端开发基础,主要是学html和css。为什么我只讲系统学习基础知识呢,因为我觉得,对于零基础的学员来说,学好了基础知识,就相当于为高楼大厦打下了坚实的地基。系统学习了基础知识,再去学更高级的知识功到自然成。反之,基础没有打牢,再坚固的大厦也屹立不了多久。首先分享一下我的经验:</p>
<p>想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整。新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁。在这里一定要对自己做分析,然后找出一种适合的学习方法。下面,我为大家分享一个从零开始如何系统学好前端开发基础的路径。</p>
<h2>理论知识 包括“软知识”和“硬知识”</h2>
<p>“软知识”和“硬知识”大家可能觉得词陌生,其实我一说大家就能明白。</p>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152119217207735.png">
<h2>HTML的学习</h2>
<p>超文本标记语言(HyperText Mark-up Language简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。因此,我们必须掌握HTML的基本结构和常用标记及属性。</p>
<p>HTML的学习是一个记忆和理解的过程,在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果,在“代码”视图中学本质,将各种视图的优势发挥到极致,这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味,想必对各位初学的小盆友们来说必定是极好的!</p>
<h2>CSS的学习</h2>
<p>CSS是英文Cascading Style Sheets的缩写,叫做层叠样式表,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的,这样就极大地提高了我们开发的速度,降低了维护的成本。</p>
<br>
<p>同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习,我们就可以顺利完成“一幢楼房”的建设。</p>
<p>“楼房”建设完成之后,我们可以交给用户使用,但是如果想让用户获得更佳的体验,我们还可以对“楼房”进行更深一步的“装修”,让它看起来更“豪华”一些。这就要求我们开始学习js和jq,关于如何系统学习js和jq,在以后的文章中,我会提到。捉急的,可以私信我。</p>
<p>所谓“软”的就是能在各个程序开发中都用到的,算是基本功、内功,例如数据结构、算法、设计模式、面向对象等等;</p>
<p>所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法,此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面:http标准、W3C标准和ECMAScript标准;</p>
<h2>聊一聊web前端开发中的“硬知识”</h2>
<p>“软知识”的内容非常多,也是我们大学时代学习的重点(没学好是另回事儿,毕业再恶补)。我们本次主要讨论的是web前端这一个方向,因此就点到为止,让大家知道这些知识也在知识体系中扮演重要角色。</p>
<p>刚才说道,硬知识有三个标准:http标准、W3C标准和ECMAScript标准,那咱们就挨个聊聊这三个标准。</p>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152129259385742.png">
<h3>http标准</h3>
<p> 为什么做web前端要了解http标准?——因为浏览器要从服务端获取网页,网页也可能将信息再提交给服务器,这其中都有http的连接。web系统既然和http链接有瓜葛,你就必须去了解它。</p>
<p>我的意见是:你不必去非常了解http的详细内容,但是你要了解web前端开发常用的一些http的知识——就是上图中我列出来的那些。当然,我知识列了一个纲,详细内容还得靠你自己去查阅(本文章讲的是知识框架,不会涉及任何知识点的详细内容)</p>
<p>关于这方面的知识,建议去查阅《图解http》这本书,浅显易懂的讲述了这些内容,我曾经也看过。</p>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152135018295393.png">
<h3>W3C标准</h3>
<p>如果说你只知道web前端的一个标准,估计肯定是W3C标准了(据我了解,貌似大部分人真的都只知道这一个标准)。它的内容非常多,看看www.w3.org/TR/这个页面。</p>
<p>写到这里让我想起了一句话:2/8原则——20%的功能满足80%的需求。我觉得这句话用到这里非常合适,我们在平时开发过程中根本用不到这么多东西。反而,你要把平时用的多的东西搞懂了。</p>
<p>下图的这些知识,我想不用再过多解释了,这就是我文章开发说的“三大块”(html、css、js)。现在你要知道,它们只不多是W3C标准的一部分,而W3C标准也只是web前端开发知识体系中的一部分而已。</p>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152147469705639.png">
<h3>ECMAScript</h3>
<p>有些人可能只知道javascript,而不知道ES——其实,js是在ES的基础上,为web浏览器做了一部分封装(增加了DOM操作、BOM操作等)。</p>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152152268299472.png">
<p>如上图中的这些概念,大家可能平时都在javascript中看到,其实他们是ES的内容。只不过javascript继承了ES的这些特性,并且javascript用的比较广泛,因此才会在js中讨论的多一些。</p>
<p>还是那个“2/8原则”。其实ES中的内容也非常多,而且更新很快,现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不懂原型、闭包和作用域,那就说明你还不完全了解ES,也就是不完全会用javascript。</p>
<h2>框架和类库</h2>
<p>前面已经描述完了web前端开发所需要的理论知识。如何实践呢?——不能蛮干——还得绕世界去看看,有哪些大牛已经为我们做出了如此多的贡献。用下面的这些类库或者框架,能大大提高你的开发效率。</p>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152159399381422.png">
<h2>编码开发</h2>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152213479853405.png">
<p>如果你专门做web前端,就不要在用vs了,当然要选择sublime。写html语句还用手动一条一条写吗?你得需要zencoding的协助,否则效率太差了。另外,针对html、css、js的压缩、合并、语法检查,文件的清除、复制这些操作,你还要手动去做吗?——你需要grunt或者gulp的帮助。如果你的系统中有比较多的js代码或者文件,请选择一个合适的模块定义规范——CMD / AMD请用git来帮助你做文件版本管理,最简单的就是使用github。调试、测试,也都有专门的工具,都是需要学的……</p>
<h2>运行环境</h2>
<img src="http://images0.cnblogs.com/blog2015/138012/201507/152219247359926.png">
<p>首先,你要知道web系统虽然大部分是在浏览器下运行,但是js可能会被运行在node环境。在浏览器环境下,最重要的两点是:web安全和性能优化。需要注意的纲要我都列出来了,如果想了解推荐两本书《白帽子将web安全》《高性能网站建设指南》</p>
<h2>Web前端的学习建议 </h2>
<p>最后给大家聊聊在学习Web前端中的一些建议和方法。</p>
<p>
“君子生非异也,善假于物也”,在学习的过程中还要多浏览一些优秀的网站,善于分析借鉴其设计思路和布局方法,见多方能识广,进而才可以融会贯通,取他人之长为我所用。
<p>同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面,另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码,“偷”也是一种技能!每个人的成长与基础不一样,结合自己的实际情况,在执行。还是重复一下,前端的核心是js,css不难,但需要来积累。对前端我是这么看的:</p>
<p>css就像一瓶酒,得品。</p>
<p>html,css总共就那些标签跟选择器属性什么的,但是要写一个有扩展性,健壮性或维护性的页面不容易。现在写页面基本条件反射,不是如何快速的完成,而是思考如果有界面需求修改,怎么在修改代码最少的情况下快速完成需求任务。这是对前端耐力,体力,智力的三重考验。</p>
<h2>人生就是一场梦,得做。</h2>
技术只是生活的一部分,曾经雄心斗志,如今低头写码。改变能改变的,接受不能改变的。人生有限,只争朝夕啊。人生学习的态度是:不急不躁,不快不慢。持之以恒,相信自己。不求能改变世界,但求能改变自己的生活。不求健步如飞,但求一步一脚印。感谢磨难,他使我们内心更为坚强。感谢挫折,他使我们不断的成长,感谢bug,他使我们的思维更加深邃。感谢前端,他使我们更加的相信,撑起一片天空需要十八般武艺。
<p>如果你还没有决定成为学那种IT技术,web前端开发是个不错的选择。现在互联网已经成为经济发展的基础设施了,不管互联网企业还是传统企业,都需要有一个展示自己牛逼形象的网站。所以web前端这块市场是相当大的,你也可以去各大招聘网站上看看,web前端开发工程师的薪资一般都比较高。而且我认为,web前端开发也是所有IT技术中比较简单的一种,非常适合零基础的学员学习。想问更多关于web前端开发技术的问题,可以关注我,或者发私信给我。</p>
</section>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>