零基础也能看懂的Web简介

如果你是刚接触Web或是想从事Web技术方向相关工作,那么本文能帮你更加了解Web技术。

首先,我们先了解3个概念

  1. 网站

  2. Web浏览器

  3. 服务器

一、网站

一般来说,我们把网页的集合称为网站,网站由多个网页和一个首页构成。

其中网页又由文本、图片和音视频文件组成。

每个网站都有自己特定的网址,比如,百度:www.baidu.com

如何构建一个网站/网页?

你可以使用下列技术开发自己的网站/网页:

  • HTML

  • CSS

  • JavaScript

HTML:这是一门标记语言,也就意味着你可以用HTML的标签(比如:<p> <div>)来组织网页的结构;

CSS:CSS可用于设计网页,比如用CSS可以更改网页里的文本颜色;

JavaScript:这是一门Web编程语言,用JavaScript可以更新HTML和CSS内容。

HTM Web网页示例

代码:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

效果:

第一个网页示例

静态网站 vs 动态网站

静态网站

静态网站是一类基本的网站,比较容易被创建,这类网站的网页可以直接用HTML编码。每个网页的代码都是固定的,因此网页所包含的信息也就不会有变化,看起来就像是印刷的纸质读物一般。

动态网站

动态网站是多个动态页面的集合,动态页面上的信息会动态发生改变,页面上的内容来源于数据库或内容管理系统(CMS)。

域名/IP地址

域名一般和网站一一对应,主要被用来查找和定位位于互联网上的计算机。

计算机可以使用一长串数字组成的IP地址,但让用户去记住一长串数字的IP地址来访问网站就太难了。域名由此发展而来,用户可以通过域名找到网站而不是通过难记的IP地址。

二、Web浏览器

Web浏览器是一个软件平台,它允许用户定位、访问和展示Web页面。

浏览器主要被用来展示和访问网站,网页上的内容由编程语言创建,例如:超文本标记语言HTML。

常见浏览器

谷歌浏览器
火狐浏览器
Safari浏览器

浏览器是如何工作的?

通常浏览器会先获取网页里的HTML/CSS/JavaScript代码,然后把这些代码送至渲染引擎处,渲染引擎再将HTML文档解析转换为”Content tree”里的DOM节点,这样用户就能在浏览器上看到完整的页面。简要工作流程见下图:

浏览器简要工作流程图

渲染引擎

谷歌浏览器

Blink:渲染引擎&Chrome v8引擎(JS引擎

微软Edge浏览器

EdgeHTML:渲染引擎&Chakra(JS引擎)

苹果Safari浏览器

WebKit:渲染引擎

三、服务器

服务器也是一台计算机,它主要用于处理请求和给互联网或本地局域网的其他计算机发送数据。

一般来说,服务器的数据大部分是发送给浏览器的。

服务器分类

  1. Web服务器:为Web网页提供服务

  2. 右键服务器:为收发邮件提供服务

  3. FTP服务器:为网络上文件传输提供服务

Web服务器

web服务器是一段程序,它能够接受浏览器端用户发出的请求,并响应用户请求对应的文件和数据。

常见Web服务器

NGINX
Apache
Tomcat

使用这些服务器时,可以将数据存储在数据库中

数据库

数据库软件是条理分明的信息的集合,因为它能方便地被访问、管理和更新。

常见数据库

MySQL
SQLServer
Oracle
MongoDB
Redis

数据库又可以从大类上分为两种,即关系数据库(Relational Database)和非关系数据库(Not Only SQL)

关系数据库

此类数据库的数据存储类似于Excel表格,按固定的格式一行一列存储。这类数据库的结构化程度非常高,典型代表就是MySQL。

非关系数据库

此类数据库允许用户存储多种多样的数据类型,不论是由计算机产生的,还是由用户产生的,代表数据库为MongoDB。

下图很好地对比体现出了高度结构化的数据和非结构化数据的两种状态

image-20210710114702504

所以看完以上内容,你是否对Web有了进一步的了解呢?欢迎转发+评论

参考资料

[1] Intro to Web 101

[2] 菜鸟教程

码哥 wechat
欢迎关注个人订阅号:「码上行动GO」