学习前端需要的相关知识

这是一篇记录自己在学习前端知识的过程中点点滴滴的问题积累，写的有些随心所欲，没有条理。计划会一直更新，但是不确定时间。

先把自己遇到的问题和一些想法都写出来，先把一些目录列出来，慢慢加链接，将来的一天再整理吧。

一、学习前端需要的相关知识（没有按照学习的先后顺序来写，看自己高兴学什么就写什么）

1、基本知识

HTML:超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

CSS：层叠样式表 (Cascading Style Sheets)，是为了定义如何显示 HTML 元素。

JavaScript ：是 Web 的编程语言，可以让你的网页展示炫酷的动态效果。

这三种语音简单的说就是：

HTML、HTML5： 定义了网页的内容

CSS、CSS3： 描述了网页的布局

JavaScript ：网页的行为

2、Bootstrap

Bootstrap：来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

现在Bootstrap已经发布了4，官网上说不支持IE9以下的浏览器，想用的童鞋可以看我的另一篇文章“Bootstrap 4对IE8的支持”，用文章里的方法可以搞定对低版本IE的支持。 

3、Font Awesome 图标

.Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：

（1）国内推荐 CDN：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

（2）海外推荐 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

建议直接去Font Awesome 中文网 看看。里面有图标的使用方法和具体图标的样式。

4、推荐两个学习的网站

网站不是收藏的越多越好，只收藏不看系列的网站就没必要说了，只说一下自己用着方便的网站：

W3Cschool 有PC端和移动端，平时手机看也很方便。有免费和收费两种课程，初学者免费课程完全够用。

菜鸟教程 看名字是给初学者准备的，里面各种流行语言、框架的教程比较全，也是我最初学习时看的网站。

这两个网站结合起来学习，我觉得初学者就不需要看第三个网站了，按照上面的代码，自己一个个敲一遍，是一种不错学习选择。

二、前端制作需要的软件（没有任何优劣分析，只是记录自己用的软件）

记录的软件不一定好用，也不一定优秀，只是自己用的时候顺便发了一个链接或者截图。

1、VS code（免费）

VS vode特点：开源，免费；自定义配置；集成git；智能提示强大；支持各种文件格式（html/jade/css/less/sass/xml）；调试功能强大；各种方便的快捷键；强大的插件扩展。

下载地址

根据自己的系统版本下载，插件扩展自己找度娘。推荐这篇文章 “VSCODE 10个高效开发插件” （版权归原作者），大家可以学习插件安装，同时里面推荐的插件也不错，基本够用了。

2、WebStorm（收费）

目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等，总之功能强大，优点多多，用起来的确也很爽。当然也有不足，最大的不足就是收费，还有就是费资源。

下载地址就不提供了，网络上好多绿色版其实根本不能用。