Web前端开发技术

第一讲：什么是Web前端？

杭州电子科技大学舒亚非

什么是Web？

万维网（World Wide Web），亦作"WWW"、"Web"，是一个透过互联网访问的，由许多互相链接的超文本组成的系统。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。1990年他在瑞士CERN的工作期间编写了第一个网页浏览器。网页浏览器于1991年在CERN以外发行，1991年1月最先向其他研究机构发行，并于1991年8月在互联网上向公众开放。

万维网是信息时代发展的核心，也是数十亿人在互联网上进行交互的主要工具。网页主要是文本文件格式化和超文本标记语言（HTML）。除了格式化文字之外，网页还可能包含图片、影片、声音和软件组件，这些组件会在用户的网页浏览器中呈现为多媒体内容的连贯页面。

万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。

要想深入理解什么是Web，最好是亲手架设一个网站！

安装Web软件环境

创建 D:\server 文件夹，假设它代表着一台远程服务器上的目录
下载Web服务器集成软件包 phpstudy ，并将其安装至 D:\server 目录
下载和安装chrome/firefox/Edge等浏览器软件
运行D:\server\phpStudy\phpStudy.exe，点击面板中的"启动Apache"，确保启动成功(绿色)

phpstudy

hello Web!

新建 D:\server\phpStudy\WWW\hello.html文件

<h1>Hello World!</h1>
<p>Welcome! This is my first Web site！</p>

浏览器中访问http://127.0.0.1/hello.html phpstudy

Web系统的基本组成

Web服务器软件:: apache
Web浏览器软件:: chrome/firefox
一个特定格式的地址： http://127.0.0.1/hello.html
一个特定格式的html文档:: <h1>Hello Web!</h1>

为什么需要Web服务器软件?

在磁盘文件管理器中直接双击D:\server\WWW\hello.html文件，直接触发浏览器进行查看，效果一模一样
除了浏览器地址栏中的地址
如果D:\server 是来自另一台机器的文件夹呢？

file:///D:/server/WWW/hello.html phpstudy

单机时代的文件传输

graph TD
    A[Tom的电脑] -->|copy  to| B[U盘或移动媒介]
    B .-> |线下传输 | Y
    Y --> |copy to | C[Mary的电脑]    
    X(Tom) .-> |请访问U盘\data\hello.dat| Y(Mary)

虚线：人工实现；实线：机器实现

网络时代的文件传输

graph TD
    A[Tom的电脑] -->|上传| B{服务器x.com}
    B --> |下载| C[Mary的电脑]
    B --> |下载| D[...]
    X(Tom) .-> |告知地址 x.com/data/hello.dat| Y(Mary)
    X(Tom) .->  Z(...)

虚线：人工实现；实线：机器实现

客户机/服务器 Client/Server 架构

服务端软件

将客户端发来的网络地址解析为本地地址
将本地文件按照协议(ftp、samba)打包发送给客户端

客户端软件

接收服务端的文件，并进行处理，譬如：保存为本地文件

graph TD
    S(服务器)    
    SA1(ftp服务端软件)        
    SA2(smb服务端软件)        
    SA3(bt服务端软件)        
    SA4(磁力服务端软件)        
    CA1(ftp客户端软件)
    CA2(smb客户端软件)
    CA3(bt客户端软件)
    CA4(磁力客户端软件)        
    C(客户机)
    S -->  SA1
    S -->  SA2
    S -->  SA3
    S -->  SA4
    SA1 -->  CA1
    SA2 -->  CA2
    SA3 -->  CA3
    SA4 -->  CA4    
    CA1 -->  C
    CA2 -->  C
    CA3 -->  C
    CA4 -->  C

网络时代的地址统一资源定位符URL

url说明图

形形色色的网络地址

http://192.168.1.1/hello.html
ftp://192.168.1.1/hello.html
smb://192.168.1.1/share/hello.html
\\192.168.1.1\share\hello.html
magnet:?xt=urn:btih:411354............

=> 本机地址 D::\server\nip\clild.htm or /var/www/nip/child

基于ftp等文件传输协议的系统流程

sequenceDiagram
    participant P as  人类用户  
    participant C as 客户机
    participant CA as ftp客户端软件
    participant SA as ftp服务器软件
    participant S as 服务器
    
    P->>CA:   输入文件地址
    CA->>SA: 访问 ftp://x.com/hello.doc
    SA-->>S: 请求 D:\server\www\hello.doc
    S-->>SA: 载入hello.doc
    SA-->>CA: 传送 hello.doc
    CA-->>C: 保存为本机文件
    P->>C:   运行MS Word打开hello.doc
    Note right of P: 手工环节

