0基础web前端学习路线

买了一些前端入门书籍,好像也看不太明白?看了好多视频教程似乎也是似懂非懂?如果你现在是初学前端,入门的话,可以看看下面内容……或者有一点帮助学习前端,前端就好比如盖房子html就充当了房子结构这部分,也是房子的基础。css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是cssjavascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript例子可能不是很恰当,只是帮助大家有个初步的认识

1.前端工具(dreamwear/sublime/editplus/SVN)
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端的电商类网站布局(例:京东商城)移动端常见页面布局(例:微信活动页/商城)
个人认为学习前端可能又分为下面几个阶段

第一阶段——HTML标签的学习

超文本标记语言(HyperText Mark-up Language 简称HTML),“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

html是一个网页的骨架,就好比是盖房子的结构~这也是前端页面的基础。试着想一下,如果一个房子连砖头和水泥都没有,后面的步骤又有什么意义呢?所以我们必须完全掌握HTML的基本结构和常见的标签,属性。有了一个好的开始,距离成功已经一小半啦

关于HTML怎么记忆、学习?可能一上来死记硬背,也不会有太好的预期。而且还有可能被吓到?
“我去!这么多标签!怎么记得玩?”
(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

个人感觉有两点可以尝试:

  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也会比较顺手。在写一个网页之前,建议先琢磨几分钟,不要上来就写。多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划。可以先把最外层轮廓写好,先不着急去写某一个具体的部分。

这里给大家分享一些css小技巧:

  1. 使用reset.css火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。(可以去网上找一下,很多的)
  2. CSS缩写CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。
    不是像这样创建CSS
    css 代码效果预览
1
2
3
4
5
6
7
.header {
}

而是像这样创建CSS
css 代码效果预览

1
2
3
.header {
}
  1. 理解class和id这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。
  2. 实用的<li><li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。
  3. 少用<table>多用<div>CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会 被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。
  4. CSS调试工具在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:比如FireFox Web Developer、DOM Inspector、Firebug等
  5. !Important所有被!important 标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。
    css 代码效果预览
1
2
3
4
.page {
}

比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。牢记以上小技巧,也许你的css技能突然就起飞了呢?关于javascript的一些小技巧,下次我再整理给大家。一次性看太多,大家是不是也有点晕?

学习前端需要方法,更需要一颗平常心,不要把前端想的多难,需要吃什么苦。。。既然学习这么痛苦,为什么不快乐一点学呢?~希望大家可以成为一个优秀的前端er!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,331评论 24 450
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,464评论 1 19
  • 情人节到了,与情人节联系起来的莫过于鲜花和巧克力。今天看看十大品牌巧克力之一的瑞士莲。瑞士不仅有钟表、军刀其实...
    ouzar阅读 3,037评论 1 1
  • 手机刷微博,无意间找到了她的,翻看着。4年前的一条微博突然的就震撼了自己:“我知道你胃疼,躺在床上睡不着,但此时的...
    圈圈城阅读 428评论 0 0