web入门

风之之
172 阅读18分钟

Web入门

在学习web开发之前，我们需要了解什么是web，以及web开发在其中扮演的角色。

什么是网络(Web)，什么是互联网（Internet）?

当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式 (通常是网线) 还是无线方式（比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。

这里这展示有线连接的网络，无线连接也是一样的原理。

internet-schema-1.png

如果需要将多台电脑连接起来，通过两两相连的方式，就需要更多的网络：

internet-schema-2.png

为了解决这个问题，网络直接可以设计一个中转站路由器（router），它只做一件事：转发网络数据。比如将电脑A的信息转发给电脑B，同样也能将电脑B的信息转发给电脑A，就像这样：

internet-schema-3.png

这样，网络的布局已经好了很多了，但是当电脑数量增多，物理距离变远，一台路由器显然无法满足，那么我们可以增加多台路由器来简化模型：

internet-schema-4.png

我们把电脑连接路由器，接着路由器连接路由器，我们就会有无穷的规模。

internet-schema-5.png

这样网络越来越接近我们所说的互联网，但是我们遗漏了一些东西。当我们的电脑已经相互连接连接起来之后，我们如何相互交流呢？为了连接电话这种网络我们需要一种基础设备叫做调制解调器（modem），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。

这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP 是一家可以管理一些特殊的路由器的公司，这些路由器连接其他 ISP 的路由器。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。

internet-schema-7.png

如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP 代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：192.168.2.10。

对于电脑这样已经很好了，但是人类却很难记忆这一串地址。为了简单处理，我们给 IP 地址取一个容易阅读的别名：域名。比如，google.com 被用于 IP 地址 172.217.7.14。这样我们通过这些域名可以很容易的通过网络连接到电脑。

当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站，那么，互联网（Internet）和网络（web）是否就是一个东西？我们可以粗略的这样认为，但实际上，互联网是一种基础技术，它允许我们把成千上万的电脑连接在一起，互联网是基础设施，而网络是建立在这种基础设施之上的服务，即我们所说的万维网：

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

2e2eb9389b504fc2debbf2b7e6dde71191ef6d9f.jpg

这一套系统中就涉及了各种为了实现最终信息传递的技术：网络连接、网络传输协议、域名解析、HTTP超文本传输协议等等。

为了让信息能够在互联网中自由穿梭，各种规范协议是其稳定运行的基础，而这里的信息，也就是我们看到的各种网页、邮件等等服务，以及看不到的网络拨号等等。

而Web开发，就是为实现这些信息传输服务而进行的一系列编程工作。其中，最为常见、应用最为广泛的就是网页的开发，即我们常说的web前端(front end)。

一个网页包含了什么

互联网的出现，让信息爆炸式发展，随着计算机的出现和逐步的普及，信息对整个社会的影响逐步提高到一种绝对重要的地位。信息量、信息传播的速度、信息处理的速度以及应用信息的程度等都以几何级数的方式在增长。

而这些网络传播的信息，绝大部分都以网页（Web Page）的形式展现在人们眼前，人类从原子时代进入了信息时代。

chahua3342.jpg

如今的网页五花八门，不仅可以浏览信息，也能进行各种复杂计算，为人们提供了各种便利。

但网页再复杂，也不外乎文字、图片、声音、视频等各种媒体信息，**如何将这些媒体信息组织起来，并呈现出不同的网页效果呢？**这就需要专门定义一种的语言来规定这些媒体信息的组织逻辑，即html语言。

HTML英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 [Tim Berners-Lee](baike.baidu.com/item/Tim Berners-Lee/1836386?fromModule=lemma_inlink)和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档。

HTML不算是一种真正意义上的编程语言，只能算是一种记录网页媒体信息的特定文档。

那何为编程语言呢？

何为编程语言

b21c8701a18b87d6277f650f06423f381f30e92457c2.jpg

