本文全面介绍了Web技术的基础知识，涵盖Internet基本概念、Web技术组成、HTTP协议、HTML、CSS、JavaScript以及动态网页技术如JavaServlet、JSP、ASP.NET、PHP和AJAX的基本原理。
前言
本文章是围绕全国计算机等级考试-web程序设计的相关内容
一、web技术基础？
1.1 Internet的基本概念
Internet（因特网），全球性的计算互联网络“信息共享”。
因特网（Internet）是一组全球信息资源的总汇。有一种粗略的说法，认为INTERNET是由许多小的网络（子网）互联而成的一个逻辑网，每个子网中连接着若干台计算机（主机）。Internet以相互交流信息资源为目的，基于一些共同的协议，并通过许多路由器和公共互联网而成，它是一个信息资源和资源共享的集合。
1.2 Web技术的基本概念
web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（超文本，图片，视频）（hypermedia）、超文本传输协议（HTTP）等，简单的讲就是把各种类型的信息和服务无缝连接，提供生动的图形用户界面。
WEB技术指的是开发互联网应用的技术总称，一般包括WEB服务端技术和WEB客户端技术。
两者间的关系：
web是Internet上最流行的应用之一，Internet为web提供了网络运行环境
web的出现极大地推动了Internet的普及和推广
1.3 Ｗeb技术的主要组成
1.本地计算机和远程服务器
本地计算机：用户自己浏览站点的本地机器
远程服务器：为客户端（用户）计算机提供各种服务的高性能计算机，主要功能是接受客户浏览器发送的请求，分析请求，并给予响应，相应的结果发送给客户端的浏览器。
2.静态页面和动态页面
静态页面：HTML页面文件，所有的代码都在网页中，不需要执行动态程序（访问数据库）来生成客户想要的网页
动态页面：页面的内容是动态交互的，可以根据系统的设置显示不同的页面。因为随着网站的数据量日益庞大，人们对站点的要求越来越高，希望有更快的速度，更加高效的访问查找，所以动态网页技术便应运而生。现实中常用的动态网页开发技术有：ASP，JSP，PHP，.NET等是主角）
3.Web应用程序的工作原理
浏览器的访问过程如下（用户想要访问网页，需要先获取网站首页的站点信息）：
（1）浏览器地址栏输入想要访问网站首页的地址
（2）用户向浏览器发送访问首页的请求
（3）服务器收取客户端的的访问请求
（4）服务器处理请求（若首页动态文档需要经过数据处理再返回，若为静态文档直接返回该文档即可）
（5）服务器将请求的处理结果在客户端的浏览器显示
4.常用的WEB开发技术
- 4.1静态web开发技术
html静态网页开发技术（超文本标记语言）
xml意为可扩展的标记语言。它是一种显示数据的标记语言，能够使数据无障碍地进行传输，并显示在用户的浏览器上。 - 4.2动态web开发技术
ASP(微软推出)
ASP.NET
PHP
JSP
…
1.3 Web浏览器与服务器的基本概念和工作组成
1、web浏览器的基本概念
浏览器的含义：它是一个软件。浏览器是指运行在用户的机器上用来展现和浏览 来自web服务器或者本地文件系统中HTML页面，并让用户和这些页面交互的一种客户机软件。
PC端常见的浏览器：internet Explorer（微软）；Firefox(火狐)；Opera；Chrome；Safari；360浏览器；搜狗浏览器等
手机端常见的浏览器：UC浏览器；Safari；QQ浏览器；百度浏览器；360浏览器；
2、web浏览器的工作原理：
浏览器主要通过HTTP协议与web服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML。
3、web服务器的基本概念
web服务器含义：提供web服务的服务器。
常见的web服务器有：window平台下IIS，Apache，Tomcat等；
4、web基本架构
C/S的含义：Client/Server。服务器安装高性能PC、工作站、并采用大型数据库系统。客户机安装专用的客户机端软件、服务器安装专门的服务器软件。
B/S的含义：Browser/Server。客户机仅仅安装一个浏览器。服务器安装IIS或者Apache、或者数据库。目前常用。
三层架构：含义是在客户机端浏览器与数据库中间加入了一个中间层。分类：系统部署三层结构和软件开发三层结构。
5、web技术的发展历史
三个阶段：静态文档、动态网页（交互）、web2.0（每个人都是主角）
1.4 Web应用开发构架和开发技术
Web 应用架构可以划分为两大子系统：前端子系统和后台子系统。
前端子系统：
- 基础技术： Html / CSS / Javascript
- 开发框架： jQuery, Extjs , Flex 等；
后台子系统：
- 基础技术： Java Servlet；
- 开发框架： Struts, Spring, Hibernate, ibatis 等；
- 应用服务器： Tomcat / Jetty
二、HTTP协议基础
2.1 HTTP的基本概念与交互模型
HTTP是Hyper Text Transfer Protocol（超文本传输协议）的缩写。它是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。
HTTP 协议的特点
1.无连接—限制每次连接只处理一个请求
2.无状态—协议对于事务处理没有记忆能力。
3.简单快速—客户向服务器请求服务时，只需传送请求方法和路径。
4.灵活—HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
2.2 HTTP消息格式
HTTP消息格式分为两种：请求消息、响应消息。
请求消息：包括三个部分，请求方法URL协议、请求头、请求体等
响应消息：状态行、消息报头，响应正文等
2.3 HTTP请求响应消息和请求响应方法
http请求包含三个部分：
请求消息：包括三个部分，请求方法URL协议、请求头、请求体
2.3.1 请求头包含：
Accept：指浏览器或其他客户可以接爱的MIME文件格式。Servlet可以根据它判断并返回适当的文件格式。
User-Agent：是客户浏览器名称
Host：对应网址URL中的Web名称和端口号。
Accept-Langeuage：指出浏览器可以接受的语言种类，如en或en-us，指英语。
connection：用来告诉服务器是否可以维持固定的HTTP连接。
Cookie：浏览器用这个属性向服务器发送Cookie。Cookie是在浏览器中寄存的小型数据体，它可以记载和服务器相关的用户信息，也可以用来实现会话功能。
Referer：表明产生请求的网页URL。如比从网页/icconcept/index.jsp中点击一个链接到网页/icwork/search，在向服务器发送的GET/icwork/search中的请求中，Referer是http://hostname:8080/icconcept/index.jsp。这个属性可以用来跟踪Web请求是从什么网站来的。
User-Agent：是客户浏览器名称。
Content-Type：用来表名request的内容类型。可以用HttpServletRequest的getContentType()方法取得。
Accept-Charset：指出浏览器可以接受的字符编码。英文浏览器的默认值是ISO-8859-1.
Accept-Encoding：指出浏览器可以接受的编码方式。编码方式不同于文件格式，它是为了压缩文件并加速文件传递速度。浏览器在接收到Web响应之后先解码，然后再检查文件格式。
2.3.2 HTTP常用请求方法
1、GET方法
- GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。使用GET方法的请求应该只是检索数据，并且不应对数据产生其他影响。
- 在GET请求的URL中发送查询字符串（名称/值对），需要这样写：
/test/demo_form.php?name1=value1&name2=value2 - 说明：
GET请求是可以缓存的，我们可以从浏览器历史记录中查找到GET请求，还可以把它收藏到书签中；且GET请求有长度限制，仅用于请求数据（不修改）。 - 注：因GET请求的不安全性，在处理敏感数据时，绝不可以使用GET请求。
2、POST方法
- POST方法用于将数据发送到服务器以创建或更新资源，它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另一个下属。
- POST请求永远不会被缓存，且对数据长度没有限制；我们无法从浏览器历史记录中查找到POST请求。
3、HEAD方法
- HEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。
4、PUT方法
- PUT方法用于将数据发送到服务器以创建或更新资源，它可以用上传的内容替换目标资源中的所有当前内容。
- 它会将包含的元素放在所提供的URI下，如果URI指示的是当前资源，则会被改变。如果URI未指示当前资源，则服务器可以使用该URI创建资源。
5、DELETE方法
- DELETE方法用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容。
6、CONNECT方法
- CONNECT方法用来建立到给定URI标识的服务器的隧道；它通过简单的TCP /
IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）。
7、OPTIONS方法
- OPTIONS方法用来描述了目标资源的通信选项，会返回服务器支持预定义URL的HTTP策略。
8、TRACE方法
- TRACE方法用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。
2.3.3 HTTP响应消息和常用响应状态
- HTTP/1.1 200 OK // 响应状态行
- Date: Mon, 30 Jul 2018 02:50:55 GMT //服务端发送资源时的服务器时间
- Expires: Wed, 31 Dec 1969 23:59:59 GMT //比较过时的一种验证缓存的方式，与浏览器（客户端）的时间比较，超过这个时间就不用缓存（不和服务器进行验证），适合版本比较稳定的网页
- Cache-Control: no-cache // 现在最多使用的控制缓存的方式，会和服务器进行缓存验证，具体见博文”Cache-Control“
- etag: “fb8ba2f80b1d324bb997cbe188f28187-ssl-df” // 一般是Nginx静态服务器发来的静态文件签名，浏览在没有“Disabled
- cache”情况下，接收到etag后，同一个url第二次请求就会自动带上“If-None-Match”
- Last-Modified: Fri, 27 Jul 2018 11:04:55 GMT //是服务器发来的当前资源最后一次修改的时间，下次请求时，如果服务器上当前资源的修改时间大于这个时间，就返回新的资源内容
- Content-Type: text/html; charset=utf-8 //如果返回是流式的数据，我们就必须告诉浏览器这个头，不然浏览器会下载这个页面，同时告诉浏览器是utf8编码，否则可能出现乱码
- Content-Encoding: gzip //告诉客户端，应该采用gzip对资源进行解码
- Connection: keep-alive //告诉客户端服务器的tcp连接也是一个长连接1
2.3.4 HTTP常用响应状态
HTTP状态码分类
HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：
1** ：信息，服务器收到请求，需要请求者继续执行操作
2** ：成功，操作被成功接收并处理
3** ：重定向，需要进一步的操作以完成请求
4** ：客户端错误，请求包含语法错误或者无法完成请求
5** ：服务器错误，服务器在处理请求的过程中发生了错误
200 ok,请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
304 Not Modified,如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。
403 Forbidden 服务器已经理解请求，但是拒绝执行它。
404 Not Found 请求失败，请求所希望得到的资源未被在服务器上发现。
500 Internal Server Error 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
501 Not Implemented 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 Service Unavailable 由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是临时的，并且将在一段时间以后恢复。
301 Moved Permanently 被请求的资源已永久移动到新位置
302 Move Temporarily 请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。
2.4 HTTP常用消息头
Request Header:
- GET /sample.Jsp HTTP/1.1 //请求行
- Host: www.uuid.online/ //请求的目标域名和端口号
- Origin: http://localhost:8081/ //请求的来源域名和端口号 （跨域请求时，浏览器会自动带上这个头信息）
- Referer: https:/localhost:8081/link?query=xxxxx //请求资源的完整URI
- User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99
Safari/537.36 //浏览器信息 - Cookie: BAIDUID=FA89F036:FG=1; BD_HOME=1; sugstore=0 //当前域名下的Cookie
- Accept: text/html,image/apng //代表客户端希望接受的数据类型是html或者是png图片类型
- Accept-Encoding: gzip, deflate //代表客户端能支持gzip和deflate格式的压缩
- Accept-Language: zh-CN,zh;q=0.9 //代表客户端可以支持语言zh-CN或者zh(值得一提的是q(0~1)是优先级权重的意思，不写默认为1，这里zh-CN是1，zh是0.9)
- Connection: keep-alive //告诉服务器，客户端需要的tcp连接是一个长连接
Response Header:
- HTTP/1.1 200 OK // 响应状态行
- Date: Mon, 30 Jul 2018 02:50:55 GMT //服务端发送资源时的服务器时间
- Expires: Wed, 31 Dec 1969 23:59:59 GMT
//比较过时的一种验证缓存的方式，与浏览器（客户端）的时间比较，超过这个时间就不用缓存（不和服务器进行验证），适合版本比较稳定的网页 - Cache-Control: no-cache //
现在最多使用的控制缓存的方式，会和服务器进行缓存验证，具体见博文”Cache-Control“ - Last-Modified: Fri, 27 Jul 2018 11:04:55 GMT
//是服务器发来的当前资源最后一次修改的时间，下次请求时，如果服务器上当前资源的修改时间大于这个时间，就返回新的资源内容 - Content-Type: text/html; charset=utf-8
//如果返回是流式的数据，我们就必须告诉浏览器这个头，不然浏览器会下载这个页面，同时告诉浏览器是utf8编码，否则可能出现乱码 - Content-Encoding: gzip //告诉客户端，应该采用gzip对资源进行解码
- Connection: keep-alive //告诉客户端服务器的tcp连接也是一个长连接
三、HTML基础
https://blog.csdn.net/weixin_42826790/article/details/110388714
四、CSS基础
https://blog.csdn.net/weixin_42826790/article/details/110406857
五、Javascript基础
https://blog.csdn.net/weixin_42826790/article/details/110679347
https://blog.csdn.net/weixin_42826790/article/details/110821208
六、动态网页技术概述
6.1 JavaServlet和JSP概念原理
Java servlet：
在Web服务器端加载并运行的Java应用程序具体运行在Servlet引擎管理的JVM上,Servlet是开发服务器端应用程序的一个很好选择， Servlet与JSP结合使用，能提供更强大的服务器端功能。
JSP 简介 ： JSP 与 PHP、ASP、ASP.NET 等语言类似，运行在服务端的语言。
原理：
JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头 以%>结束；
JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。
JSP有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息。
6.2 ASP.NET基本概念和原理
ASP.NET技术是Microsoft Web开发史上一个重要的里程碑，使用ASP.NET开发Web应用程序并维持其运行，比其他开发语言更加简单。与Java、PHP和Perl等高级技术相比，ASP.NET具有方便性、灵活性、生产效率高、安全性高及面向对象等优点，是目前主流的网络编程技术之一。
ASP.NET是Microsoft公司推出的新一代建立动态Web应用程序的开发平台，是一种建立动态Web应用程序的新技术。ASP.NET是.NET框架的一部分，可以使用任何.NET兼容的语言（如Visual Basic、C#）来编写ASP.NET应用程序。
ASP.NET是Microsoft.NET的一部分，是Active Server Page（简称ASP）的另一个版本；ASP.NET提供了一个统一的Web开发模型，其中包括开发人员生成企业级Web应用程序所需的各种服务。ASP.NET的语法在很大程度上与ASP兼容，同时还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。
ASP.NET是一个已编译的、基于.NET的环境，可以用任何与.NET兼容的语言（包括Visual Basic.NET、C#和JScript .NET）创作应用程序。另外，任何ASP.NET应用程序都可以使用整个.NET Framework。开发人员可以方便地获得这些技术的优点，其中包括托管的公共语言运行库环境、类型安全和继承等。
Microsoft公司为ASP.NET设计了功能强大的代码、代码易于重用和共享，可用编译类语言编写策略，从而使程序员更易开发Web应用程序，满足不同客户的需求。
ASP.NET是Microsoft .NET Framework的一部分，是一种可以在高度分布的Internet环境中简化应用程序开发的环境。.NET Framework包含公共语言运行库，它提供了各种核心服务，如内存管理、线程管理和代码安全，同时也包含.NET Framework类库。.NET Framework是一个开发人员用于创建应用程序的综合的、面向对象的类型集合。
6.3 PHP基本概念和原理
PHP即“超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习，使用广泛，主要适用于Web开发领域。
PHP、Apache和MySQL的组合已经成为Web服务器的标配，php可以做很多事情，PHP是服务端的脚本程序，需要安装php应用程序去解释执行，简单来说php是web服务器(iis、apache)功能扩展，这种结构更加适合网站原理，php需要和web服务器、数据库一块才能发挥功能。
PHP常用功能:
- 1.收集表单数据
表单是最常用的数据收集界面。在提交时可以用GET或POST的方法将数据发送给PHP程序脚本。另外PHP也可以以变量的形式访问每一个表单域，这些功能使php再收集客户输入的数据是非常简单的。 - 2.生成动态网页
PHP和JavaScript不同是php运行在服务器端，可以根据客户端不同请求动态输出内容，而客户端接受数据却不知道背后代码如何运行的，而javascript客户端运行的语言无法做到这点。 - 3.字符串处理
在处理文本时，经常要处理各种字符串，字符串处理是程序员使用最多技术之一，而PHP是把字符串作为基本的数据类型来处理。另外PHP中提供了丰富的字符串函数，来供我们使用。 - 4.动态输出图像
PHP通过使用GD扩展库来动态输出图像，登录大多数的验证码就是使用这个功能，我们也可以使用缩略图和添加水印等图像处理功能。 - 5.处理服务器端文件
要想让数据可以长期保留，必须要使用数据库或是文件系统，PHP可以利用文件系统函数任意操作服务器中的目录或文件(编辑、删除、创建等功能)。 - 6.会话控制
我们使用HTTP协议访问网站时它是一个无状态，没有内建机制来维护两个事务之间的状态。换句话来说http无法区分两个请求是否都是来自一个用户请求，而PHP就可以使用会话控制在网站中跟踪一个用户，控制该用户的行为。
6.4 AJAX基本概念和原理
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
通过在后端与服务器进行少量数据交换，AJAX 可以使网页实现异步(局部)更新。
可以把一部分以前由服务器负担的工作转移到客户端，利用客户端的闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本.
Ajax的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有 JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据， 然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
