只需3分钟，轻松明白一个网页是如何制作的

开篇寄语：

我们之所以迷茫是因为：明知是脑子饿极了，却只会拼命喂肚子。

人表达的永远不是他所说的内容，而是渴望被理解的心情。

之前做了一期关于Oracle的系列，很多同学给悠悠反馈说很希望看到这样有干货又连贯的内容。所以，今天开始做一期关于前端的系列。没学过的有服气了，如果已经学过了，可以夯实一下自己的基础。

不多说，直接开始吧。

一、HTTP和WEB工作原理

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

WEB本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。

当你想进入一个网页，或者其他网络资源的时候，通常你要首先在你的浏览器上键入你想访问网页的统一资源定位符（Uniform Resource Locator)，或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址。

接下来的步骤是给所要访问的网页，向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。

网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了你所看到的“网页”。

大多数的网页自身包含有超链接指向其他相关网页，可能还有下载、源文献、定义和其他网络资源。像这样通过超链接，把有用的相关资源组织在一起的集合，就形成了一个所谓的信息的“网”。这个网在因特网上被方便使用，就构成了最早在1990年代初蒂姆·伯纳斯-李所说的万维网。

二、什么是HTML

HTML就是万维网中的超文本，==HTML也叫做超文本标记语言。==”超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。在Web服务中，信息一般是使用HTML格式以超文本和超媒体方式传送的，所使用Internet协议是HTTP协议。

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。

HTML网页文件可以使用记事本、写字板、HBuilder、Sublime等编辑工具来编写，以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。

<!DOCTYPE html>
<html>

</html>

三、HTML基础语法

`<!DOCTYPE html>`

格式一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 格式二：<!DOCTYPE html> 推荐的方式 Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。

由于使用的场景或者版本的更替间，HTML使用的标准不同，所以需要浏览器按照不同的标准来解析HTML文本内容，这就需要告知浏览器我当前的HTML页面是按照那种方式进行编写的。没有该声明，将是你HTML噩梦的开始。这行代码必须写且务必在文档首行。

<!DOCTYPE html>

`<html></html>`

<html>标签用于HTML文档的最开始，用来标识HTML文档的开始。而</html>标志放在HTML文档的结束，用来标识HTML文档的结束，两个标志必须一块使用。

<!DOCTYPE html>

`<head></head>`

<head>和</head>构成HTML文档的开头部分。<head>和</head>标签之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。

在此标志对之间可以使用<title></title>、<meta>、<link>、<script></script>等标签。

<meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用什么编

码解析文档，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示文。

<link>：用来引入css文件。

<style></style>：编写css代码。

<script></script>：用来引入js文件或编写js代码。

<!DOCTYPE html>

`<title></title>`

<title>定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。

`<meta></meta>`

<meta/>用来提供关于文档的信息

<!DOCTYPE html>

以上三部分是SEO搜索引擎优化的主要部分

`<body></body>`

一般情况下浏览器上显示的内容的都放在body中，不排除其他标签可以不用body，比如frameset框架集标签。

<body>和</body>是HTML文档的主体部分，在此标志对之间可包含<p></p>、<h1></h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

<!DOCTYPE html>

受篇幅限制，今天我们就到这里。下一篇将给大家总结HTML的常用标签，搞定这些就ok了。另想获取配套视及文档资料，添加码歌悠悠QQ： 1811119218 ，立即获取。