软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> 如何快速入门前端?附资料下载 -> 正文阅读

[Web前端]如何快速入门前端?附资料下载


学习前端,前端就好比如盖房子~
html就充当了房子结构这部分,也是房子的基础。
css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是css
javascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript
例子可能不是很恰当,只是帮助大家有个初步的认识~


方法步骤、工具以及开发的案例展现
1、前端工具箱(dreamwear/sublime/Photoshop/SVN等)
[img]http://note.youdao.com/yws/res/436/WEBRESOURCE9f275c26b6814531b8da971e64238b6b
[img]http://note.youdao.com/yws/res/440/WEBRESOURCE8376c540dcddf667270579ebaa1ff4dc
[img]http://note.youdao.com/yws/res/438/WEBRESOURCEb3ee079eb43295fd03e436093af4b088
 
[img]http://note.youdao.com/yws/res/441/WEBRESOURCE7623553083eed2e62cb6629e576359ab
2、零基础入门(html,CSS)
前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置...
常用标签集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...绝对路径、相对路径、标签语义化、标签嵌套规范、SEO...
常用选择器&标签类型划分
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block..
浮动进阶
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件...
定位
relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度...
表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始...
兼容性问题处理
兼容性问题总结、浮动在IE6,7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式...
整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...
css3入门
transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角,盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属性、E:not(s)、E:target、E::selection、background-clip...
移动端布局
测试环境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断...
Animation和Transform
浏览器前缀、keyFrames、Animation调用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩放、translate位移、transform-origin、transform的执行顺序问题...
Bootstrap前端开发框架
Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具...
3.项目实战
PC端的企业网站布局(例:sony官网)
PC端的电商类网站布局(例:京东商城)
移动端常见页面布局(例:微信活动页/商城)
推荐图书:
[img]http://note.youdao.com/yws/res/466/WEBRESOURCE1320279d64bdee2010aeeb74dd418cb0
学习前端书籍自然不可少,这里给大家推荐《html 5与css 3权威指南》,虽然主要是讲解html5+css3,但倒也是一本好的入门书籍。该书比较系统,覆盖面也比较广。技术新颖,所有知识点都紧跟html 5与css 3的最新发展动态(html 5和css 3仍在不断完善之中);也有比较强的实战性(包含246个示例页面),不仅每个知识点都配有精心设计的小案例(便于动手实践),配合案例,也比较生动有趣。该书不仅能满足你全面而系统地学习理论知识的需求,还能满足你需要充分实践的需求。
本次还收集了一些视频资料,给大家入门学习
[img]http://note.youdao.com/yws/res/478/WEBRESOURCEad475f9f7199b1a8bca304e5e37decaf
下载链接: http://pan.baidu.com/s/1kUlwT19 (百度云盘)


个人认为学习前端可能又分为下面几个阶段;
  第一阶段——HTML标签的学习
   超文本标记语言(HyperText Mark-up Language 简称HTML),“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
html是一个网页的骨架,就好比是盖房子的结构~这也是前端页面的基础。试着想一下,如果一个房子连砖头和水泥都没有,后面的步骤又有什么意义呢?所以我们必须完全掌握HTML的基本结构和常见的标签,属性。有了一个好的开始,距离成功已经一小半啦~
关于HTML怎么记忆、学习?可能一上来死记硬背,也不会有太好的预期。而且还有可能被吓到?
“我去!这么多标签!怎么记得玩?”
个人感觉有两点可以尝试:
1,语义化的去记忆。比如ul li这个就是列表,button就是按钮,table就是表格。其实这也是html5所倡导的,语义化标签。
2,试着写一个一个小的demo,也许就只是一个列表,一个表格,或者一个按钮。也许写着写着你就懂了呢?
学习HTML就是要自己不断的去写,去尝试。看着自己的代码能跑起来,有了心目中的效果,这种心情还是很开心的!给大家推荐一个网站,w3cSchool,这里面有在线的代码编辑器。可以边写边看到效果~
  ok~学习完成html后,我们来到第二阶段——css
  去给我们的房子装修一番吧~


  第二阶段——CSS的学习
  CSS,层叠样式表——(Cascading Style Sheets),是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
  CSS看似比较繁杂,其实只要掌握了CSS中的盒子模型、定位、以及页面布局,就基本上掌握了大半啦~这时我们就以及能够对网页中各个元素进行精准的排版,做出符合我们意愿的网页啦!
