您的位置：首页 > 其它

自己写的小白教程《Web开发的基础原理》(1)

2017-02-13 13:08 309 查看

本文主要面向零基础的同学，旨在解释Web开发的基本概念，作为入门读物。因本人也只是入门水准，能写点小页面的业余码农，因此表述不甚专业，错误难免，请读者见谅。

谈起网页浏览、web开发，首先就会遇到一连串的名词HTTP、HTML、CSS、Javascript等等，这些名词是什么意思，起到什么作用，常常让初学者困惑。在此，让我们通过一些简单的场景，来看看当用户浏览网页时，会发生什么。随着逐渐深入这些场景，我们会依次了解各种概念与作用。

1. 从最简单的网页浏览说起

首先，用户在浏览器地址栏输入一个网页地址。这个地址指向了该网页文件在互联网中的位置。

Step1. 用户打开浏览器，输入一个网址http://www.gov.cn/guowuyuan/index.htm

Step2. 浏览器发出一个HTTP请求。

Step3. 网站的web服务器软件，在80端口监听到用户发来的请求。然后通过计算调度，准备好用户所要的web文档

Step4. 将index.htm网页文件装载在http响应中发回给用户。

Step5. 用户浏览器收到index.htm文件，按照文件中的内容，将网页呈现在显示器上。

我们来详解这个流程：

http://www.gov.cn/guowuyuan/index.htm是一个URL，指向互联网上的一个网页文件`index.htm`，HTML文件是什么，稍后再说。

这个请求是基于HTTP协议的。HTTP协议全称是超文本传输协议（HyperText Transfer Protocol），超文本本质还是文本，参照通信的概念，HTTP是一种基于文本的“信令协议”，是客户端和服务器端之间发起请求(Request)和应答(Response)的消息载体。

发起请求是这样的：

GET /guowuyuan/index.htm HTTP/1.1
Host: www.gov.cn
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://www.gov.cn/index.html Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.3

Web服务器软件是网站服务器上安装的一种软件，专门为web客户端提供web文档的程序。目前主流的是Apache(TomCat)、IIS、Nginx。

服务器发送给用户的网页文件，是装载在HTTP响应消息中的。响应消息的头部一般是这样的：

HTTP/1.1 200 OK
Date: Wed, 27 Jan 2016 12:21:01 GMT
Server: Apache
Accept-Ranges: bytes
X-Powered-By: ModLayout/5.1
Content-Type: text/html

响应消息的本体就是

index.htm

这个文档，这个文档是纯文本的，采用HTML语法。HTML(HTM)是一种“超文本标记语言”，可以理解为它用文本的方式，按照一定的语法，描述了网页元素的尺寸、位置、样式、文字内容。它长这样：

<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>标题文字：这是XX网站</h1>
<p>这是<b>粗体</b>正文</p>
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
</ul>
<table border=1 cellpadding=0 cellspacing=0>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
</body>
</html>

HTML的语法后面会展开介绍，这里只需要了解基本概念即可。

浏览器收到响应以后，会根据html文档的描述，重新绘制网页。注意，它并不是简单地将文档中的文字直接在浏览器里显示出来，而是要按照文档中对内容的描述，重新绘制网页。例如本例中，浏览器识别到“标题文字：这是XX网站”是在

<h1>

标签中的，就会把他渲染成字体很大的标题。

<ul>

和

<li>

被渲染为带项目符号的列表，还有描述表格的语法等等。上例的效果是这样的：

到此小结一下，记住两点：浏览器与服务器之间的请求和响应基于HTTP协议，消息全是文本格式的；服务器发给浏览器的网页是超文本(HTML)，你看到的样式是浏览器绘制的。

本章节介绍了最简单的静态网页的浏览过程：

2. 多媒体资源

上一节中请求的地址，是一个纯文本的htm文件，浏览器可以自行渲染文本的样式。但网页中的图片怎么办？图片不能夹在html文本中传送，浏览器也不可能自己画一张图片。所以图片等富媒体资源是在html文档中表明地址链接，通过http请求另外传送的：

<div class="fwy-img"><img src="/govweb/xhtml/images/gwy/gwy_lkq.jpg"></div>

浏览器从获取的html文档中，提取出上述图片链接，重新向网站服务器发起一个http请求，请求的url地址就是图片的地址。

GET /govweb/xhtml/images/gwy/gwy_lkq.jpg HTTP/1.1
Host: www.gov.cn
Connection: keep-alive
Cache-Control: max-age=0
If-Modified-Since: Wed, 18 Nov 2015 19:52:46 GMT
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
Accept: */*
Referer: http://www.gov.cn/guowuyuan/index.htm Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.3

在这个请求里，有很多值得玩味的http头域，在此不详细解释了。而网站返回的响应是

HTTP/1.1 200 OK
Last-Modified: Wed, 18 Nov 2015 19:52:45 GMT
Accept-Ranges: bytes
Content-Length: 1281
Content-Type: image/jpeg
Date: Wed, 27 Jan 2016 14:55:01 GMT
Server: Apache
ETag: "228429d-501-524d5fc6a1d40"

其中

content-type

头域指明了消息体是jpeg图片文件。如果一个网页内包含很多图片，就会发起很多http请求。这一点在分析LTE信令的时候已经了解到。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航