web前端
您现在所在的位置:首页>企业动态>web前端

前端开发学习指南:关于HTML的基础知识介绍

编辑:超级管理员    发布日期: 2021-12-15 09:57:40  

3.png一、Web应用

所谓的Web应用特指我们平时用浏览器打开的一些应用,也就是网站。如微博、朋友圈、知乎等等。Web应用一定是以资源组的形式存在的。

以微博这个Web应用为例,它是有很多的场景组成的,我们所熟知的场景有:

1)登录注册场景;

2)微博浏览场景;

3)发布微博场景;

4)个人中心页面;

在这些场景中,每个场景一般都有自己的主页面,一般就是一个HTML页面资源;在这些场景下是一个个具体的功能区,一般来说场景确定下来之后功能区只有一到两个,要实现一个功能,就转变成了要完成一系列动作,如注册、登录、阅览,完成一个动作又需要几个资源相互配合完成,HTML只是内容数据化的一种展示,资源中的数据在我们学习阶段主要来自数据库。

有了上面的理解后,我们再粗略的理解一下一个Web应用是怎样构成的:

我们先通过数据库拿到数据,然后通过HTML把拿到的资源标记为结构化的内容,进而形成完整的资源,把几个资源相互结合就形成了一个功能,几个功能进行相互拼接、组织就形成了一个完整的Web应用或者系统。

我们做的应用要把我们的内容提供给用户,但有时候我们需要从用户中收取信息,就要用到表单,这段话中的有些专业词汇你可能不理解,这是没关系的,读完整个文章,我相信你一定能懂。

有了这些理解,以后我们在尝试自己做Web应用或者系统的时候就会有清晰的思路。

二、浏览器

浏览器被称为用户代理(User agent),有时候又被称为一个Web客户端,浏览器本身就是一个客户端(Web Client)。例如:Edge,谷歌浏览(Chrome,Firebox,QQ浏览器,360浏览器等。

三、Web服务器

有客户端就必定会有服务器,因为Web服务器采用HTTP协议,故我们很多时候又把它叫做HTTP服务器(HTTP Sever)。例如:Apache,Tomcat,Netty等。

我们的浏览器会通过网络和我们的客户端进行通信,浏览器和客户端都是别人实现好的,我们的任务主要是给客户端实现一些外挂的素材(又叫做资源),所以,服务器经过客户端访问时实际访问的是我们提供的资源,如图。

1.png

浏览器和服务器之间进行通信时有一套标准,这套标准叫做HTTP协议,全称是(Hyper(超级) Text(文本) Transfer(传输) Protocol(协议))。通信时浏览器发出请求,服务器给与应答。

152.png

四、资源

关于资源,我们暂时可以理解成一组文件,而所谓的开发Web应用,就是开发一组资源(表现为一组文件),为了更好的理解,你可以把浏览器想象成一个商场,把我们开发Web应用想象成在这个商场里开个店,开店前我们需要准备好要卖的物品,这就相当于资源。一个浏览器里可以有多个Web应用,而每一个Web应用又有一系列的资源。我们开发的资源需要经过客户端才能对外提供服务,用户代表的是浏览器,浏览器是直接和Web服务器对接的,我们会把相应的资源挂靠到Web服务器上,这样我们的Web应用就正式工作起来了。

2.png

五、如何确定URL的基本格式

1)网络上的电脑(主机)有很多,所以我们首先要通过域名或者是IP地址来确定唯一主机:例如192.169.1.1www.xuedaon.com这些都是IP地址或者域名。

2)确定了主机之后,网络中还有很多程序(准确来说叫做进程),这时我们通过端口(port)来确定唯一的进程,IP协议默认端口是80端口.通过这两步,我们就确定了服务器。

3)确定了服务器之后,我们通过资源路径来获取唯一的资源,

经过以上几个步骤,我们就确定了一个唯一的URL,例如:http://www.xuedaon.com:80/s或者http://www.xuedaon.com/s,因为http协议的默认端口是80端口,所以可以省略。

六、资源的格式和类型

资源的格式可以是任何的格式,如html类型,css类型,JavaScript类型,json类型,图片,音频,纯文本等等,资源的类型也有两种,一种是静态资源,即提前把内容写好,直接输出,一种是动态资源,根据运行时条件,生成内容。理论上,生成方式和资源类型是两回事,但在实践中,cssJavascript往往采用静态方式(但其实并没有要求必须如此)。

扩展:一个web应用下的资源们从概念上讲它们是相互独立的,但在实践中,为了完成一个业务动作,这些资源之间是需要相互配合的。例如,在下图中,某几个资源一起配合完成检索动作,某几个资源又配合完成了借书动作。web应用总是有一个自己的主入口,但这并不是必然的,这个资源的路径是/,可以省略,或者可以写成index.html等。

3.png


七、谷歌浏览器(Chorme)的开发工具

首先,按如下方式打开开发者工具,选中功能面板上的网络这个选项,

155.png

我们再在浏览器中输入一个URL这个唯一的资源(俗称网址,每个资源都需要在网络中存在一个唯一的标识,也就是每个资源都有一个唯一的Unique Resource Location,简称URL)https://www.xuedaon.com,在搜索的过程中,下面的框中出现了很多的资源,为什么会出现这样的现象呢,下面让我们简要的分析一下整个过程:

当我们在浏览器中输入了一个URL之后,执行搜索时,浏览器获得了一个唯一的资源,浏览器经过分析该资源后,可以让浏览器访问到更多的资源,浏览器按照一定的规则整合了这些资源,然后浏览器渲染(展示)了这些资源,最后我们就在浏览器中看到了网页的效果。

4.png

声明:转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。 

免费试学
课程好不好,不如实地听一听

封闭学习

2

1

联系我们

电话:028-61775817

邮箱:1572396657@qq.com

地址:成都高新西区西芯大道4号

  • 学到牛牛在线咨询

    扫一扫,免费咨询

  • 学到牛牛公众号

    微信公众号

学一流技术,找高薪工作

7-24小时服务热线:

028-61775817

版权声明 网站地图

蜀ICP备2021001672号

课程问题轻松问