如果本机没有安装word软件呢?如果下载的是私有格式的文件呢？

统一文档格式：html文档

html文档采用文本格式(plain text),而不是二进制格式(doc、pdf、jpg)，易于跨平台存储、传输和处理
html文档由一组简单的html标记组成，易于由软件进行解析和渲染
html文档支持嵌入css、javascript等标记，支持各种渲染和处理

<!-- hello.html -->
<html>
  <body>
      <h1>hello world!</h1>
      <p>Welcome! This is my first Web site！</p>
  </body>
</html>

浏览器/服务器架构 B/S

Web浏览器的功能

基于http协议，接收来自服务器的html文档
将html文档解析、渲染为屏幕图像或语音等

graph TD
        
    SA(Web服务器)    
    CA1(Web浏览器)
    CA2(Web浏览器)
    CA3(Web浏览器)
    CA4(Web浏览器)    
    
    
    SA -->  CA1
    SA -->  CA2
    SA -->  CA3
    SA -->  CA4

http协议：更适合传输文本，而ftp等文件传输协议更适合传输二进制文件

B/S架构工作流程

sequenceDiagram
    participant C as 人类用户    
    participant CA as Web浏览器
    participant SA as Web服务器
    participant S as 服务器
    
    C->>CA: 地址栏输入或点击链接 
    CA->>SA: 解析域名、访问 http://x.com/hello.html
    SA-->>S: 请求 D:\server\www\hello.html
    S-->>SA: 载入hello.html
    SA-->>CA: 传送 hello.html!
    CA-->>C: 接收页面后，解析和渲染为屏幕图像

基于http、html等协议，Web浏览器代理了人类用户的一系列手工行为，譬如请求页面、接收页面、保存页面、解析页面、渲染页面。也就是说，它吸收和集成了IT时代种种工具的优点，从而也成长为最为强大的网络系统！

从以磁盘文件为中心到以Web页面为中心

	磁盘文件	Web页面
地址格式	`C:\server\hello.doc`	`http://x.com/index.html`
存储形式	本机磁盘	网络(磁盘、数据库、字节流...)
组织形式	文件、文件夹	页面、链接、站点
文档格式	word、pdf...格式繁多，彼此封闭	统一文本格式，开放协议
处理方式	必须专用客户端渲染和处理	任何兼容文本的程序均可自由处理

什么是WEB前端与后端？

graph LR
    S(服务器)        
    BE(PHP/ASP/JSP引擎)
    SA(Web服务器)       
    CA(Web浏览器)
    FE(Javscript引擎)
    C(客户机)
    P(用户)
   
    SA .-> CA
    C .-> |图像或语音|P
    subgraph 服务端
    S -->  BE
    BE --> |生成html文档| SA
    end

    subgraph 客户端
    CA .-> |html源文档|FE
    FE .-> |生成html文档| CA 
    CA --> C
    end

位于服务端，在Web服务器传输之前，用于描述如何动态生成WEB页面的一系列编程语言及技术，如php/asp/jsp/python/ruby等,称之为Web后端技术
位于客户端，在Web浏览器渲染之前，用于描述WEB页面应当如何被浏览器渲染、处理的一系列技术，如html、CSS、javascript等，称之为Web前端技术

从用户的视角：离用户近的为前，远的为后

概念解析1

服务端
- 提供资源的,为多台客户机共享资源
- 被动的,接收上传和下载请求的机器
客户端
- 享用资源的：获取服务器的资源
- 主动的：发起上传和下载请求的机器
客户机/服务器：当我们强调客户端或服务端的物理属性时，我们使用客户机、服务器的称呼；反之，则表示当我们仅关注其扮演角色的不同。譬如在同一个软件内部，它的不同部分也可以扮演客户与服务的角色，即使在同一台物理机器上。

概念解析2

文档 document：我们一般将使用欲处理的目标对象，统称之为文档；如果要强调它的存储或编码格式，则加限定，称之Web文档、Word文档等
- 当文档存储在磁盘上时，称之为磁盘文件，简称文件，譬如html文件
- 当文档处于网络传输时，称之为网络字节流，简称字节流，譬如Web文档字节流
- 当文档被载入内存，譬如被浏览器进行解析和处理时，称之为内存对象，简称对象，譬如Web文档对象
Web页面与Web文档：当我们偏重于从用户的角度或使用的角度，常称之为Web页面；当我们偏重于从系统的角度或编程处理的角度，常称之为Web文档