带你了解网页是怎样做出来的

2020 年 3 月 11 日
筆記

随便打开一个网页，这里用某首页举例外观如下：

鼠标右键，可以查看它的源代码：

对的，你没有看错，就是上面这些密密麻麻的字符拼凑在一起就构成了这样的一个百度首页，淘宝网站的一个个商品网页，视频网站等也是同样的原理组成的。网页组合在一起就构成了网站，许许多多的网站互相连接在一起就构成了互联网，当然背后还有很多的技术暂时就省略掉了。

因为有了互联网，我们的生活学习工作才能够如此的便利，那刚才哪些密密麻麻的的字符都是什么意思呢？为什么它们拼凑在一起就会出现排版好的各种文字，图片视频等。

什么是HTML语言

定义：

HTML是HyperText Markup Language三个英语单词的缩写，简称：HTML。中文名：超文本标记语言。是一种用于创建网页的标准标记语言。

之前文章讲过，标记语言的百科解释，具体详细内容可以点击这里。标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。标记语言不仅仅是一种语言，就像许多语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。

怎样使用HTML标记语言

上面的文字概念看上去很难理解，下面就通过具体的标记符号来认知HTML这门标记语言。

常用HTML标签

网页上通常我们可以看见有大小不一，颜色也不一样的字体；还有图片，链接，表格等，这些外观之所以会表现的不一样，那是因为它们用了不同的符号标记-标签。

HTML 标题

标题（Heading）标签，通过h1-h6标签来定义6级不同大小的标题，通常前面三种就可以了。

HTML 段落

段落(Paragraph)标签，通过标签 p 来定义的，表示这是一个段落。

HTML 链接

HTML 链接是通过标签 a 来定义的。href后面填写网页地址，点击后可以跳转到百度的网站去。

HTML 图像

HTML 图像是通过标签 img 来定义的。src是填写图片的地址的。

上面只是简单的介绍了常用的一些标签，更多详细的内容可以看官方文档，这里推荐菜鸟教程https://www.runoob.com/html/html-tutorial.html，个人觉的还是很不错的，查阅基础，简单入门还是很方便的。

最简单的一个网页模板

在你的桌面上创建一个名字叫做 template.html的文件。

里面填上下面的内容，就变成一个最简单的网页模板文件了，双击打开在浏览器就可以看见了，里面的内容可以更具自己的需要去改变。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>网页标题</title></head><body>    <!-- 网页内容开始-->    <h1>标题</h1>    <p>这是网页内容，我想要做一个属于自己的网站</p>    <img src="yezi.jpg" width="200" height="200"/>      <!-- 网页内容结束--></body></html>

运行效果：

你没看错，网页就是这样实现的，网页其实就是一个利用HTML标记语言编写的一个文件，只要按照它的格式要求就可以，而浏览器就是运行HTML标记语言的环境（浏览器看到html结尾的文件就知道是HTML比较语言，就会解析到对应的格式外观），在其它地方可能就看不到网页这种效果了。

网页访问原理

其实访问网站就是访问某个文件，我这里访问的是本地文件内容，所以图片的地址栏显示的就是我的网页来源地址，所以只要你只到某个电脑的文件地址，然后有权利获取，那么你就可以访问到对应的文件了。

能理解了，但是为什么访问http://www.baidu.com也可以获取到文件了，实际上原理也是一样的

实际上原理也是一样的)，baidu.com就是一个存放网页的地址。下面我查看了一个百度的IP地址是220.181.38.148，通过这个也是可以访问到百度的首页的，和前面的baidu.com是等效的。每一个IP地址全世界都是独一无二的，代表某个位置；但是如果要记住IP地址数字去访问网页比较难，所以出现域名了，比如baidu.com就是域名，我的yeching.info也是域名。它们都是一一对应到一个IP地址的，同理域名也是独一无二的。它两中间还存在一个DNS解析器，当地输入baidu.com，实际上通过DNS解析器就获取到对应的IP地址，也就到达对应的电脑（也叫服务器），获取到对应的文件了。