【Web技术】概述

最新推荐文章于 2024-09-21 20:43:03 发布

每天进步一点点-

最新推荐文章于 2024-09-21 20:43:03 发布

阅读量8.2k

点赞数 16

分类专栏：前端学习

本文链接：https://blog.csdn.net/m0_58092420/article/details/118622324

版权

前端学习专栏收录该内容

3 篇文章 3 订阅

订阅专栏

一. Web概述

1. Web历史

Web是World Wide Web的简称，Web提供了全新的信息发布和浏览模式，实际上Web是运行在Internet之上的所有Web服务器和所管理对象的集合，对象主要包括网页和程序。

1989年CERN（欧洲粒子物理研究所）中由Tim Berners-Lee领导的小组提交了一个针对Internet的新协议和一个使用该协议的文档系统，该小组将这个新系统命名为World Wide Web，它的目的在于使全球的科学家能够利用Internet交流自己的工作文档。
这个新系统被设计为允许Internet上任意一个用户都可以从许多文档服务计算机的数据库中搜索和获取文档。1990年末，这个新系统的基本框架已经在CERN中的一台计算机中开发出来并实现了,1991年该系统移植到了其他计算机平台，并正式发布。

2. Web体系结构

Web是基于浏览器/服务器（B/S）的一种体系结构，客户在计算机上使用浏览器向Web服务器发送请求，服务器响应客户请求，向客户回送所请求的网页，客户在浏览器窗口上显示网页的内容。

Web体系结构主要由三部分组成：

Web服务器：用户要访问Web页面或其他资源，必须事先有一个服务器来提供Web页面或这些资源，这种服务器就是Web服务器，也称为网站。
客户端：用户一般是通过浏览器访问Web资源对的，它是运行在客户端的一种软件。
通信协议：客户端和服务器之间采用HTTP（Hypertext Transfer Protocol，超文本传输协议）进行通信，HTTP是客户浏览器和Web服务器通信的基础。

3. 基于Web技术

URL：Web使用URL（Uniform Resourse Locator，统一资源定位符）技术来表示服务器及服务器信息。
HTTP：Web技术的核心HTTP（Hypertext Transfer Protocol，超文本传输协议）设计了一套相当简单的规则，用来支持客户端主机和服务器之间的通信。
MIME：Web借用了MTME（Multipurpose Internet Mail Extension，多用途Internet邮件扩展）标准，即服务器根据数据文件的扩展名生成相应的MIME类型返回给浏览器，浏览器根据MIME类型处理不同类型的数据，MIME是一个开放的多语言，多媒体电子邮件协议，为了满足用户在不同的软件平台和硬件平台的信息交换而制订，规定了不同数据类型的名字。

4. Web服务器

Web服务器（Web Server）也称为WWW服务器，主要功能是提供网上信息浏览服务。Web服务器的应用层使用HTTP协议，信息内容采用HTML文档格式，信息定位使用URL。

（1）当Web服务器接收到一个HTTP请求（request）时会返回一个HTTP响应（response）。Web服务器处理客户端请求有两种方式：

一是静态请求，客户端所需请求的页面不需要进行任何处理，直接作为HTTP响应返回
二是动态请求，客户端所需请求的页面需要在服务器端委托给一些服务器端程序进行处理，例如CGI，JSP，ASP等，然后将处理结果形成的页面作为HTTP响应返回
其中，静态请求的页面成为静态页面，动态请求的页面成为动态页面

（2）Web服务器选择原则：

首先是响应能力，即Web服务器对多个用户浏览信息的响应速度，响应速度越快，单位时间内可以支持越多的访问量
其次是与后端服务器的集成，Web服务器除直接向用户提供Web信息外，还肩负服务器集成的任务；
第三是管理的难易程度，一是管理Web服务器是否简单易行，二是是否利用Web界面进行管理，
第四是系统的稳定可靠性，Web服务器的性能和运行都非常稳定
最后是安全性，既要防止Web服务器的机密信息泄密，又要防止黑客的攻击。

（3）常用Web服务器：

Microsoft IIS：Microsoft的Web服务器软件Internet Information Server（IIS）可以建立在公共Internet或Internet上发布信息的Web服务器。
Apache：是世界上使用最多的Web服务器，它的优点是源代码开放，支持跨平台应用以及可移植性等方面
Tomcat：Tomcat是基于Java的Web服务器应用软件。

二. 超文本与标记语言

超文本又称为超媒体，是一种将各种信息节点连接在一起的网状逻辑结构。标记语言又称为置标语言，是一套标识文档内容结构和格式的语法规则。

1. 超文本与超媒体

超文本是由信息节点和表示节点之间相互关系的链所组成的具有一定逻辑结构的语义网络，由节点，链和网络三种要素组成，其中最关键的是连接各个节点的链。
节点，是指基本信息块（如段，帧，卷，文件等），它们在不同系统中有不同的名称。
链，是指节点之间的关联（指针）。链是固定节点间的信息联系，用来以某种形式连接相应的节点，链是超文本的。链在形式上是从一个节点指向另一节点的指针，但在本质上则表示不同节点之间的信息联系。链定义了超文本的结构，提供浏览和探索节点的能力。
网络，是由链连接在一起的节点所组成的网状结构。
如果超文本中的节点内容不仅包含文本，而且还包含各种媒体对象（如图形、图像、声音、动画和视频等），则称其为超媒体，即超媒体=超文本+多媒体。

2. 标记语言

