【百度前端学院学习笔记】Day1 Web基本概念

本文链接：https://blog.csdn.net/weixin_41604040/article/details/107131419

【百度前端学院学习笔记】Day1 Web基本概念

前端部分
后端部分
一个普通网站访问的过程

来自知乎的问题：
Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？
以下内容参考自知乎用户张秋怡的回答，这里是原答案
以及dungBeetleIT的博客，博客链接

前端部分

什么是web?

Internet ：Internet 中包含了一组特定的硬件设备以及让这些设备可以相互连接的技术，如路由器，光纤，电话线，无线基站，手机，以太网，令牌网，wifi，等等。以及让这些设备可以连接起来并进行通信的技术上的规定，如电缆长度，接口大小，数据包的转发规定，等等。

web就是World Wide Web，即万维网，是在Internet 基础上，提供的一种信息共享服务。这种服务最直观的感受就是看网页。在网页中点击一个连接，就可以跳转到另外的一个网页或网站。HTTP是万维网的主要访问协议。

Internet 上不只有Web, 还有FTP, P2P,Email, 或者App等其他多种不同的互联网应用方式. Web只是其中最广泛的一种. Internet的概念要大于Web.

所谓网站(Website)，就是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。Web的概念要大于Website

我们看到的微信web端，office web端，就是指通过浏览器来实现客户端实现的功能。

浏览器获取网页的过程？

在浏览器输入：
http://www.zhihu.com/question/22689579
浏览器和服务器之间的通信如下：
在这里插入图片描述

HTML 与 CSS

HTML: Hyper Text Markup Language，即超文本标记语言，是一种标签语言，与其说是语言，不如说是一种格式，确定了网页的框架。没有经过CSS渲染的纯HTML网页如下：
在这里插入图片描述
CSS: Cascading Style Sheets，即层叠样式表，它的基本语法：
属性:值
CSS用来定义网页显示的样式，经过CSS渲染后的静态页面如下：

HTML 5 与 XHTML

HTML5 是HTML中一个比较新的标准，规定了HTML 代码里能有什么标签，标签怎么写，标签可以有什么属性等。这个标准新加了很多可以用的标签和属性。
XHTML，是 HTML 的近亲 XML 和 HTML 自己的杂交品种，对语法要求比较严格，并且为了兼容 XML，在语法上与 HTML 有一些不同。

JavaScript 与浏览器脚本

有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画，按F5才能刷新页面，于是我们有了 Javascript（JS）来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口。
在这里插入图片描述
这个悬停框实现了两个效果：

鼠标悬停到标签上时创建一个新的 <div>小窗口
用 JS 向知乎服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这就是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分~）

Ajax

Asynchronous Javascript And XML，（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

后端部分

Web Server

浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的。首先这些请求和响应要有一个通用的写法，也就是要有一个协议，常用的是 HTTP 协议。
服务器按照HTTP协议生成的内容如下：

状态码 200 OK 表示正常相应，404 Not Found表示服务器里没有需要请求的东西
Content-type表示表示服务器发过来的文件类型是什么（文本？动画？图片？音频？），这样浏览器才知道如何解析。

那么服务器该如何写这个按照HTTP协议生成的内容呢？Web Server在Browser和Server之间架起了一座桥梁，接受HTTP请求，并返回HTTP的相应。
除了浏览器输地址敲回车这种赤裸裸的访问，客户端与服务器的交互还有很多种，比如：

Web Service

为了让Brower或者Client和Server之间更好地交互，我们就需要指明一种协议（比如 HTTP/HTTPS）和一种数据封装格式（比如 HTML/XML）。Web Server 提供的 Web Service，指的就是这种协议+格式的交流体系。

Web Service 的生态系统很庞大，普通的网站访问用的 HTTP + HTML 只是其中一种。

Web Service 传输的数据再经由本地客户端（浏览器、QQ/微信，网游客户端等）的分析渲染，就能够以普通人能够理解的形式展现出来。此外还有一些 Web Service 并不是为普通用户设计的，像前面提到的微博API，是用来给程序猿进行二次开发的。

除了提供 Web Service， Web Server 还会兼顾很多功能，包括提供缓存，平衡负载，这样在访问量比较大的时候能有有条不紊地接客。常见的现成的 Web Server 有开源的 Apache、Nginx和微软的IIS，你也可以用一些工具（比如 Node.js ）自己定制一个。因为 Web Server 需要比较好的性能，所以投产时用的 Web Server 通常是C/C++/Java写的，但是其实很多语言都可以写，而且配合上语言底层的优化和好的模型，其他语言写的 Web Server也可以有不错的表现。

B/S和C/S架构

可以看到，这里的本地客户端包括了浏览器，事实上，浏览器和QQ/微信，网友客户端等有着本质的区别，因为它们的架构不同：B/S架构和C/S结构。
CS（Client/Server）：客户端----服务器架构，是一种典型的两层架构。因为客户端要负责绝大多数的业务逻辑和UI展示，又称为胖客户端。它充分利用两端硬件，将任务分配到Client 和Server两端，降低了系统的通讯开销。C/S结构的软件需要针对不同的操作系统系统开发不同版本的软件，加之产品的更新换代十分快，已经很难适应百台电脑以上局域网用户同时使用。
BS（Browser/Server）： 浏览器----服务器结构，通过W3浏览器来进入工作界面，极少部分事务逻辑在前端（Browser）实现，主要事务逻辑在服务器端（Server）实现，形成三层（3-tier）结构。这样使得客户端电脑负荷大大简化（因此被称为瘦客户端），减轻了系统维护、升级的支出成本，降低了用户的总体成本（TCO）。

PHP ，服务器脚本，Web Framework

开头那张图里服务器接到请求之后可以给访客发送对应的文件，但21世纪的服务器怎么可能只会“接请求-发文件”这么弱智的一招呢，人家还可以处理你上传来的文件的！还可以接受你发过来的各种请求，去操作服务器本地的文件or数据库的！要干这些事，自然服务器那边也少不了要有代码了，这些代码就是服务器脚本。前面说的 Web Service 传输的数据，主要也是由服务器脚本生成，再交由 Web Server ，按照某种协议套好整个响应的格式，返回给客户端的。同一个网址，每个人看到的页面不一定是一样的，比如知乎首页的网址都是

http://www.zhihu.com/

但是没登陆和登陆之后看到的东西不一样，登陆之后每个人看到的导航栏的用户信息，关注的动态，都不一样。服务器脚本可以对这些不同的状态，生成不同的页面，交给 Web Server 返回给浏览器。知乎的主页给大家看到的 html 整体来说是差不多的，都有导航栏，左边是关注的动态，右边是广告和边栏，每一块的整体构造大同小异，只是一些地方内容有所区别。服务器脚本就是利用已知的数据，在这些因人而异的地方填入相应的内容，生成给每个人看的页面。

PHP 就是一种常见的用来写服务器脚本的语言，其实只要是能拿来写大家传输数据的通用接口（CGI）的语言都可以用来写服务器脚本（也就是说几乎所有编程语言都可以写 = =b），只是因为现成工具的丰富程度和专攻程度不一样，所以有一些语言在写服务器端脚本的时候会比较热门。

为了方便，我们在写服务器脚本的时候，通常还会用个同语言写的 Web Framework 来处理各种细节，防御一些常见的攻击，提供跨站认证（比如用已有的微博账号注册其他网站）的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。如果你用 C# 或者 Visual Basic 写服务器脚本，就可以用 http://ASP.NET 这个框架实现这些功能，帮你省点麻烦。不过现在不少人是反过来为了一个好用的 Web Framework 去选择它对应的服务器脚本语言的。