百度前端技术学院--零基础第一天

炫酷的网页：

• http://2014.artsy.net/
• https://codepen.io/Yakudoo/full/rJjOJx
• https://codepen.io/pissang/full/geajpX
• https://codepen.io/tsuhre/full/BYbjyg
• https://wangyasai.github.io/Stars-Emmision/
• https://pissang.github.io/papercut-box-art/
• https://demo.marpi.pl/biomes/
• https://pissang.github.io/voxelize-image/
• http://echarts.baidu.com/examples/index.html#chart-type-globe
• https://tympanus.net/Development/AudioVisualizers/（推荐戴耳机）

Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？

　　网站访问的大概过程：

　　

　　　　访问过程和上图差不多，浏览器和服务器交流，服务器和数据库交流（有时候数据库就在服务器那台机子上）。浏览器和服务器交流时的请求与响应有一个通用的写法，也就是要一个         协议，常用的就是HTTP协议。Http响应里还包括很多东西，比如Content-Type表示服务器发过来的文件类型（文本？动画？图片？音频？）

　　HTML 与 CSS

　　　　HTML表示内容和语义，CSS规定样式，得到一个静态的页面

　　JavaScript 与浏览器脚本

　　　　Javascript给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果啦。

　　　　

　　　　

浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用 <script> 关联进来就可以用了，像上图这个效果应该就包括： 

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

---

以上就是前端部分的内容，下面简述一下后端的东西吧...

---

　　Web Server 和 Web Services

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

　　　　HTTP 响应里还包括很多东西，比如 Content-type 表示服务器发过来的文件类型是什么（文本？动画？图片？音频？），这样发过去了浏览器好知道怎么展示给用户看。服务器怎么知         道按协议要写什么东西进去呢，这就是 Web Server 的任务了。

　　　　形象化一下HTTP响应，大概就长这样：

　　　　

　　　　机器能够通过网络进行交互，我们就需要指明一种协议（比如 HTTP/HTTPS）和一种数据封装格式（比如 HTML/XML），Web Server 提供的 Web Service，指的就是这种协议+格式         的交流体系。除了提供 Web Service， Web Server 还会兼顾很多功能，包括提供缓存，平衡负载，这样在访问量比较大的时候能有有条不紊地接客。                         

　　　　常见的现成的 Web Server 有开源的Apache、Nginx和微软的IIS，你也可以用一些工具（比如 Node.js ）自己定制一个。

简单概括一下，对于我们普通的网站访问，涉及到的技术就是：

1. 用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
2. 服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
3. 服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
4. Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
5. 客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
6. 解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
7. 浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
8. 用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
9. 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源或写入数据等），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

除了客户端和服务器，我们还需要了解：

• 网络连接: 允许你在互联网上发送和接受数据。
• TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。
• DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。
• HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol ）。就像你下订单时所说的话一样。
• 组成文件: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：
  • 代码 : 网页大体由 HTML、CSS、JavaScript等技术组成。
  • 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word文档、PDF文件。

　　DNS解析

　　　　将你输入浏览器的地址与实际 IP 地址相匹配的特殊的服务器

　　数据包解析

　　　　“包”用来描述了数据从服务器到客户端传输的格式。这是什么意思？基本上，当数据在Web上传输时，是以成千上万的小 数据块 的形式传输的。大量不同的用户都可以在同时下载同一个网页。如果网页以单个大的 数据块 形式传输，一次就只有一个用户下载，            无疑会让Web非常没有效率并且失去很多乐趣。