Web前端开发概述（一）

✍️前言

各位小伙伴们，新专栏新文章开始更新！！！

经过一段时间的整理和复习，我决定出《前端开发三剑客》这个专栏，想要学习前端开发，其基础知识必须稳扎稳打，这个专栏我打算从0开始详细的整理和总结一遍HTML，CSS，JavaScript三大部分。哈哈，其实我本人基础的也有很多东西都忘记了，这个问题我相信在很多人身上都有，很多东西不经常用，时间长了，自己也记得不太清了。所以我通过写博客的方式，再次帮自己复习前端的基础知识，同时呢，也希望我整理和总结的文章对于想学前端的小伙伴们有帮助。那么，废话不多说，在接下来的一段时间里，我将持续更新这个专栏。

Web是一种典型的分布式应用结构。 Web应用中的信息交互与传输都要设计客户端和服务器端，因此，Web开发技术又分为客户端开发技术（也就是我们常说的前端开发）和服务器端开发技术（也就是我们常说的后端开发）两大类。 而前端呢，主要任务是负责信息内容的呈现和用户界面（UI）的设计。前端开发技术主要包括HTML、CSS和JavaScript，以及涉及到的Ajax、JQuery、Vue、Bootstrap框架等等，在此专栏呢，我们主要学习HTML、CSS、JavaScript三大部分知识，至于框架，本专栏暂不涉及。

前端开发是编写Web页面或App端等前端界面并呈现给用户的过程，通过HTML、CSS、JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

---

Web起源

1984年蒂姆·博纳斯·李创造了万维网，并编写了世界上第一个客户端浏览器（$WorldWideWeb$，也是一个编辑器）和第一个Web服务器Httpd（超文本传输协议守护进程），蒂姆建立了世界上的第一个网站。Web本意是蜘蛛网和网的意思，中文翻译为“网页”。最早的网络构想可追溯到1980年蒂姆构建的类似于维基百科（WiKi）的超文本在线编辑数据库。

为了让$WorldWideWeb$不被少数人所控制，蒂姆组织成立了$WorldWideWebConsortium$，也就是我们经常说的$W3C$，其核心思想是致力于“引导Web发挥其最大潜力”，我们所熟知的HTML协议各个版本，都出自W3C会议。

---

✨Web的特性

方便导航和图形化界面
Web之所以可以流行要归功于一个很重要的原因，它可以在一页上同时展现出显示色彩丰富的图形和文本。然而在Web之前，因特网上的信息只能以文本的形式显示。Web具有可以将图形、音频、视频等信息集结于一体的特性。同时，Web导航非常方便，只涉及到链接之间的跳转，就可以实现在各个页面、各个网站之间来回横跳。

与操作系统无关性
无论是什么计算机操作系统，都可以通过因特网访问WWW，浏览WWW对计算机操作系统没有任何限制，在Windows、Linux、macOS等等操作系统上都可以通过浏览器（Browser）软件实现对WWW的访问，如Chrome、IE、Firefox等等。

分布式结构
大量的图形、音频和视频信息会占用相当大的磁盘空间，实现很难预知信息的多少，对于Web来说，信息可以放在不同的站点上，浏览时只需要在浏览器中指明要浏览的站点即可。这样就使得物理上不一定在一个站点的信息在逻辑上是一体的，从用户浏览的角度来看，其本身也是一体的。

动态性
由于各个Web站点的信息并不是一成不变的，信息的提供者可以经常对站点上的信息进行更新和维护，这样做的目的是保证网站信息的时效性，所有，通过动态更新站点信息，实现了信息动态更新的效果。

交互性
Web的交互性首先表现在它的超链接上，用户的浏览顺序和所访问的站点完全由用户自己决定。另外通过表单Form的形式可以从服务器方获得动态的信息。用户通过填写Form可以向服务器提交请求，服务器根据用户的请求返回响应信息。

---

️Web工作原理

用户通过客户端浏览器访问因特网上的网站或者其他网络资源时，通常需要在客户端的浏览器的地址栏中键入需要访问的网站的统一资源定位符（$uniformresourcelocator，URL$），或者通过超链接方式链接到相关网页或者网络资源，然后通过域名服务器进行全球域名解析，并根据解析出来的结果决定访问指定的IP地址（$IPaddress$）的网站或网页。

获取网站的IP后，客户端的浏览器向指定IP地址上的Web服务器发送一个HTTP（$HypertextTransferProtocol$，超文本传输协议）请求。然后Web服务器响应客户端的请求，将用户所需要的HTML文本，图片和构成网页的其他一切文件发送给用户。如果需要访问数据库中的数据时，Web服务器会将控制权转给应用服务器，根据Web服务器的数据请求读写数据库，并进行相关数据库的访问操作，应用服务器将数据查询响应发给Web服务器，由Web服务器再将查询结果转发给客户端的浏览器，浏览器将客户端请求的页面内容解析成一个网页显示给用户，上述就是Web的工作原理。

大多数网站上的网页其中都包含很多超链接，有内链接和外链接。通过超链接可以设置资源下载，网页浏览及链接其他网络资源。通过超链接，把一系列有关的资源组织在一起，就形成了一个网状的结构，而这个概念，就是最初由蒂姆提出的万维网。

---

Web相关概念

