第一天：代码入门、HTML语法基础及文档类标签

楼主本来自学将近3个月左右的php，然后在一家公司实习。起初做的项目比较简单，都是基于phpcms的企业类网站，没有什么技术含量。后来因为各种原因，项目总监和老板闹翻走人了，我们项目组也就解散了。技术没学到什么，差不多浪费了3个月左右。后来嘛，零零散散的自学路程，然后和同学报了php培训班，希望能加强自己的基础和项目经验，希望自己能在php行业越走越远，下面的教程都是在学习里面拷贝的，希望对那些自学的人有些帮助吧，分享自己的学习经验。

课程介绍

前后端技术简介

PHP基础班课程，主要分为两大块，前端技术和后端技术，我们使用的网络软件其实都是由前端和后端组成。

 

前端：供用户浏览或者操作的界面。html+css +javascript 

Html5:html最新版本 

Html  css  JavaScript  ecmascript   

Apicloud:7天时间  app 

Egret

Apicloud + egret

语言是相通

后端：处理用户界面的操作，比如在QQ号码注册的时候，用户点击了【注册】，然后服务器就根据这个操作跟用户分配了一个号码。前端对于用户是可见，后端为不可见。

登录 注册 文件上传  用户增加删除 

qq注册   填好数据 点击提交  会有一个php程序 zhuce.php  

前端 ： 直接给用户看 展示相关数据   前端工程师 

后台 ： 后台处理前端提交的数据  管理数据  后台工程师 

全栈：前后台都可以写 

 

http://lagou.cn/index.php/admin/index/index.html

前端技术课程： HTML，CSS，JAVASCRIPT  

后端技术课程：PHP基础, MYSQL(数据库).  （java ruby Python .net php、nodejs...）

Php:用来写后台 处理数据 

 

Lamp : linux系统  apache 服务器  mysql  数据库 php  python

开源

Php:做网站  效率高  快速开发 

软件  

LNMP  linux  Nginx php

Php  mvc  中级项目 终极项目 github  linux  mysql  

 

课程时间

前7天，主要学习内容为HTML、CSS

8天内容：javascript实现网页特效+表单的验证(重点)

后6天：PHP基础, MYSQL(数据库)

学习目的及目标

基础班：掌握JS HTML CSS等相关web开发技术，培养代码编写习惯 为就业班打好基础

 

学习方法

1、多看源代码，多练多写，多想（是什么东西？它的作用（用途）？为什么要学习他？）

2、当天的知识尽量当天消化，最迟不能超过第二天，休息日总结前两天或者三天的内容

推荐要上的网站 ：

https://github.com/  全球最大开源项目托管平台 

http://www.csdn.net/  全球最大的中文社区

http://www.zhihu.com/  

http://www.oschina.net/p/magento

lagou.com 专门招聘程序员的网站

应聘的加分项！

 

开源软件：开发源代码 每个人都可以看源代码 可以免费使用 

总结：1、当天的知识当天消化 2、多看源代码 多练多写

原理 自学方法 

软件架构

C/S架构

先从宏观上来了解 

 

最大的特点:安装客户端  

 

客户机：每个人的电脑  服务器：也是一台电脑 硬件配置要更高  放在互联网上提供服务 

客户机（client）和服务器（services）结构，优点是能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器。对应的优点就是客户端响应速度快

缺点：客户端需要安装专用的客户端软件。首先涉及到安装的工作量，其次任何一台电脑出问题，如病毒、硬件损坏，都需要进行安装或维护

对客户端操作系统有些限制

客户端游戏 ：必须去下载一个游戏客户端

网页游戏：直接打开网址 登录就能玩儿

C/S架构的劣势还有高昂的维护成本且投资大

为什么目前web开发非常流行？

运营成本会很高 开发成本也高  开发的周期也比较长   c/s架构的一个 最大缺点  有钱的大公司  

B/S  Browser/Server  : web软件  运营成本相对较低  开发维护成本不高 开发周期相对要短 

