<1>Web前端Web基础知识

一、前端工程师的角色

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

策划人员方案

美工/UI设计师设计图 .psd  .rp

前端工程师:静态网页

端工程师:获取数据 ( Java   PHP  .NET)

二、Web的基础知识

1Web万维网)Internet因特网

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

WebInternet关系

WebInternet提供的服务。

Web简介万维网

2Web的工作原理

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服务器和客户端的通讯细节

3Web的相关技术

①常见的服务器端技术(运行在服务器上):

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.1IP则显示默认网页index.html

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

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

网页文档存储在htdocs文件夹里才能访问到(CApache2.2 htdocs

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

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

试一下标签hello world!---×××灯的效果

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

 

 

 

 

 

 

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