编程语言（programming language）？可以简单为计算机和人类之间进行交流的语言，好比不同不同国家的人通过不同的语言交流，计算机虽然只是人类发明的一种工具，但由于其底层构造的特殊性：当计算机工作的时候，电路通电工作，于是每个输出端就有了电压。电压的高低通过模数转换即转换成了二进制：高电平是由1表示，低电平由0表示。也就是说将模拟电路转换成为数字电路。

17世纪至18世纪的德国数学家莱布尼茨，是世界上第一个提出二进制记数法的人。用二进制记数，只用0和1两个符号，无需其他符号 ，逢2进1。

数字电子电路中，逻辑门的实现直接应用了二进制，现代的计算机和依赖计算机的设备里都使用二进制。所以说二进制的语言是计算机语言的本质。

计算机发明之初，人们为了去控制计算机完成自己的任务或者项目，只能去编写“0”、“ 1”这样的二进制数字串去控制电脑，其实就是控制计算机硬件的高低电平或通路开路，这种语言就是机器语言，也就是第一代编程语言。

不难看出机器语言作为一种编程语言， 灵活性较差可阅读性也很差，为了减轻机器语言带给软件工程师的不适应，人们对机器语言进行了升级和改进：用一些容易理解和记忆的字母，单词来代替一个特定的指令。通过这种方法，人们很容易去阅读 已经完成的程序或者理解程序正在执行的功能，对现有程序的bug修复以及运营维护都变得更加简单方便，这种语言就是我们所说的汇编语言， 即第二代计算机语言。

比起机器语言，汇编语言具有更高的机器相关性，更加便于记忆和书写，但又同时保留了机器语言高速度和高效率的特点。汇编语言仍是面向机器的语言，很难从其代码上理解程序设计意图，设计出来的程序不易被移植，故不像其他大多数的高级计算机语言一样被广泛应用。所以在高级语言高度发展的今天，它通常被用在底层，通常是程序优化或硬件操作的场合。

在编程语言经历了机器语言，汇编语言等更新之后，人们发现了限制程序推广的关键因素——程序的可移植性。需要设计一个能够不依赖于计算机硬件，能够在不同机器上运行的程序。这样可以免去很多编程的重复过程，提高效率，同时这种语言又要接近于数学语言或人的自然语言。在计算机还很稀缺的50年代，诞生了第一个高级编程语言。当时计算机的造价不菲，但是每天的计算量又有限，如何有效的利用计算机有限的计算能力成为了当时人们面对的问题。同时，因为资源的稀缺， 计算机的运行效率也成为了那个年代工程师追寻的目标。为了更高效的使用计算机，人们设计出了高级编程语言，来满足人们对于高效简洁的编程语言的追求。

随着计算机的发展，其计算能力的逐步提高，编程语言的发展也让这种强大的计算能力得到发挥，成为人类新时代生产力的代表。

前端三剑客

上面说到HTML其实只是一种用来编写网页的文档，但实际上网页的发展离不开另外两种语言，CSS和JavaScript。

CSS

CSS，英文全称：Cascading Style Sheets，即层叠样式表，是专门用来修饰HTML文档的一种样式表，CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

CSS的出现，让HTML专注于页面结构和内容的表达，而CSS则专注于网页样式，让同样内容的网页展现出千变万化的能力。比如说，网页需要如何布局，网页需要什么样的背景色，需要什么样的字体，各种复杂特效都可以交给CSS来完成。

css-animation.gif

JavaScript

而JavaScript是什么做什么的呢，JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。相对于HTML和CSS这种”文档“语言，JS是真正意义上的高级编程语言。

JavaScript作为一种脚本语言，可以嵌入HTML文档中以实现静态界面的各种交互效果，让网页具备除了展示信息的基本功能外更多可交互的功能：比如动态更新网页信息、监听用户的鼠标、键盘等动作，并动态做出响应。

编程任务

作为一个程序员，需要了解各种各样的概念，但我觉得更重要的是，需要动手写出来，并让写出来的代码能在计算机上执行出你需要的效果。