关于CSS的各种属性,我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框,那就是“border”,那我们需要右侧边框做一些改变,那就是“border-right”。很明显,接下来按照我们的需求还有“右边框的宽度——border-right-with”,”右边框颜色——border-right-color”等等等,诸如此类~
完全就是我们需要什么,只要凭着需求去寻找。
  说完装修,我们终于要给房子打造一些功能啦~follow me~


  第三阶段——JavaScript
  JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
简单来说,javascript是一个可以运行在浏览器上面的语言(当然现在基于一些库/框架已经远不只是在浏览器上了),它可以操控浏览器,让浏览器听从我们的命令。这有点像一个电视剧和遥控器,而javascript就是我们的遥控器。浏览器根据javascript的指令,做出相应的反馈。比如操作DOM(也可以理解成为操作HTML),可以操作CSS。有了javascript就可以让我更加灵活&动态的操控HTML,CSS.
严格来说、HTML和CSS还算不上真正的“语言”,而javascript却是如假包换的脚本型语言,既然是语言,那就会有字符串,数组,对象等等。而我们的javascript可以处理这些与数据有关的工作,比如给数组排个序,去个重等等。
而我们依靠javascript可以做些什么呢?网页上常见的轮播图,网站的注册功能,提交我们的留言,刷新获取新闻等等。当然,我们强大的javascript远不止此啦~以后再为大家深入介绍~
然而因为历史原因,比如我们灰常“尊敬”的 IE 浏览器~出了一套自己的javascript标准,没有和主流javascript标准兼容啊!!作为一个前端er是不是应该把更多精力用在有意义的地方呢,而不是解决兼容。。。
所以,似乎我们还需要一个利器,来让我们更快速的开发~没有错,这就是我们的——jQuery!


  第四个阶段——jQuery
   jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
如果继续用盖房子做例子,jQuery更像是一个装修队。我们只需要关注我们的房子设计本身,把我的想法,理念告知这个装修队,让它来给我们处理那些杂七杂八的事情。比如会不会吵到邻居?怎么协调物业?干活总得有人手的,对吧...
  jQuery的优点我就不挨个说啦,一句话,jQuery是你更上一层楼的利器,也是我们前端er一大利器!


  Web前端学习小建议
这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~
在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手。在写一个网页之前,建议先琢磨几分钟,不要上来就写。多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划。可以先把最外层轮廓写好,先不着急去写某一个具体的部分。
这里给大家分享一些小技巧:
1、使用reset.css
火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。(可以去网上找一下,很多的)
2、CSS缩写
CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。
不是像这样创建CSS
.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
 
}
而是像这样创建CSS
.header {
  background: #fff url(image.gif) no-repeat top left 
}
3、理解class和id
这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。
4、实用的<li>
<li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。
5、少用<table>多用<div>
CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会 被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。
6、CSS调试工具
在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:比如FireFox Web Developer、DOM Inspector、Firebug等
7、!Important
所有被!important 标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。
.page {
  background-color:blue !important;
  background-color:red;
}
比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。
牢记以上小技巧,也许你的css技能突然就起飞了呢?
关于javascript的一些小技巧,下次我再整理给大家~一次性看太多,大家是不是也有点晕?
学习前端需要方法,更需要一颗平常心,不要把前端想的多难,需要吃什么苦。。。既然学习这么痛苦,为什么不快乐一点学呢?
anyway~希望大家可以成为一个优秀的前端er!
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-26 10:44:41
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --