一、前端工程师的角色

一个网站的建设需要以下角色：

①策划人员：方案

②美工/UI设计师：设计图 （.psd  .rp）

③前端工程师：静态网页

④后端工程师：获取数据 ( Java   PHP  .NET)

我还是要推荐下我自己创建的web前端资料分享群606721798，这是web前端学习交流的地方，不管你是小白还是大牛，小编都欢迎，不定期分享干货，包括我整理的一份适合零基础学习web前端的资料和入门教程。

二、Web的基础知识

1、Web（万维网）与Internet（因特网）

①Internet简介：定义、主要服务、基本实现技术

②Web与Internet关系

Web是Internet提供的服务。

③Web简介：万维网

2、Web的工作原理

①Web的工作原理

②Web的组成部分

  1)Web服务器：监听客户端连接请求、接收请求，返回响应内容。

产品：TOMCAT;IIS;APACHE

Apache Httpd市场占有率最高(>60%) ，开源免费 。

一般称的Apache服务器默认指Apache Httpd服务器。

  2)Web客户端：（目前）浏览器和移动设备的APP（数据传输，HTML5是趋势）

五个常用浏览器：IEtester（可以运行各种IE浏览器），Google Chrome（近Safari），（Firefox）火狐，（Opera）欧朋，Safari 。

国产的浏览器没有自己的内核。

  3)HTTP协议：定义Web服务器和客户端的通讯细节

3、Web的相关技术

①常见的服务器端技术（运行在服务器上）：

JSP (Java)/PHP/ASPX

②常见的客户端技术（运行在浏览器）：

HTML/ CSS /JavaScript/SWF 前端学的主要是客户端技术。

☆补充一：怎么安装和使用Apache服务器。

TIPS：命令行程序窗口内按键盘的“上键”可以再调出来一遍命令。

到一定层次很多软件都是英文的。

（1）下载：http://httpd.apache.org

（2）安装：

①必须填写Network Domain（域名）；Server Name（服务器名字）和 管理员邮箱地址  

②端口号默认80 ---服务器服务进程的地址。Http服务器端口（port）号为80.

③一般选典型安装

④服务器安装路径:不要有中文和空格，有时候会出现莫名其妙的问题。一般直接安装在C盘下C:\Apache 2.2\ 

安装好后，要准备就绪。

（3）启动Httpd服务器：

两种途径：

①服务控制程序（可以看见的）

②操作系统的服务控制台【鼠标操作（计算机--右键--管理--服务）或快捷键windows+r--services.msc】

③直接CMD命令启动：net start Apache2.2（直接安装在C盘是有原因的，简化命令行）

【停止：net stop Apache2.2 重启：net restart Apache 2.2】

如何确定服务器真正开启？

因为服务器是后台程序，运行在操作系统底层的，用户看不见。

服务器开启且占用了其端口号，才真正开启。

可以查看系统打开的端口号，确认Httpd是否已经启动。

netstat -anb 确认80端口是Httpd服务器进程占用，迅雷等端口可能会占用。如被占用则关掉其他程序（进程）。才能真正启用服务器。

（4）访问服务器

<1>访问服务器的两种途径：

①通过Windows IP配置的 IP可以访问任何人（包括自己）的服务器（联网的情况下）；

②127.0.0.1当前计算机（本机）的IP地址，仅限访问自己的本地服务器。

两者区别：

127.0.0.1仅在当前计算机使用，一般是一直可以用的。任何时候联网或断网都可以访问自己的服务器；但是常规 Windows IP配置的 IP则仅限在联网的情况下访问自己或别人的服务器。

<2>访问服务器下的网页

①访问方式：路径直接127.0.0.1或IP则显示默认网页index.html

（只有访问index.html文档不用写文件名，其他在IP地址后必须写文件名。）

②服务器下的网页不能随便放在任何路径下；网页必须放在Apache Httpd服务器能够识别的路径下。

网页文档存储在htdocs文件夹里才能访问到（C→Apache2.2 →htdocs）

☆补充二：浏览器控制台。

前端工程师必须要熟练使用浏览器控制台！

试一下标签：<marquee>hello world!</marquee>---跑马灯的效果

****右键单击----审查元素----浏览器控制台---纠错调错用的。

（1）浏览器控制台---主界面菜单和Elements （元素）界面（见图1）： 

Elements 元素【文档内容、样式css、盒子模型解决纠错】

Network 网络

Sources  源代码

Console 控制台

Timeline 时间线

Profiles 归档

Resources 资源

Security 安全

Audits 审计

（2）浏览器控制台学习---Network（网络）界面（见图2） 

Method 方法  GET 方法（此图没有）

Status 状态  304响应

Type 文档类型

Initiator 发起者

Size 大小；尺寸

Time 时间（延时）

Timeline 时间线【请求发送、等待、内容下载】

Timeline是做web页面的前端优化必须懂的！我们的网页发送了多少个请求和哪个请求最耗时使我们的症结所在。我们对Web页面进行了前端优化的目的就是，缩短请求时间，使Web网页打开时间变短。

（3）浏览器操作台-network-点击网页名（见图3）

Headers  标题

Preview 预览

Response 响应

Timeing 计时 

☆补充三：直接本地打开文件html文件和通过IP地址访问服务器打开html文件的区别。

（1）首先路径显示有区别

（2）是否符合Web模型的区别。

通过IP地址访问服务器查看页面：通过HTTP协议，网络浏览器发送一个请求，得到服务器的响应页面是这样的。包含了web的三要素。

直接本地双击打开文件html文档查看页面：没有经过服务器，没有遵循http协议，不符合web模型。虽然简单页面两者效果一样，但是复杂页面就不一样了。这样的访问没有经过页服务器，服务器端会对文档加以处理，少了处理访问的效果就有可能与用户不一样，所以访问时尽量的架服务器，把网页放在htdocs。