与自然语言和编程语言不同，标记语言是一种基于文本的描述性语言。
标记是为了传达有关文档的信息而添加到文档数据中的文本，标记语言是一种文本标记描述结构化数据，并具有严格语言规则的形式语言
标记语言可用于描述数据，如定义文本格式与处理、数据库字段的含义与关系和多媒体数据源等。
现在使用的主要标记语言有SGML，HTML，XML，XHTML等

三. Web标准体系

Web标准是由W3C等标准化组织共同制定的一些规范集合，Web标准不是一个标准，而是一系列标准。网页由结构（网页的内容），表现（网页的外观）和行为（网页的交互）三部分组成，对应的标准分别为结构标准，表现标准和行为标准。基于Web标准的网页设计要将网页的结构，表现，行为这三个组成部分严格分离，这3个组成部分按照标准分层次建立在彼此之上。

1. 结构标准

结构标准主要包括HTML和XML，用来结构化网页和内容。

<!--看不懂也没关系，后面会学~ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击一下</button>
</body>
</html>

2. 表现标准

表现标准主要包括CSS（Cascading Style Sheets，层叠样式表），CSS是一种样式规则语言，将样式应用于网页内容，用来呈现网页外观样式。

<!--看不懂也没关系，后面会学~ -->
<link rel="stylesheet" href="css/style.css">
<!--或者-->
<style>
    button{
        margin: 50px;
        color: aquamarine;
        background-color: #fff;
        width: 200px;
        height: 50px;
        border-radius: 5px;
    }
</style>

3. 行为标准

行为标准主要包括ECMAScript和DOM（Document Object Model，文档对象模型），以及基于此的Javascript，Javascript是一种脚本编程语言，允许用户控制和操作网页的内容。

<!--看不懂也没关系，后面会学~ -->
<script src="js/javascript.js"></script>
<!--或者 -->
<script>
     function getM() {
         alert("hello world")
     }
</script>

4. Web标准优势

对于访问者：可确保每个人都有权利访问相同的信息；文件下载与页面显示速度更快；内容能被更多的用户所访问；内容能被更广泛的设备所访问；用户能够通过样式选择定制自己的表现界面；所有页面都能提供始于打印的版本
对于网站所有者：站点开发更快捷；更少的代码和组件，容易维护；带宽要求降低，成本降低；更容易被搜索引擎搜索到；改版方便，不需要变动页面内容；提高网站易用性

四. 浏览器

浏览器是Web服务器的客户端程序，可向Web服务器发送各种请求，并对从服务器发来的网页和各种多媒体数据格式进行解释、显示和播放。浏览器的主要功能是解析网页文件内容并正确显示，网页一般是HTML格式，浏览器是经常使用的客户端程序。

1. 浏览器发展史

1990年Tim Berners-Lee 设计了世界上第一个浏览器World Wide Web，1991年3月在CERN使用，改名为Nexus
1993年3月美国国家超级计算机应用中心发布Mosaic，这是互联网历史上第一个获得普遍使用和能够显示图形的浏览器
1994年成立Netscape（网景）公司，发布了第一款商业浏览器Netscape Navigator
1995年8月微软发布了IE
1996年挪威最大的通信公司Telenor推出了Opera。Opera有自己的内核，完全独立
2003年苹果公司发布了Safari
2004年Mozilla发布Firefox，2005年正式开源
2008年9月谷歌推出Chrome浏览器，它是目前市场占有率第一的浏览器
2015年4月微软发布Edge浏览器

2. 常用浏览器及其内核

Internet Explorer：是由微软开发的最流行的浏览器，基于Trident内核，2015年，微软发布Edge浏览器，基于Chromium内核
Firefox：是Mozilla发展而来的浏览器，基于Gecko内核
Opera：是挪威人发明的浏览器，快速小巧，适用于多种操作系统，基于Blink内核
Chrome：是免费的开源Web浏览器，由Google开发，基于WebKit/Blink内核
Safari：是由苹果公司开发的浏览器，适用于MAC和Windows系统，基于WebKit内核

五. Web开发工具

一个好的开发工具可以让开发效率提高，开发难度降低。

1. JetBrains WebStorm

官网网址：https://www.jetbrains.com/webstorm/
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。其主要特点有对业界最新技术的支持、可自定义代码格式化规则、智能的代码补全、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码等。

2. Visual Studio Code

官网网址：https://code.visualstudio.com/
Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

3. Hbuilder

官网网址：https://www.dcloud.io/
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。其特点是运行速度快（c++内核），对 markdown、vue 支持更为优秀，还能开发 App、小程序，尤其对 DCloud 的 uni-app、5+App 等手机端产品有良好的支持。

4. 测试与调试环境

网站的测试及调试建议使用Chrome浏览器提供的开发者工具进行，打开浏览器后直接在页面上单击鼠标右键，然后选择【检查】命令或者快捷方式F12进入开发者工具界面。

下载网址：https://www.google.cn/chrome/
Chrome开发者工具分为八大模块：
Elements：用于查看和编辑当前页面中的HTML和CSS元素
NetWork：用于查看HTTP请求的详细信息，例如请求头、响应头及返回内容等
Sources：用于查看和调试当前页面所加载的脚本源文件
Timeline：用于查看脚本的执行时间、页面元素渲染时间等信息
Profiles：用于查看CPU执行时间与内存占用等信息
Resources：用于查看当前页面所请求的资源文件，例如HTML，CSS样式文件等
Audits：用于优化前端页面、加速网页加载速度等
Console：用于显示脚本中所输出的调试信息，或运行测试脚本等