Internet（因特网）
Internet表示的意思是互联网，又称网际网络，根据音译也被叫做因特网、英特网，是网络与网络之间所串连成的庞大网络。这些网络以一组通用的协议相连，形成逻辑上的单一且巨大的全球化网络，在这个网络中有交换机、路由器等网络设备、各种不同的连接链路、种类繁多的服务器和数不尽的计算机、终端。使用互联网可以将信息瞬间发送到千里之外的人手中，它是信息社会的基础。

WWW（万维网）
万维网WWW是（$WorldWideWeb$）的简称，也称为Web、3W等。WWW是基于客户机/服务器方式的信息发现技术和超文本技术的综合。WWW服务器通过超文本标记语言(HTML)把信息组织成为图文并茂的超文本，利用链接从一个站点跳到另个站点。这样一来彻底摆脱了以前查询工具只能按特定路径一步步地查找信息的限制。万维网并不是网络。它是Internet提供的一种网页浏览服务，人们上网时通过浏览器阅读网页信息就是在使用WWW服务，WWW是Internet提供的最主要的服务。

URL（统一资源定位符）
URL（$UniformResourceLocator$）即统一资源定位符（或统一资源定位器），可以理解为网页地址，是因特网上标准的资源的地址。现在已被万维网联盟编制为因特网标准RFC1738。URL由协议、主机域名及路径和文件名三部分组成。

协议类型://服务器地址（端口号）/路径/文件名
例如：https://www.baidu.com/index.htm（百度）

第一部分是协议（或称为服务类型），第二部分是资源主机的域名或IP地址（包括端口号），http默认的端口号是80，第三部分是主机资源的具体地址，如目录和文件夹名称等等。

Web服务器
Web服务器也称为网站，是指在因特网上提供Web访问服务的站点，是由计算机软件和硬件组成的有机整体。网站一般采用PHP、JSP、ASP等技术开发而成的B/S（Browser/Server）架构，一般由若干个网页有序地组织在一起，第一个网页也称为主页，所以主页的设计非常重要。通常需要为Web服务器配置IP地址和域名，才能对外提供Web服务。

超链接
Web页面一般是由若干超链接构成的，所谓超链接（$HyperLink$），是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件、甚至是一个程序。

HTTP
超文本传输协议（$HyperTextTransferProtocol，HTTP$）是一种详细规定了浏览器和万维网服务器之间如何相互通信的规则，HTTP是非常可靠的协议，它具有强大的自检能力，所有用户请求的文件到达客户端时，一定是准确无误的。

DNS
在Internet上，域名和IP地址之间是一一对应的，域名虽然便于记忆，但计算机不认识域名，只认识IP，将好记的域名转换成IP地址的过程称为域名解析，域名解析系统（$DomainNameSystem，DNS$）就是进行域名解析的系统，在客户端浏览器上输入域名，然后由域名解析服务器DNS将域名解析称IP地址，就能找到对应的主机，然后找到对应的资源。

---

Web标准

由于不同的浏览器对同一个网页文件解析出来的效果可能不一致，为了让用户能够看到正常显示的网页，Web开发者常常需进行多个版本的开发，当新的硬件和软件出现时，这种情况会更加严重，最常见的就是浏览器不兼容等等。为了使Web能够更好的发展，W3C与其他标准化组织共同指定了一系列的Web开发标准，Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构（$Structure$）、表现（$Presentation$）和行为（$Behavior$）三个层面。

结构标准

结构用于对网页元素进行整理和分类，主要包括HTML、XML和XHTML

超文本标记语言（$HyperTextMarkupLanguage，HTML$）用来结构化网页信息，如标题、段落、表格、表单等，在一定程度上也可描述文档的外观和语义

可拓展标记语言（Extensible Markup Language，XML）最初的目的是为了弥补HTML语言的不足，他具有强大的拓展性，可用于数据的转换和描述

可拓展超文本标记语言（$ExtensibleHyperTextMarkupLanguage，XHTML$），XML虽然转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，人们在HTML4.0的基础上，用XML的规则对其进行拓展，得到了XHTML，简单来说，创建XHTML的目的就是为了实现HTML向XML的过渡

表现标准

表现用于设置网页元素的板式、颜色、大小等外观样式，主要是指层叠样式表（$CascadingStyleSheets，CSS$）。W3C创建CSS标准的目的是以CSS为基础进行网页布局，控制网页表现。CSS布局与XHTML结构语言相结合能帮助开发者分离外观和结构，使得站点的访问和维护变得更加简单方便。

行为标准

行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两部分

文档对象模型（$DocumentObjectModel，DOM$）是一种中立于平台和语言的接口，它允许程序和脚本动态访问和更新文档的内容、结构和样式。

ECMAScript（$EuropeanComputerManufacturesAssociationScript$）是Ecma国际（$EcmaInternetTional$）以JavaScript为基础规定的标注脚本语言。JavaScript是一种基于对象和事件的驱动，并且具有相对安全性的客户端脚本语言，广泛用于Web开发，常用于HTML网页添加动态效果，响应用户操作等。

---

️总结

文章到这里就告一段落了，下一篇文章将接着介绍Web前端开发行业的趋势以及Web前端开发技术，了解Web的发展以及基本概念、相关知识点对进一步学习有着无可厚非的作用，同时也能进一步产生整体观念，将知识点有条理的结合起来，帮助自己学习或开发。

觉得不错的话记得点赞收藏呀！！

别忘了给我关注~~