一、前端工程师的角色
一个网站的建设需要以下角色：
①策划人员：方案
②美工/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。