下面是会介绍HTML、CSS的基础知识，并介绍三种语言如何组织起来，来展现出一个真实的网页。（这里暂不介绍JS，因为我们现在只需要实现网页的传递信息的基本功能就够了）。

HTML做了什么？

HTML中文名超文本标记语言，是用来定义网页内容和结构的语言。何谓标记语言？标记语言，就是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。

有点拗口，简单来说，就是用特定的标记来标识特定的含义，比如在html文档中，h1用来标识一级标题，p用来标记一个段落。这样的标记称之为标签，而html文档就是由这些不同含义的标签组合起来的。

html标签

HTML的标签有特定的结构，比如我们需要在网页中写一个段落文子，就可以使用段落标签p来这样标识：

<p>My name is Jinx, I am 18 years old.</p>

其中，p标签我们使用了<>和</>包裹起来，这分别叫起始标签和结束标签，用来标识标签的开始和结束，而标签内部的文字就是标签内容，这就是标签的基本结构：

<开始标签>标签内容</结束标签>

标签标识（比如上面的p）用于表示这段信息的意义，p就表示段落（paragraph的缩写），不会直接显示在网页上。

标签内容就表示标签内实际的信息，比如上面的My name is Jinx, I am 18 years old.，就是这个段落的实际内容，会直接展示到网页上。

html文档的基本结构

html除了标签有基本结构，整个文档也是有基本结构的，我们需要熟记它，这是html文档的固定结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Tile</title>
  </head>
  <body>
  </body>
</html>

可以看到，这个html文档有很多标签组成。先看第一句：

<!DOCTYPE html>

这是文档类型的标记，DOCTYPE是文档类型的意思，这句代码的意思就是：这个文档的文档类型为html。

我们看下一句，也是第一个用到的标签html：

<html>
    ...
</html>

这是整个html文档的开始标签和结束标签，表示这个html文档的开始和结束。

在html标签内，有两个子标签：head和body：

<head>
    ...
</head>
<body>
    ...
</body>

head是头的意思，表示html文档的头部，body是身体的意思，表示html文档的内容区域。

然后再看head标签内的meta标签，这是专门用于记录html文档信息的一种标签，此处暂时不需要深入了解。（另外，你可能注意到这个标签没有结束标签，这是没问题的，在html中某些特殊标签是不需要结束的，因为这些标签不需要标签内容，自然不需要写结束标签，当然，你写了结束标签也没有任何问题）

最后还有一个title标签，title是标题的意思，这个标签自然就表示html文档的标题，也就是网页中，会显示在标签页上的那段文字：

Snipaste_2022-11-06_20-46-06.png

如果我们需要编写网页内容，就在body标签内编写需要的标签即可，比如我们需要用网页展示一首李商隐的古诗：

无题
昨夜星辰昨夜风，画楼西畔桂堂东。
身无彩凤双飞翼，心有灵犀一点通。
隔座送钩春酒暖，分曹射覆蜡灯红。
嗟余听鼓应官去，走马兰台类转蓬。

我们可以直接将这段文字复制到body标签内看看效果。

为了在本地能直接预览效果，我们复制上面的代码到一个新建的文档中，将文档后缀改为.html，然后用浏览器打开，就能看到网络上看到的网页的实际效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Tile</title>
  </head>
  <body>
      无题
昨夜星辰昨夜风，画楼西畔桂堂东。
身无彩凤双飞翼，心有灵犀一点通。
隔座送钩春酒暖，分曹射覆蜡灯红。
嗟余听鼓应官去，走马兰台类转蓬。
  </body>
</html>

用浏览器打开后，我们发现，显示的网页是这样的：

我们发现，所有文字都跑到一行去了，这不是我们设想的效果，我们喜欢文字有换行效果，看起来更像是一首古诗，而换行我们可以用段落标签<p>来实现（当然也有很多换行效果的标签，这里用段落也符合我们的需求），而标题我们用表示标题的标签h1来实现，这样，body内的代码就变成了这样：

