你还在为学习web前端而烦恼吗?其实你真该看看这个

作为web前端的小白,以下这些你了解后可能会让你对web前端有更生的认识

第一阶段——HTML标签的学习超文本标记语言(HyperText Mark-up Language 简称HTML),“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序以及视频等非文字元素。

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

关于HTML怎么记忆、学习?可能一上来死记硬背,也不会有太好的预期。而且还有可能被吓到?

“我去!这么多标签!怎么记得玩?”

个人感觉有两点可以尝试:语义化的去记忆。比如ul li这个就是列表,button就是按钮,table就是表格。其实这也是html5所倡导的,语义化标签。

2,试着写一个一个小的demo,也许就只是一个列表,一个表格,或者一个按钮。也许写着写着你就懂了呢?

学习HTML就是要自己不断的去写,去尝试。看着自己的代码能跑起来,有了心目中的效果,这种心情还是很开心的!给大家推荐一个网站,w3cSchool,这里面有在线的代码编辑器。

第二阶段——CSS的学习CSS

层叠样式表—— (Cascading Style Sheets),是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对 网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文 本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。CSS看似比较繁杂,其实只要掌握了CSS中的盒子模型、定位、以及页面布局,就基本上掌握了大半啦~这时我们就以及能够对网页中各个元素进行精准的排版,做出符合我们意愿的网页啦!

关于CSS的各种属 性,我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框,那就是“border”,那我们需要右侧边框做一些改 变,那就是“border-right”。很明显,接下来按照我们的需求还有“右边框的宽度——border-right-with”,”右边框颜色—— border-right-color”等等等,诸如此类

第三阶段——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是一个兼容多浏览器的 javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开 发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用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、实用的也叫链接列表,是用在导航菜单样式上。

5、少用多用CSS最大的优势之 一是使用达到样式上的灵活多变。不同于里的中内容不会 被锁在单元 格。可以说几乎所有的表格布局都可以在和样式的正确使用下完成。当然,有大量表格内容时,还是 用 吧。

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不支持。

5

牢记以上小技巧,也许你的css技能突然就起飞了呢?关于javascript的一些小技巧,下次我再整理给大家~一次性看太多,大家是不是也有点晕?学习前端需要方法,更需要一颗平常心,不要把前端想的多难,需要吃什么苦。。。既然学习这么痛苦,为什么不快乐一点学呢?anyway~希望大家可以成为一个优秀的程序员!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180119A00SE600?refer=cp_1026

扫码关注云+社区