前端笔记0001：从今天开始学前端，前端的主要构成

学习是人类进步的阶梯，有的时候为了获得更好的生活，我们要不断的学习。

互联网这些年发展的尤其快，有很多人对于亲手缔造一个属于自的网站或者属于自己的app非常感兴趣，但是没有什么途径去学习，上网一搜一大片的教程又让人挑花了眼。

信息大爆炸给人们带来了众多的学习资源，但往往铺天盖地的学习资源又让很多怀抱着学习梦想的人无所适从，看到一个行业竟然要学那么多技术，顿感力不从心，没有一个系统的学习路线很容易让一个满怀希望的人失去信心。

其实我是一个小白前端，这几天一直很焦虑，家里的事儿，工作的事儿，技术的事儿搞得我有些焦头烂额，为了平复一下内心，所以想写一写文字，平静一下内心。

接下来我会跟大家分享一下前端的一些内容，大神就请绕道走吧，谢谢。

什么是前端？为了给大家一个直观的印象（不要抠字眼啊），我就这么说了：你看到的电脑网页，手机浏览的页面等等，呈现在你面前让你能看到的页面就是前端开发出来的。

那么前端究竟做了什么呢？就是整体的页面结构，包括标题啊，头像啊什么的在页面的位置，某个地方有个按钮啊，评论啊等等，那么页面上你看到的信息呢？有一些写死的信息是前端直接写在代码里的，而另一些则需要后台通过接口传递给你。（这些后面会说到）

今天我们说基础的前端构成。

你所有看到的页面基本上包含三种文件类型：HTML，CSS，JS。

网上开发工具有很多，比如sublime，hbuilder，webstrom等等，今天我就用hbuilder来给大家演示一下：

第一步：下载安装开发工具（直接网上搜就可以）

第二步：新建一个项目

新建web项目

填写你的项目名称及选择存储位置

点击浏览选择你项目存储位置，为了方便存在桌面上

这样，在左侧就能看到你的项目了

你的项目构成

index.html就是你的网页主体，现在只有主要结构，但是没有内容，在电脑上打开，是个空白页面

页面上这样的结构叫做双标签，还有一种结构叫单标签，尖括号内的英文单词代表着不同的含义，比如：代表着头，代表着身体，也是你页面上所有展示内容的地方。

接下来我们为项目起个名字，并在页面上放一些东西：

先安装一个Chrome浏览器，在代码里写上这些内容，然后点击红框

这就是我们刚才在代码里写的东西在电脑上的样子

很丑对吧？比如说盖房子，我们现在是毛坯房，接下来装修一下：

点击css右键新建一个css文件

起一个index名，为了方便对应

接下来将我们新建的css文件引入到我们的html文件中

用一个

单标签引入，href后边是我们的css文件位置

link标签一般写在双标签之间

为我们的网页内容写一些样式，让他们好看一点：

*{}代表着整体属性，在{}写的样式在整个页面都会生效，我们在里边的内容的含义是让整个页面上下左右没有空隙，（这些样式以后会说是什么意思）

其中*和header，我们称之为选择器，*代表着全局，header是我们在index.html中写的标签名（就是尖括号中间的英文单词），依靠这些选择器，我们可以定位到我们要修改样式的位置

在这个例子中我们修改了标签的样式，根据英文单词的意思可以看出，我们设置宽度为整个页面的100%，高度是50px，这个px我们可以这么理解：现实生活中我们说的单位是米啊，厘米啊什么的，但在显示屏上我们我们说的单位就是px（像素），当然还有其他的，我们目前先说这一种。行高50px，字体大小20px，字体颜色白色（可以写英文单词white）,背景色如图所示，text-align代表的是文字内容如何在header这个容器里展示，我们选择了center表示居中显示，接下来让我们看一下效果：

是不是稍微好看了一点？其他部分也可以通过css来改变它的样子。

如果有人闲着没事儿想学学，请回复我，那我明天继续跟大家分享一下js的用途。

刚开始会像这样有点啰嗦，过一段时间等大家都大致了解了，我们的速度会快上很多，就这样吧。