前端

2017-10-08  本文已影响0人  RickCole

学习前准备


先了解,我们看到的网站内容,简单来说,是由前端和后端配合实现的,后端负责将数据库中的数据查出来,进行处理之后,通过HTTP请求传给前端页面,而前端的责任就是合理的将这些数据展示给用户。

而前端的展示页面主要由三部分组成:HTML、CSS和JavaScript。

如果用汽车来作对比的话:

这篇文章也进行了不错的解释,但忽略文中的Rails部分。

页面初体验


看完上面文章的简单介绍,现在可以试试写一个页面,在线地址

1. 一个基本的HTML页面:

下图左边部分就是一个构成一个页面的最基础部分:

最简单的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>标签中,而我们现在要实现一个该按钮的点击事件,即点击后弹出一个提示框显示“我被点击了”。具体代码如下:

增加了按钮的点击事件

按钮点击后的效果:

弹出了提示框

看完前面的介绍之后应该对前端有了初步的了解,而想要实现更加复杂的页面,需要完整的学习前端的基础知识。

学习环境准备


  1. 在线工具:

    • JSFiddle可以直接编写HTML、CSS和JS代码并实时运行测试
    • 菜鸟教程自带的在线页面预览
  2. 本地开发测试,使用编辑器和node运行环境

学习目录


先系统的浏览一遍每个部分,不懂的地方可以问或者先跳过。

HTML部分:菜鸟教程-HTML,HTML5部分可以先不看
CSS部分:菜鸟教程-CSS,CSS3部分可以先不看
JavaScript部分:菜鸟教程-JavaScript

上一篇 下一篇

猜你喜欢

热点阅读