http://www.baidu.com  前端 后端

快速 高效 运营成本相对较低 

 

单机版软件  云计算  

 

 

B/S架构

B/S结构（Browser/Server,浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到了服务器上，简化了系统的开发、维护和使用，同时也大大简化了客户端的电脑载荷，减轻了系统维护与升级的成本和工作量。

B/S结构最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件。只要有一台能上网的电脑就能使用，客户端零维护。

 

 

总结:c/s  客户机 /服务器   B/S 浏览器/服务器

 

Php  开发服务端 

 

网站运行原理

站点介绍

站点就是一个文件夹，管理着一个网站的所有的资源（网页、图片、css、javascript、flash）

网站就是放在互联网上的一台服务器上的一个文件夹

服务器:互联网上一台电脑 ip:172.23.234.23

 

网页介绍

网页：网站中的任何一页面，通常是HTML格式的文件，可以通过浏览器打开。网页是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。

一个网站是由许多网页组成，网页是网站的基本组成

 

互联网  由很多台电脑连接起来   电脑上 文件 公开 

网站运行原理

浏览器发送请求到服务器，服务器返回html、css、javascript代码给浏览器，浏览器解析代码，形成网页视图   从输入url到页面展示到底发生什么?

 

输入域名 -> 本地hosts文件 -> 如果有ip和域名的映射 直接访问ip地址 

                          ->如果没有ip和域名的映射 ->DNS(域名解析系统)->访问服务器ip地址  

代码入门hello world

程序语言构成

1、什么是语言？

语言：交流工具 人与人之间的沟通交流，我们会用到各种语言，比如：汉语，英语……

英语的构成：26个字母 分大小写 通过不同的组合形成各种有意义的单词  单词通过组合形成一句话 不同的句子组合 表达一个主题思想

先学abcd  音标  单词  语法  句子 this is a dog  this is a pig  this is a dog  this is a dog 

汉语的构成：拼音、汉字 、词语、语句，通过不同的词语组成语句，通过不同的语句组合形成一篇文章，表达某种意思或者说思想 

2、程序语言构成

计算机语言：人和计算机沟通和交流工具  

程序是想通   语法  变量  常量  数组  函数  表达式  流程控制  

变量 运算符 表达式  函数  小的功能  大的项目 

 

Html  标签  功能  组成html的 基本元素 

 

 

 

注意：编程就像是用汉语写小学生作文，不需要华丽的词藻，只需要用最简单的程序语言，表达出想要实现的意思。编程语言（programming language）是人和计算机交流的一种语言。该语言主要是用来向计算机发出指令, 计算机会严格按照指令一步一步完成相应的数据处理。虽然计算机被称为电脑,但是电脑是最笨的,它只能够严格按照指令完成数据处理。所以说编程语言实际上是告诉计算机完成一个数据处理的过程.

编程：本质上就是人通过计算机编程语言命令计算机去完成相关的操作（就能够完成我们的需求）

3、作为一个前端工程师，要与浏览器沟通交流，就要用到浏览器所能识别的语言；

Html  页面结构 

Css   页面样式  表现 

Javascript 行为 

HTML概述 

超文本标记语言（HyperText Markup Language，HTML）是标准通用标记语言(SGML  Standard Generalized Markup Language)下的一个应用，是一种规范，一种标准。网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。

写网页结构的语言  

浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果（兼容性）。

超文本：是因为除了普通的文字之外，还有文本中包含了所谓“超级链接”。

纯文本：记事本写的东西

普通文本：比如说word文档

HTML网页文件扩展名：.html  或 .htm 就是文件类型

作用：写网页，网页就是由html写的

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

 

开发工具介绍

开发工具主要分为两类：

 1。文本增强编辑器:语法高亮显示、自动缩进等辅助功能。 EditPlus/notepad++/sublime/Dreamweaver  

     2。IDE(集成开发环境)，提供的功能主要有语法高亮显示、自动缩进、语法提示、自动完成、版本控制等，提高开发效率。 zend studio/netbeans/phpstorm/webstorm/hbuilder

