写在前面：开发环境搭建：WampServer；

代码编辑器：notepad++;自行下载安装；

傻瓜式安装，安装完以后www文件夹下新建项目testPro，如图：

Ps:1，完全没有基础的新手，就不要在这个点上纠结用哪种集成开发环境软件性能更好了，等你达到一定程度，想用什么就用什么;

2，后端开发，前端技术是一定要懂的，学会制作一个复杂程度中等及以上的的静态网页；

3，至于在哪学习，菜鸟教程了解一发，PHP，html+css，Javascript原生的代码基础学习一下，先不要看框架(各种框架，前端框架，后端框架都不要看)；

本文将着重用最简单的例子说明前后端交互的问题，暂时先不涉及和数据库的交互，从最基本的开发环境搭建到三大块的基本介绍和三者之间如何交互，PHP，HTML+CSS，JAVASCRIPT；(本文将不会涉及最基本的代码常规知识讲解，只会有重点以及交互你需要注意的知识点的说明)；

另，开发这个职业的任何一个功能都有可能有很多种方法去实现，今天的简介只是介绍其中一种可行方法，然后把所有的重要元素串联起来而已；

一：PHP，HTML+CSS，JAVASCRIPT重点介绍版块；

A:HTML;

1)了解HTML5,HTML5的设计目的是为了在移动设备上支持多媒体,互联网的发展要求你的前端代码必须要同时利于移动端设备访问，或者优先移动端展示设计；

2)对于HTML讲两个概念，元素：块级元素:block-level(例：DIV)，内联元素:inline(例：SPAN)，二者的区别如下图：

在使用默认的样式的前提下，二者展示如上图，块级元素在浏览器显示时，通常会以新行来开始(和结束)；下面会在CSS样式里面说如何让块级元素同行显示，内联元素新行展示；

3)HTML 属性之id及class；

(与后期需要配合使用的CSS和JavaScript都有关系：必须完全了解)；

Class，为html元素定义一个或多个类名(classname)(类名从样式文件引入)；

Id，定义元素的唯一id；

B:CSS;选择器(id及class选择器)；

以下用块级元素同行显示，内联元素新行展示实例说明CSS选择器实现这样一个简单的功能；

testPro项目，根目录下新建同级test.htm(如图引入css样式表)以及test.css文件；提示：开发者需要掌握绝对路径以及相对路径；

通过链接访问输出结果如下：

C:JAVASCRIPT:变量，输出(利用id及class选择器输出交互)及循环；

1)，JAVASCRIPT变量：在 JavaScript 中我们使用 var 关键词来声明变量；

2)输出方式(常规输出以及利用id及class选择器输出交互)；

a:常规输出如下图：

B:利用id及class选择器输出交互如下图:

另JS开发阶段还要知道：console.log()，具体用法第二大部分说交互的时候再说；

3)循环(for循环)；

提示：JS和PHP的基础知识，变量，循环，条件语句很多都很相似，可以一起学习，JS学习好对你后期要开发的整个项目会有很大的便利(这不是废话吗，很多编程知识都有很大的相似之处，学会一门编程语言以后，学习另外的编程语言就会很快)；

D:PHP;变量与JSON格式的转换；

1) 你需要知道的两个函数：

json_encode：对变量进行 JSON 编码；

json_decode：对 JSON 格式的字符串进行解码，转换为 PHP 变量；

2) JSON概念：JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

3) PHP包含文件：include 和 require 语句;

以上都是交互实例需要使用到的；

具体怎么使用下面具体用实例说明；

二：三者交互实例；

testPro项目根目录下，新建两个PHP文件: index.php,first.php;

first.php文件内定义一个数组；

$arr=array('bmw','vol','aodi','toyota');

?>

Index.php文件内，如下图

第一步：包含first.php文件才可以使用定义的数组(任何文件之间都要有个连接点，不会是凭空就可以使用的，外部CSS ，JS文件也都是要引用的)；

第二步：在js 代码中使用php文件中的数组，

var last_arr=<?php echo json_encode($arr);?>;

提示：必须json编码，才能使用服务端的数据，或者直接在php文件json编码也可以的；

第三步：根据id动态显示数组内容；

第四步：for循环展示数组内容；

最后一步console.log输出数组；

输出后显示：

下个课程主要会说明这三项和数据库的交互(原生)；