如何在学校自学前端？

现在越来越多的人从事计算机这个行业，可是现实远比想象中的要难很多，学会了一门技术并不代表你可以无忧无虑的工作了。但是大学是一个改变人生的一段美好时间，你可以努力学习，毕业之后不用为了找工作而奔波，你也可以得过且过，吃喝拉撒睡舒舒服服的过。不过现在所受的苦都是为了未来更好的生活。闲话说完，那么该如何学习前端呢？

前端入门并不难，一般大学计算机专业课也会略有涉及。前端开发最早是叫网页设计，主要的开发工具为DreamWeaver(大部分学校还在使用)，Fireworks,Flash，他们俗称网页三剑客。这个不多说，感兴趣的朋友自行百度了解，目前的主流的前端开发工具为vscode，HBuild，webstorm等，不过多介绍，各有各的好处，不过新手介意用sublime Text，因为他真的很小，普通办公电脑用起来也不会卡顿。

前端主要有三部分组成，HTML（结构），CSS（表现），JavaScript（行为）。一个页面需要一个结构，结构呢就和做房子时的地基一样哪里是厨房，哪里是卫生间，哪里是卧室，分成一块一块的；表现的就像是装修，多大，什么颜色，如何去装饰美化他；行为呢就是一个与用户的交互，你按下开关灯就亮了，你点击某个按钮就会有一个提示。

HTML由一个个的标签组成，div，p，h1-h6,a,span等等，分为两大类，一类为块状元素，一类为行内元素。

块状元素特点：

1. 独占一行，在默认情况下，宽度自动填满父元素宽度

2. 宽度和高度可以控制

3. margin和padding横向纵向设置都有效

4. 可以通过display: inline; 转换为行内元素

5. 除个别特殊元素外，可包含块状元素和行内元素

行内元素特点：

1. 不能独占一行

2. 宽高由内容撑开

3. margin和padding横向设置有效，纵向设置不产生边距效果

4. 可以通过display: block; 转换为块状元素

看不懂？？没关系，打开 开发者工具，输入<div>我是块状元素</div><div>我是块状元素</div><span>我是行内元素</span><span>我是行内元素</span>，然后用浏览器打开就可以看到他们的区别了。

这里给大家一个网站https://www.w3school.com.cn/html/index.asp，直接点击查看，可以在线提交测试代码，快捷方便，从头到尾跟着过一遍，如果那里有不懂的可以多敲两遍代码，，这时候英语好就显得重要了。当你把html看完时，那么恭喜是，可以去装修你的房子了。

css又叫做层叠样式表，其实很简单，因为都是语义化标签，比如这是一个卧室，你要他宽为10px，高为10px，墙面颜色为白色，当然这只是一个例子，这个卧室呢就是一个html元素，你要美化他，首先要选中他，然后去定义他的css，#woshi{

width:10px;height:10px;background:#fff;color:#000}是不是学过英语就能看的懂他是什么意思。不过css的标签远不止这些，他很强大，可以做一些动画，不过这算是进阶的css了。这么多我该如何一个个记下来呢？网站来了https://www.w3school.com.cn/css/index.asp，关于css各类标签，选择器，盒模型，定位等，静下心来多动手去试试，程序员最忌讳的就是只看不动手敲，以为自己会了。

JavaScript是前端的重点和难点，需要我们多加练习才能熟练使用，涉及到的知识也很多，三言两语未必能说完，所以这里不讲JavaScript，当你能把html和csss熟练使用后，你就可以自己模仿网站制作一个静态页面，也许不能百分百还原，但是也能做到相差无几。

本人是一个刚踏入职场的大学生，写博客为了巩固自己的基础与技术，也希望可以结交到更多的朋友，同时给一些刚学习前端的同学一下帮助，希望大家多多关照！