集成开发环境（IDE）：功能强大

文类编辑器：小巧 打开速度快

 

EditPlus介绍:

快捷键使用：Ctrl+ [N 新建]  、[S 保存] 、[J 复制当前行] 、[Z 撤销]

 TAB 右缩进       SHIFT+TAB 左缩进.   Alt+Shift+Delete(删除光标行)  

 Ctrl+I （选中行右缩进）   Ctrl+SHIFT+I （选中行左缩进）

 

 

HTML文档结构

第一个HTML页面

 

HTML基本语法

什么是HTML标签

组成HTML文档的基本元素，相当于英语中的每个字母

HTML标签格式与特点

HTML 注释

注释一段内容时使用“<!--”开始，以"-->"结束，主要用来说明某段代码的功能，html代码由于篇幅比较长，所以尽量在功能开始前和功能完成后加入注释 （布局结尾可加可不加）

如果遇到问题调试的时候可以将有问题的代码段注释 

代码格式

空格键和回车键在网页中都不会起到任何作用，我们为了让代码清晰易读，可以使用空格和回车键进行编排。

字符实体

比如我们想在网页上面显示一个“<”小于符号，但是“<”在HTML中是文档标记的开始语言，如果我们直接使用“<”会出差错，所以我们就会一些实体名称来代替！

 

 

大小写区分

HTML标签不区分大小写

 

<HTML>、<Html>、<html>都是定义相同的标记，但是在编写网页的时候尽量使用小写

HTML结构分析

 

<html>内容</html>

以<html>标签开头

 

以</html>结尾

 

<head>内容</head>

 

<meta>内容</meta>

 

<title>内容</title>

 

<body>内容</body>

练习-综合案例分析

 

 

HTML标签

文档设置标签

格式标记

<br> 标签

作用：强制换行

效果：让后面的文字、图片、表格等等，显示在下一行

 

<p>标签

作用：换段落，分段显示

效果：由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落！加上p标签以后，以段落的形式显示

 

<center>标签

作用：居中对齐

效果：让段落或者是文字相对于父标记居中显示

 

<pre>标签

作用：预格式化标记

效果：保留预先编排好的格式

<ul>标签

作用：声明一个没有序列的标记

效果：里面嵌套li标签，显示一个无序列表

<li>标签

作用：列表项目标记

效果：具体显示列表的每一项

<ol>标签

作用：有序列表标记

效果：带有特定序列号的有序列表

格式： 

      <ol type="符号类型">

       <li type="符号类型"></li>

       <li type="符号类型"></li>

      </ol>

有序列表的type属性值：

1--阿拉伯数字1 、2、 3等，这个是type的默认值

A--大写字母A、B、C等

a--小写字母a、b、c等

Ⅰ-- 大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等

ⅰ--小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

注意：不管是有序列表还是无序列表都可以嵌套使用

<dl><dt><dd>标签

作用：定义型列表

格式：

<dl>

<dt></dt>

<dd></dd>

</dl>

使用场景：对列表条目进行简短的说明

<hr>标签

作用：水平线分割标记

效果：在段落之间显示一条分割线

<div>标签

作用：分区显示标记，也作层标记

应用场景：网页布局

<span>标签

 

文本标记

<h1><h2><h3><h4><h5><h6>标签

作用：标题标记

效果：从1到6 由大变小显示标题

<b>标签

作用：粗体标签

效果：字体加粗显示

<sub>标签

作用：文字下标字体标记

效果：显示文字下标

<sup>标签

作用：文字上标标记

效果：显示文字上标

<font>标签

作用：字体标签

<em>标签

作用：表示强调，通常显示为斜体字

<strong>标签

作用：表示强调，通常显示为粗体字

<small>标签

作用：小型字体标记

<big>标签

作用：大型字体标签

<u>下划线字体标记

作用：下划线字体标记

作业

知识点以下  手写3遍 

day1作业.html 效果 做3遍 敲代码 (不用手写)