学习前准备
先了解，我们看到的网站内容，简单来说，是由前端和后端配合实现的，后端负责将数据库中的数据查出来，进行处理之后，通过HTTP请求传给前端页面，而前端的责任就是合理的将这些数据展示给用户。
而前端的展示页面主要由三部分组成：HTML、CSS和JavaScript。
如果用汽车来作对比的话：
- HTML可以想象成组成汽车的基本原材料；
- CSS则是将这些原材料美化加工，使其展现出各种各样的颜色和形状；
- JavaScript是汽车中各种各样的零件，可以确保汽车的运行。
这篇文章也进行了不错的解释，但忽略文中的Rails部分。
页面初体验
看完上面文章的简单介绍，现在可以试试写一个页面，在线地址：
1. 一个基本的HTML页面：
下图左边部分就是一个构成一个页面的最基础部分：
-
<!DOCTYPE html>： 声明为 HTML5 文档 -
<html>元素：是 HTML 页面的根元素 -
<head>元素：包含了文档的元（meta）数据，这些数据会控制页面的一些属性 -
<title>元素：描述了文档的标题，就是你打开一个网页标签的名字 -
<body>元素：包含了可见的页面内容，几乎所有页面中见到的内容的html元素都是写在body标签中的
最简单的html页面
而上例中body标签中没有添加任何元素，所以右边页面预览是空白。
2. 增加简单html元素：
现在在body中增加一个p元素，写法是<p>中间是想要显示的文字</p>，标签需要闭合，更多细节在菜鸟教程元素语法中查看。点击运行后可以看到右边出现了一行文字：
增加了p元素
这样我们就为我们的页面增加了一个简单的元素，任何网站都是由很多各种各样的元素构成的。
3. 初识CSS
现在再在上述例子中增加CSS部分，CSS是写在<style></style>标签中的并且一般是放在head标签内，来控制html元素样式的语法，主要是由选择器和声明两部分构成，我们给下面p标签设置一个颜色：
增加CSS样式
上图中的style标签内的语法就是CSS，通过一个p选择器选中 p元素，然后为为p元素声明了color:red设置了字体颜色，就有了右边红色字体的效果，除了颜色之外还可以设置字体大小、字体间距等，更多CSS内容菜鸟教程CSS部分。
4. 初识JavaScript
为了更简单的了解JavaScript，我们需要给body中新增一个button元素，如下所示：
新增button元素
JavaScript的逻辑语法需要写在<script></script>标签中，而我们现在要实现一个该按钮的点击事件，即点击后弹出一个提示框显示“我被点击了”。具体代码如下：
增加了按钮的点击事件
按钮点击后的效果：
弹出了提示框
看完前面的介绍之后应该对前端有了初步的了解，而想要实现更加复杂的页面，需要完整的学习前端的基础知识。
学习环境准备
-
在线工具：
- JSFiddle可以直接编写HTML、CSS和JS代码并实时运行测试
- 菜鸟教程自带的在线页面预览
-
本地开发测试，使用编辑器和node运行环境
学习目录
先系统的浏览一遍每个部分，不懂的地方可以问或者先跳过。
HTML部分：菜鸟教程-HTML，HTML5部分可以先不看
CSS部分：菜鸟教程-CSS，CSS3部分可以先不看
JavaScript部分：菜鸟教程-JavaScript
网友评论