前言
Web应用被分类归为分布式应用，一般是客户端——服务器结构，所以我们有一部分的代码运行在客户端，另一部分代码运行在服务器。那些在客户端上的应用就是前端，通常指的就是我们的浏览器。最常用于前端开发的技术是HTML+CSS+JavaScript，高级的前端开发人员通常使用这些技术的组合开发应用的前端，另一个前端的常用技术就是使用Photoshop设计，配合其他技术共同完成Web页面的制作。
HTML概述
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX，WindowsfromModule=lemma_inlink)等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
HTML文件可以使用任何能够生成txt文件的文本编辑器来编辑，生成超文本标记语言文件，只用修改文件名后缀为“.html”或“.htm”即可。
html网页
一个网页对应多个HTML文件，超文本标记语言文件以.htm或.html（外语缩写）为扩展名(其中.htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如)，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
HTML语法规则:HTML标签采用双标记符的形式，前后标记符对应，分别表示标记开始和结束，标记符中间的内容被标签描述。前标记符由“<XXX>”表示，结尾标记符多了一个“/”，由“</XXX>”表示。
HTML文件结构
HTML文件最外层由<html> </html>表示，说明该文件是用HTML语言描述的。在它里面是并列的头标签（<head>）和内容标签（<body>)。
<html>
<head>网页的描述内容信息</head>
<body>网页显示的内容</body>
</html>
头标签中标签
| 标签 | 描述 |
|---|---|
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
内容标签中标签
| 标签 | 描述 |
|---|---|
| <table> | 定义一个表格 |
| <tr> | 定义了表格中的一行 |
| <td> | 定义了表格中某一行的一列 |
| <img> | 定义了一个图像 |
| <a> | 定义了一个超链接 |
| <p> | 定义了一行 |
| <br> | 定义了换行 |
| <font> | 定义了字体 |
静态网页与动态网页
静态网页
在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为 “ 静态网页 ” ，静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。容易误解的是静态页面都是htm这类页面，实际上静态也不是完全静态，他也可以出现各种动态的效果，如GIF格式的动画、FLASH、滚动字幕等。
静态网页只要不修改代码，是不会改变的，每天展示的内容是一样的。静态网页只使用html语言，不使用其他高级程序语言。
动态网页
所谓的动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。 从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。
早期的动态网页主要采用公用网关接口CGI（C ommon G ateway I nterface）技术。您可以使用不同的程序编写适合的CGI程序，如Visual Basic、Delphi或C/C++等。虽然CGI技术已经发展成熟而且功能强大，但由于编程困难、效率低下、修改复杂，所以有逐渐被新技术取代的趋势。
与静态网页相对应的，能与后台数据库进行交互，数据传递。也就是说，网页 URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形动态网页制作格式，而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“?”。
动态网页是基本的html语法规范与Java、PHP、C#等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
常见的动态网页编程语言
-
PHP
PHP 即Hypertext Preprocessor（超文本预处理器），它是当今Internet上最为火热的脚本语言，其语法借鉴了C、Java、PERL等语言，但只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。
它与HTML语言具有非常好的兼容性，使用者可以直接在脚本代码中加入HTML标签，或者在HTML标签中加入脚本代码从而更好地实现页面控制。PHP提供了标准的数据库接口，数据库连接方便，兼容性强；扩展性强；可以进行面向对象编程。PHP 技术的特点则是具有实时性、跨平台性和易移植性，为动态交互的实现创造了便利条件 -
JSP
JSP 即Java Server Pages，它是由Sun Microsystem公司于1999年6月推出的新技术，是基于Java Servlet以及整个Java体系的Web开发技术。
JSP和ASP在技术方面有许多相似之处，不过两者来源于不同的技术规范组织，以至 ASP一般只应用于Windows NT/2000平台，而JSP则可以在85%以上的服务器上运行，而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理，所以被许多人认为是未来最有发展前途的动态网站技术。 -
Python
是一种面向对象、跨平台的动态类计算机程序设计语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的大型项目开发。
注：Python支持的并发量不高，假设python写的脚本需要10台服务器支撑的话，Go语言只需要1台服务器。 -
Ruby
是一种简单快捷的面向对象( 面向对象程序设计)脚本语言，在20世纪90年代由日本人松本行弘(Yukihiro Matsumoto) 开发，遵守GPL协议和Ruby License。 它的灵感与特性来自于Perl、 Smalltalk、 Eiffel、 Ada 以及Lisp语言。
HTTP协议
HTTP协议(超文本传输协议HyperText Transfer Protocol)，它是基于TCP协议的应用层传输协议，简单来说就是客户端和服务端进行数据传输的一种规则。
注意：客户端与服务器的角色不是固定的，一端充当客户端，也可能在某次请求中充当服务器。这取决与请求的发起端。HTTP协议属于应用层，建立在传输层协议TCP之上。客户端通过与服务器建立TCP连接，之后发送HTTP请求与接收HTTP响应都是通过访问Socket接口来调用TCP协议实现。
HTTP 是一种无状态 (stateless) 协议, HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理。这样做的目的是为了保持HTTP协议的简单性，从而能够快速处理大量的事务, 提高效率。
HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上服务器信息、实体元信息以及可能的实体内容。
HTTP 已经演化出了很多版本，它们中的大部分都是向下兼容的：
- HTTP/0.9：已过时。只接受 GET 一种请求方法，没有在通讯中指定版本号，且不支持请求头。由于该版本不支持 POST 方法，所以客户端无法向服务器传递太多信息。
- HTTP/1.0：这是第一个在通讯中指定版本号的 HTTP 协议版本，至今仍被广泛采用，特别是在代理服务器中。
- HTTP/1.1：引入了持久连接，即TCP连接默认不关闭，可以被多个请求复用，能很好地配合代理服务器工作。还支持管道方式机制，即在同一个TCP连接里面，客户端可以同时发送多个请求，以便降低线路负载，提高传输速度。
- HTTP/2.0：完全多路复用，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，而且不用按照顺序一一对应。引入了头信息压缩机制，使用gzip或compress压缩后再发送。支持服务端推送，允许服务器未经请求，主动向客户端发送资源。
HTTP请求与响应
HTTP请求
HTTP 支持几种不同的请求命令，这些命令被称为 HTTP 方法（HTTP method）。每条 HTTP 请求报文都包含一个方法， 告诉服务器要执行什么动作，包括：获取一个页面，运行一个网关程序，删除一个文件等。最常用的获取资源的方法是 GET、POST、PUT。
| HTTP方法 | 含义 |
|---|---|
| GET | 对服务器资源获取的简单请求 |
| PUT | 向服务器提交数据，以修改数据 |
| POST | 用于发送包含用户提交数据的请求 |
| DELETE | 删除服务器上的某些资源 |
| HEAD | 请求页面的首部，获取资源的元信息 |
| CONNECT | 用于ssl隧道的基于代理的请求 |
| OPTIONS | 返回所有可用的方法，常用于跨域 |
| TRACE | 追踪 请求--响应的传输路径 |
- GET请求会向数据库发索取数据的请求，从而来获取信息，该请求不会产生副作用。无论进行多少次操作，结果都是一样的。与GET不同的是，PUT请求是向服务器端发送数据的，从而改变信息，无论进行多少次PUT操作，其结果并没有不同。
- POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，几乎目前所有的 提交操作都是用POST请求的。
- DELETE请求顾名思义，就是用来删除某一个资源的。 | GET | POST | | --- | --- | | 从指定的服务器上获得数据 | 提交数据给指定服务器处理 | | GET请求会保存在浏览器的浏览纪录里 | POST请求不会保存在浏览器的浏览纪录里 | | GET请求能被缓存 | POST请求不能被缓存 | | GET请求有长度的限制 | POST请求没有长度限制 | | 查询的字符串会显示在URL后缀中，不安全 | 查询的字符串不会显示在URL中，比较安全 |
请求报文四部分：
- 请求行：请求行由请求方法(Method)、URL 以及协议版本(HTTP Version)三部分组成。
- 请求头：请求头为请求报文添加了一些附加信息，由“名/值”对组成，每行一对，名和值之间使用冒号分隔。
- 空行：请求头部的最后会有一个空行，表示请求头部结束，接下来为请求体，这一行非常重要，必不可少。
- 请求体：请求体是请求提交的参数，GET 方法已经在 URL 中指明了参数，所以提交时没有数据。POST 方法提交的参数在请求体中。
HTTP请求头
| 请求头 | 描述 |
|---|---|
| Host | 接受请求的服务器地址,可以是 IP:端口号,也可以是域名 |
| User-Agent | 发送请求的应用程序名称 |
| Connection | 指定与连接相关的属性，如Connection:Keep-Alive |
| Accept-Charset | 通知服务端可以发送的编码格式 |
| Accept-Encoding | 通知服务端可以发送的数据压缩格式 |
| Accept-Language | 通知服务端可以发送的语言 |
HTTP响应
HTTP 状态码（HTTP Status Code）是用以表示网页服务器 HTTP 响应状态的 3 位数字代码，当浏览器请求某一 URL 时， 服务器根据处理情况返回相应的处理状态。
状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值： 1xx：指示信息 - 表示请求已接收，继续处理 2xx：成功 - 表示请求已被成功接收、理解、接受 3xx：重定向 - 要完成请求必须进行更进一步的操作 4xx：客户端错误 - 请求有语法错误或请求无法实现 5xx：服务器端错误 - 服务器未能实现合法的请求。
| 状态码首位 | 已定义范围 | 分类 |
|---|---|---|
| 1xx | 100-101 | 信息提示 |
| 2xx | 200-206 | 成功 |
| 3xx | 300-305 | 重定向 |
| 4xx | 400-415 | 客户端错误 |
| 5xx | 500-505 | 服务器错误 |
| 常见状态码 | 功能描述 |
|---|---|
| 200 | 一切正常 |
| 301 | 永久重定向 |
| 302 | 临时重定向 |
| 401 | 用户名或密码错误 |
| 403 | 禁止访问(客户端IP地址被拒绝) |
| 404 | 请求的文件不存在 |
| 414 | 请求URL头部过长 |
| 500 | 服务器内部错误。比如脚本错误，编程语言语法错误 |
| 502 | 无效网关 |
| 503 | 当前服务不可用。web服务器不能处理HTTP请求，可能是临时超载或者是服务器进行停机维护。 |
| 504 | 网关请求超时。程序执行时间过长导致响应超时，例如程序需要执行20秒，而nginx最大响应等待时间为10秒，这样就会出现超时。 |
响应报文四部分：
- 状态行：状态行由协议版本,状态码,状态码描述三部分组成。
- 响应头：响应头与请求头部类似，为响应报文添加了一些附加信息。
- 空行：响应头部的最后会有一个空行，表示响应头部结束。
- 响应体：服务器返回的相应 HTML 数据，浏览器对其解析后显示页面。
HTTP响应头：
| 响应头 | 描述 |
|---|---|
| Server | 服务器应用程序软件的名称和版本 |
| Content-Type | 响应正文的类型（是图片还是二进制字符串） |
| Content-Length | 响应正文长度 |
| Content-Charset | 响应正文使用的编码 |
| Content-Encoding | 响应正文使用的数据压缩格式 |
| Content-Language | 响应正文使用的语言 |
HTTP的五大特点
- 支持客户/服务器模式。
- 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有
GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。 - 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由
Content-Type加以标记。 - 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。早期这么做的原因是请求资源少，追求快。后来通过
Connection: Keep-Alive实现长连接 - 无状态：
HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
HTTP请求过程
用户在浏览器输入URL访问时，发起HTTP请求报文，请求中包括请求行、请求头、请求体，服务器收到请求后返回响应报文，包括状态行、响应头、响应体。
- 对域名这个网址进行DNS域名解析，得到对应的IP地址
- 根据这个IP，找到对应的服务器，发起TCP的三次握手
- 建立TCP连接后发起HTTP请求
- 服务器响应HTTP请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源）
- 断开TCP连接（四次挥手），浏览器对页面进行渲染呈现给用户
注：1.DNS域名解析采用的是递归查询的方式，过程是，先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级，这样递归查找之后，找到了，给我们的web浏览器。
2.为什么HTTP协议要基于TCP来实现： TCP是一个端到端的可靠的面相连接的协议，HTTP基于传输层TCP协议不用担心数据传输的各种问题（当发生错误时，会重传）。
3.最后一步浏览器是如何对页面进行渲染的：（1）解析html文件构成 DOM树，（2）解析CSS文件构成渲染树， （3）边解析，边渲染 ，（4）JS 单线程运行，JS有可能修改DOM结构，意味着JS执行完成前，后续所有资源的下载是没有必要的，所以JS是单线程，会阻塞后续资源下载。
非持久连接和持久连接
在实际的应用中，客户端往往会发出一系列请求，接着服务器端对每个请求进行响应。对于这些请求|响应，如果每次都经过一个单独的TCP连接发送，称为非持久连接。反之，如果每次都经过相同的TCP连接进行发送，称为持久连接。
非持久连接在每次请求|响应之后都要断开连接，下次再建立新的TCP连接，这样就造成了大量的通信开销。例如前面提到的往返时间RTT就是在建立TCP连接的过程中的代价。
非持久连接给服务器带来了沉重的负担，每台服务器可能同时面对数以百计甚至更多的请求。持久连接就是为了解决这些问题，其特点是一直保持TCP连接状态，直到遇到明确的中断要求之后再中断连接。持久连接减少了通信开销，节省了通信量。
