前端傻瓜式入门No.1
2016-09-08 21:53
204 查看
本文总结一些自己前端学习中的想法与收获,适合新手程序员入门前端与纠正我的错误并与我探讨,也欢迎大牛们的指点。
Part 1:
什么是前端?
个人理解的前端,目前还处于比较低级的层次,就是写页面呀。按照设计图构建出相符的页面,添加应有的动画效果,接收一些后台传过来的数据并显示在网页上。
接着我们当然要严格要求自己,完善自己的作品啊。比如我们应该看我们做出的网页在各种浏览器上能不能按照预期的效果显示出来,因为有的浏览器可能读不懂我们写的部分代码,如果它们读不懂我们就应该写出它们能读懂的代码。同时我们也要追求一蛤代码的优化,使自己的网页能够尽快的打开(说是一个网页最好能在2s内打开),我们的代码也要写的优雅,便于浏览器的读写,我们自己的读写与其他程序员的读写。
比较深层次的前端,我还没有接触到,像js的原型链,闭包什么的,我还没有学习使用过。对于node.js,angular等技术,也在我的学习清单上,会在业余时间好好研究。
我的目标就是成为一个优秀的前端。
Part 2:
开始 html!
前端的开始就是自己写一个html网页吧。
这就是我的第一个页面。
其实感觉编程就像小时候玩的搭积木,想要完成一个完整的网页,我们就要在相应的位置放上相应的积木。
整个网页是放在一个叫<html></html>的大积木块里,这个大的积木块由一个叫<head></head>和一个叫<body></body>的积木块构成。
head部分主要就是一些网页的信息背景,大概可以理解成这个积木的名字,采用的形状规范等一些信息。
body部分就是显示在我们眼前的网页主体,这部分需要显示成什么样的,我们就用不同的积木块来搭建它,这些积木块就是我们所说的html标签。这些积木块有不同的大小形状用途,具体可以参照w3cschool的html教程,需要怎样的积木就去查它的名字,然后把它拼到我们的body大积木块中。
Part 3:
css 美化!
之前我们所写的html页面,我们所搭建的积木,因为默认的积木块是只有默认的样子的,大多数都没有颜色,有的必须独自占一行,不让别的积木块跟它在一起,基本上大多数的积木块都不会再我们所期望的位置和颜色。这时候我们就需要css,它的学名就叫做层叠样式表。
更形象的形容css的话,我觉得应该是一套可以给积木涂颜色,修改积木大小,修改积木属性的工具箱。
我们先通过一个叫选择器的东西选取到我们要改它样式的积木块,不用觉得选择器什么的很高端,之前的html标签,也就是我们的小积木块,我们都可以给它们自己的名字,赋予它们id或者class,选择器就是通过.class名或者#id名,获得它,可以这样理解:诶,那个id叫h1的积木过来,我要改你的形状,诶,那个class叫xxx里面的class叫***的积木过来,你也要被涂点颜色,之类的。
通过选择器获取到标签之后,我们就可以改它的各个属性。
width改它的宽度,height改高度,border给它边框,background给它背景颜色,等等,各种属性同样也可以在w3c的css教程里找到。
css还需要注意的就是盒子模型,定位的概念。这个我准备再写一篇专门介绍一蛤,这两样东西主要就是确定我们的小积木块在我们大积木块中的位置,可以让我们想要的东西在我们想要的地方显示出来。
css的引用也是要学一蛤的地方,有3种引用的方法,一种是在每个标签里使用,一种是在网页的头部使用,一种是在外部写好后引入,w3c的教程也有讲的很清楚。
基本上掌握了html和css,就能写出简单好看的静态页面了,有兴趣的同学可以试试做一蛤百度首页,有不会的地方就百度。应该还算是挺简单的。自学能力和解决问题的能力也是一个程序猿非常重要的地方。
未完待续.....
Part 1:
什么是前端?
个人理解的前端,目前还处于比较低级的层次,就是写页面呀。按照设计图构建出相符的页面,添加应有的动画效果,接收一些后台传过来的数据并显示在网页上。
接着我们当然要严格要求自己,完善自己的作品啊。比如我们应该看我们做出的网页在各种浏览器上能不能按照预期的效果显示出来,因为有的浏览器可能读不懂我们写的部分代码,如果它们读不懂我们就应该写出它们能读懂的代码。同时我们也要追求一蛤代码的优化,使自己的网页能够尽快的打开(说是一个网页最好能在2s内打开),我们的代码也要写的优雅,便于浏览器的读写,我们自己的读写与其他程序员的读写。
比较深层次的前端,我还没有接触到,像js的原型链,闭包什么的,我还没有学习使用过。对于node.js,angular等技术,也在我的学习清单上,会在业余时间好好研究。
我的目标就是成为一个优秀的前端。
Part 2:
开始 html!
前端的开始就是自己写一个html网页吧。
这就是我的第一个页面。
其实感觉编程就像小时候玩的搭积木,想要完成一个完整的网页,我们就要在相应的位置放上相应的积木。
整个网页是放在一个叫<html></html>的大积木块里,这个大的积木块由一个叫<head></head>和一个叫<body></body>的积木块构成。
head部分主要就是一些网页的信息背景,大概可以理解成这个积木的名字,采用的形状规范等一些信息。
body部分就是显示在我们眼前的网页主体,这部分需要显示成什么样的,我们就用不同的积木块来搭建它,这些积木块就是我们所说的html标签。这些积木块有不同的大小形状用途,具体可以参照w3cschool的html教程,需要怎样的积木就去查它的名字,然后把它拼到我们的body大积木块中。
Part 3:
css 美化!
之前我们所写的html页面,我们所搭建的积木,因为默认的积木块是只有默认的样子的,大多数都没有颜色,有的必须独自占一行,不让别的积木块跟它在一起,基本上大多数的积木块都不会再我们所期望的位置和颜色。这时候我们就需要css,它的学名就叫做层叠样式表。
更形象的形容css的话,我觉得应该是一套可以给积木涂颜色,修改积木大小,修改积木属性的工具箱。
我们先通过一个叫选择器的东西选取到我们要改它样式的积木块,不用觉得选择器什么的很高端,之前的html标签,也就是我们的小积木块,我们都可以给它们自己的名字,赋予它们id或者class,选择器就是通过.class名或者#id名,获得它,可以这样理解:诶,那个id叫h1的积木过来,我要改你的形状,诶,那个class叫xxx里面的class叫***的积木过来,你也要被涂点颜色,之类的。
通过选择器获取到标签之后,我们就可以改它的各个属性。
width改它的宽度,height改高度,border给它边框,background给它背景颜色,等等,各种属性同样也可以在w3c的css教程里找到。
css还需要注意的就是盒子模型,定位的概念。这个我准备再写一篇专门介绍一蛤,这两样东西主要就是确定我们的小积木块在我们大积木块中的位置,可以让我们想要的东西在我们想要的地方显示出来。
css的引用也是要学一蛤的地方,有3种引用的方法,一种是在每个标签里使用,一种是在网页的头部使用,一种是在外部写好后引入,w3c的教程也有讲的很清楚。
基本上掌握了html和css,就能写出简单好看的静态页面了,有兴趣的同学可以试试做一蛤百度首页,有不会的地方就百度。应该还算是挺简单的。自学能力和解决问题的能力也是一个程序猿非常重要的地方。
未完待续.....
相关文章推荐
- 前端傻瓜式入门No.2
- 前端神器avalonJS入门(三)
- web前端入门:使用jQuery操作元素的属性与样式
- React前端开发入门与实战案例
- 前端入门之小马哥带领
- nodejs前端模板引擎swig入门
- 前端构建工具gulp入门教程
- web前端html快速入门
- 【从入门到放弃】WEB前端之HTML+CSS基础02
- 我的前端入门之html标签
- Web前端从入门到精通-5 css简介——css概述和选择器
- [前端] nodejs之express框架和ejs模板引擎的入门
- Struts学习傻瓜式入门篇
- 前端技能路线详解:真正的从入门到放弃
- java入门、java学习必读,WEB前端学习路线
- 前端笔记----jquery入门知识点总结 (转)
- openresty 前端开发入门三之JSON篇
- Web前端开发入门需要知道的
- 前端之Android入门(4):MVC模式(中)
- web前端入门的几个学习姿势和三个千万要不得的障碍学习想法