<body>
    <h1>无题</h1>
    <p>昨夜星辰昨夜风，画楼西畔桂堂东。</p>
    <p>身无彩凤双飞翼，心有灵犀一点通。</p>
    <p>隔座送钩春酒暖，分曹射覆蜡灯红。</p>
    <p>嗟余听鼓应官去，走马兰台类转蓬。</p>
</body>

Snipaste_2022-11-06_20-52-38.png 保存本地文档，刷新浏览器，就能看到显著的变化：

很明显，这个网页已经有诗歌的结构和样式了，这就是标签的真正意义：为内容赋予特定的意义。

好比无题这两个字用h1标签标识后，无题就是一个标题了，就不是一个普通的文字了，浏览器自然会将这两个文字解析为标题的样子，并展现到你的屏幕上。另外四句诗句也是一样的道理，因为有了p标签的标识，就有了段落的效果，浏览器就会将这些段落文字换行显示。

现在，我们再来回忆一下html的定义：超本文标记语言，就能知道为何叫标记语言了，至于为何是超文本，我的理解是这些网页信息已经超越了我们日常所见的文字，网页不只是能展现文字，还能展示图片、声音、视频等媒体信息，因此称为超文本。

html内置的标签还有很多，能满足我们不同的需求，这里不再赘述，后面会慢慢学到。

CSS做了什么？

当我们的html写好之后，可能会略显单调，因为我们平常所见的网页都是五光十色，绚丽多姿的，而CSS（层叠样式表）就是专门用来处理网页样式的一种语言。

既然是一种语言，就有一定的规范，css也是如此，我们要为网页定义样式，首先需要定位到网页上的具体目标，比如我希望修改上文网页中标题的颜色，首先需要定位到这个标题，这个标题使用的标签为h1，在css中，可以直接用标签名来定位标签，所以可以直接这样定位：

h1

定位到这个h1标签后，我们就要修改样式，这里我们需要修改文字颜色，我们需要使用特定的语法标记来实现，比如定义字体颜色的标识为color，颜色值可以用英文中的各种颜色值，如red（红色）、blue（蓝色）、yellow（黄色）等等。这样，css代码就可以这样写：

h1 {color: red}

前面的h1用来定位网页中标签的位置，称为选择器。

后面color: red用来设置文字的颜色，称为样式声明。样式声明要用{}包裹起来，如果有多条样式声明，需要用;分隔开。

而css就是这样一条一条语句组成的代码，基本结构就是：

选择器 {样式名: 样式值; 样式名: 样式值;}

写好的选择器可以内嵌到html文档的style样式标签中，style一般放在head标签内，就像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Tile</title>
    <style>
        h1 {color: blue;}
    </style>
  </head>
<body>
    <h1>无题</h1>
    <p>昨夜星辰昨夜风，画楼西畔桂堂东。</p>
    <p>身无彩凤双飞翼，心有灵犀一点通。</p>
    <p>隔座送钩春酒暖，分曹射覆蜡灯红。</p>
    <p>嗟余听鼓应官去，走马兰台类转蓬。</p>
</body>
</html>

然后我们刷新一下网页，就可以看到标题颜色发生了变化：

Snipaste_2022-11-06_21-32-52.png

比如我们需要将诗句的颜色换成绿色，也是一样的思路。首先，定位到诗句的位置，诗句使用的是p标签，所以选择器就是p（会定位到html内所有的p标签），修改颜色的样式名为color，颜色值为green，所以，完整的样式声明为：

p {color: green;}

我们将这个句子放到style标签中，再刷新网页，就能看到这样的效果：

Snipaste_2022-11-06_21-37-11.png

除了颜色，能定义样式的样式名也有很多，这里同样不展开赘述，后续再深入了解。

现在，我们需要自己动手实现上文所展示的网页效果，并理解这些代码所起到的作用。

参考

avatar
文章
阅读
粉丝