Web探索之旅 | 第一部分:什么是Web?

html-css022

Web探索之旅 | 第一部分:什么是Web?,第1张

什么是 Web 呢? 这个问题不容易回答。

Web 这个英语单词有好几个意思:“网,蜘蛛网,网状物;万维网;织物;圈套”。

我们也经常用到它的合成词,例如 Webpage(网页。是 Web 和 page(page 表示“页面”)的合成),Website(网站。是 Web 和 site(site 表示“站点”)的合成)。

一般在 IT (Information Technology 的缩写,表示“信息技术”)领域,Web 被翻译成“网络”,或者很多时候我们不翻译,就直接用 Web 这个词。因为 network(或简称 net)这个单词也有“网络”的意思。但是 Web 和 network 是有区别的。

那么到底什么是 Web 呢?

在 IT 领域, Web 是 World Wide Web(万维网,一般简写为 WWW)的简称。World 表示“世界”,Wide 表示“广阔的”,Web就是“网”。

WWW 可以让 Web 客户端(例如我们常用的浏览器,如 Chrome,Firefox,等等)访问 Web 服务器上的页面。 是一个由许多互相链接的超文本组成的系统,通过互联网访问。

在这个系统中,每个有用的事物,称为一样“资源”,并且由一个 URI (Uniform Resource Identifier 的缩写,表示“统一资源标识符”)标识。

这些资源通过 HTTP (HyperText Transfer Protocol 的缩写,表示“超文本传输协议”。我们之后的课程会介绍 HTTP 协议并实践)协议传送给用户,用户通过点击链接来获得资源。

Web 是比较偏应用层的概念。可以说 network 是我们最宽泛的“网络”概念的底层基础,而 Web 则是指顶层的应用,甚至包含了人与人利用 Web 进行的交互。

用什么来形容 Web 比较好呢?

有的人可能会想到 surfing(“冲浪”),或者说 Surfing the Internet / Web(互联网 / 网际冲浪)。因为我们在网站上浏览网页时就有点像冲浪一般“一页页”地翻过。

不禁想起了腾格尔演唱的电视剧《康熙王朝》的片尾曲《大男人》:“一生有一种大海的气魄,岁月一页页无情翻过”。我们也经常“无情”地快速翻过我们的网页,甚至我们的人生。

但是说到 Web,我们还是用另一个意象来表示吧。

我选择用“蜘蛛网”来形象地表现 Web:

为什么用蜘蛛网(希望对蜘蛛恐惧的朋友见谅)来形象地表示呢?

因为 Web 在英语中有“蜘蛛网”的意思,而且蜘蛛网的每个连接的结点,正好可以表示全球这个大 Web 中的每一台电脑。只要上了网,这些电脑都在 Web 上互联。

这一节中,我们首先要来区分一下 Internet 和 Web 这两个时常容易被混淆的概念。

我们必须对你说:“Internet 不等于 Web !”

Web 是 Internet 的一部分,虽然 Web 是 Internet 中最被人熟知的那一部分服务。

如上图所见,我们可以看到,Internet 是由 Web 和其他服务(service)所组成。

Internet 表示“互联网”,又称网际网路,或音译因特网、英特网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

这种将计算机网络互相联接在一起的方法可称作“网络互联”,在这基础上发展出覆盖全世界的全球性互联网络,称为互联网,就是互相连接在一起的网络结构。

除了 Web,Internet 还包含其他服务:

今天,人们有时候比较容易混淆 Internet 和 Web 的概念,是因为现在越来越多的 Internet 的服务(e-mail,FTP,newsgroups,等)都通过 Web 这个接口来呈现给用户,这些服务中的很多都已经整合到 Web 中。

举一些例子:

其他还有,就不一一列举了。

说了 Internet 和 Web 之间的区别,也介绍了一些常见的 Internet 服务。我们再来看一个很流行的概念:Cloud(“云”),相信你或多或少听说过“云计算”,“大数据”之类名词。

说到 Cloud 的定义,至今没有太统一的说法。各方解释都不太一样。

我们可以简单地把 Cloud 定义为:通过 Web 这个“接口”获取到一些 Internet 服务(service),或者把这些服务本身定义为“云”。

可以用下图来形象地表示:

上图中,用云朵来表示的那些各式各样的 service(服务),就是我们用户要通过 Web 这个接口来获取到的。这些服务有:

当然了,我们一般所说的云或云计算则更复杂,有几种类型。例如:

如果你有兴趣,可以进一步去了解。

下面我们来聊聊 Web 的历史吧,看看这么有意思的 Web 是如何诞生及发展的。

我们简单来介绍一下:

上图为美国当时全国范围的 ARPAnet。

那么谁发明了 Web 呢?

Tim Berbers Lee(蒂姆·伯纳斯·李),就是下面这位大牛,看上去蛮和蔼的。他在 1991 年(也有说是 1989 年...)提出了 Web(World Wide Web 的缩写,或 WWW)。

这张照片其实摄于 1994 年的欧洲核子研究组织(CERN)。

在他之前,没有浏览器,没有 WWW,网络世界一片空白。如果当初为谋取个人利益,蒂姆将自己的 WWW 设想乃至后来的万维网申请知识产权和专利,如今的互联网世界是不可能发展得这么快的。

蒂姆假想说:“那样的话,世界上至少会有 16 种不同的 Web,有 CERN 网,有微软网,有苹果网,等等”。

1994 年,Tim Berners Lee 创立了著名的 W3C(World Wide Web Consortium 的缩写,表示“万维网联盟”)组织,因为他觉得 Web 发展迅猛,需要有一个类似基金会或委员会的机构来规范,以达成全球统一标准。

W3C 后来发明了一系列的语言和规范:HTML,CSS,XML 等。现在的 HTML5 也是他们规定的。

W3C 最重要的工作是发展 Web 规范(被称为 recommendations,表示“推荐”),这些规范描述了 Web 的通信协议(比如 HTML 和 XHTML)和其他的构建模块。

W3C 的官方网站是 http://www.w3.org 。

你如果想学各种技术(HTML,CSS,XML,Javascript,PHP,等等),可以去 W3C 学院: http://www.w3schools.com 。

对应中文网站是: http://www.w3school.com.cn 。

今天的课就到这里,一起加油吧!

下一课: Web探索之旅 | 第二部分第一课:客户端语言

热爱生活,喜欢游泳,略懂烹饪。

人生格言:「向着标杆直跑」

给你一个类似的吧,我学CSS3时候的小练习,画云的

效果图:

代码:

* {

    margin: 0

    padding: 0

}

body {

    background: #ccc

}

#cloud {

    width: 330px

    height: 120px

    background: #f2f9fe

    background: -webkit-linear-gradient(top, #f2f9f3 5%, #d6f0fd 100%)

    background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)

    background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)

    background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)

    background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)

    border-radius: 100px

    position: relative

    margin: 120px auto 20px

}

#cloud:after, #cloud:before {

    content: ""

    position: absolute

    background: #f2f9fe

    z-index: -1

}

#cloud:after {

    width: 100px

    height: 100px

    top: -50px

    left: 50px

    border-radius: 100px

}

#cloud:before {

    width: 180px

    height: 180px

    top: -90px

    right: 50px

    border-radius: 200px

}

.shadow {

    width: 350px

    position: absolute

    bottom: -10px

    background: #000

    z-index: -1

    box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4)

    border-radius: 50%

    -webkit-border-radius: 50%

} <div id="cloud"><span class='shadow'></span></div>