网页为什么叫HTML?

原创

守护最温柔的金木

修改于 2020-08-10 11:02:02

2.5K0

修改于 2020-08-10 11:02:02

文章被收录于专栏：all web technology all web technologyall web technology

首先，来简单的介绍一下什么是web？Web（World Wide Web）即全球广域网，也称为万维网。我们常说的web端就是网页端。

我们先来思考一个问题，在生活当中我们会在哪里看到网页呢？比如，我们在电脑上可以查看网页，就像是天猫之类的，或者是在手机上查看网页，微信上不管是里面的文章还是公众号都是网页制作完成的。这时候你就会发现一个特点，那就是所有的网页都有一个共同的载体，那就是浏览器，没有浏览器的话，网页是无法执行的，就像是我们平时使用的app一样，它们要依赖于我们的手机操作系统，如果没有手机操作系统的话，app也就无法执行，那就会没有价值。网页是构成网站的基本要素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。

那么我们能使用的浏览器种类很多，第一个浏览器是欧朋，英文是Opera，这个浏览器在国内使用的不多。第二个是火狐，英文是FireFox，这个可能比较熟悉。第三个是Internet Explorer，是win系统自带的，我觉得还行，这毕竟老牌，就是速度慢了，也不支持插件。第四个是苹果自带的，也就是Safari，这个浏览器，我也觉得不好用，甚至有时候还卡的很。第五个就是我们最最最熟悉的谷歌浏览器，英文名是Chrome，很稳定，然后插件也很多，很快，开发者首选。第六个的话，QQ浏览器，这个我就不多介绍了，当然了，还有很多很多的浏览器，像上面UC啊，360啊，很多，但是面试的时候，说这六个足够了，我依稀记得我当初面试的时候，我连谷歌的英文都忘了，也是比较尴尬的一件事情。补充一点就是edge浏览器，我也觉得还行，毕竟内核基于谷歌。那么手机上我们主要使用的浏览器有三个，一个就是iPhone自带的Safari，一个就是安卓的Chrome，当然了我这么说是有歧义的，因为现在很多手机都是自己开发的自带的浏览器，像三星的就是自己做的，但是在安卓的阵营里面，主要还是chrome为主。这第三个，就是微信里面的，不管你是看文章，还是公众号，只要在内容的顶部，按住内容向下滑动，你就会看到“网页由mp.weixin.qq.com提供，QQ浏览器X5内核提供技术支持”，这个呢是之前展示的，现在的话只会展示“网页由mp.weixin.qq.com提供”，这就表明了我们在微信里看到的其实都是网页，这个微信的内置的浏览器目前来说bug还是挺多的，但是作为中国人来说，我们大部分时间可能都是在和这个浏览器打交道，因为我每次换手机的时候，QQ浏览器都是第一个下的，真香！

如果你想去了解更多的关于浏览器的市场占有份额，可以去https://tongji.baidu.com/research/site?source=index#browser这个地址可以让你看到每个时段的占比。

既然都说到这里了，那就干脆把浏览器的组成也说了吧。浏览器分成两个部分，一个是渲染引擎，也就是我们俗称的浏览器的内核，另一个是js引擎。

渲染引擎的作用，就是来解析html和css的渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息，我们通俗的来讲的话，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。但是这个渲染引擎也有致命的缺点，因为它是浏览器兼容性问题出现的根本原因。至于手机端的浏览器内核是啥，下面我去大佬的博客下面截了一张图，大家可以自行拓展一下，老样子，我这里也放个链接https://www.cnblogs.com/diantao/p/5292704.html。另外补充一点就是，很多大佬的回答都是差不多的，可能没办法找到原博主真正的文章，希望大佬看到我的文章的时候，不要怪我哈，感谢感谢。

js引擎，也被成为js解释器，用来解析网页中的JavaScript代码，对其处理后再运行。浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。

至于浏览器的工作原理，网上有很多整理的版本，我就截图了，想去看原文的，可以去下面这个地址https://www.2cto.com/kf/201202/118111.html。

那么，由此我们想到下一个问题，这么多的浏览器，它们之间的默契在哪里，你会发现，虽然浏览器不同，但是你浏览的界面是一样的，是兼容的，那这页面呢就是叫HTML。我来举个例子，就比如说，我买了一个4k的显示器，但是我的显卡是2060的，可以吗，当然是跑不动的，不要难为20系的入门显卡了，2060太难了吧。那么我这一个举动就迫使我的显卡必须也提升上去，所以说这是一个标准，不遵守标准，那么就是孤掌难鸣了，谁都别想好过，所以说浏览器之间也是有标准的。那么，在软件行业里，有一家公司就非常的特立独行，不遵守标准，接口和所有的公司都不一样，不要问，问就是苹果公司

为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

接下来，我们来说说网络制作的编程语言是谁来制作的，推广和维护的，这个组织就是W3C，我刚认识这个组织的时候，以为是3个厕所的意思，甚至还觉得名字应该改为WC3，但是好像木得美感，后来才知道W3C的意思，它的真正的意思是万维网联盟，是World Wide Web Consortium的缩写，平时上网的时候，你会输三个w吧，就好比是www.baidu.com,对了，就是从这里来的，地址https://www.chinaw3c.org/，想要了解的话可以去康康。这个W3C不是公司，是一个非盈利的组织，所以这里面的成员都是来自世界各地的，在很多国家都设立了办事处，在全球建立了四个中心，分别是美国的麻省理工学院、法国的欧洲数学与信息学研究联盟、东京的庆应大学、北京的航空航天大学。其实像W3C这样的非盈利组织还有不少的，有OpenSSL，在软件行业的地位也是非常非常的重要，怎么说呢，全世界80%以上的网络通信都使用了openssl提供的加密工具来保障信息的安全，但是呢这个组织我听说呢是非常的穷，都是靠资助的，没有全职的员工，成员呢都是兼职的，直到2014年之后，陆陆续续就有4个全职员工了，毕竟被捐了三百万(感觉聊远了，但是我觉得这个组织以及里面的精英人才都是值得我敬佩学习的) 。

最后让我们回到主题，HTML到底是啥？HTML不是编程语言其属于标记语言用来创建网页。这里直接就举例子了吧，之前学习都是用记事本的，太远古时期了，我们直接vscode编辑器走起。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  给大家推荐一首歌吧《平凡之路》
</body>

</html>

那么代码呈现出来的效果是什么呢？

那我们可以稍作修改，想修改一下这段话

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  给大家推荐一首歌吧《平凡之路》,这是一首很好听的歌！！！
</body>

</html>

可以发现，我们改了之前的话，在后面加上了一段话，我们只要在打开的页面上点击刷新，就会看到变化了

回到代码，我们会发现，这个代码除了开头的这个<!DOCTYPE html>看着比较奇怪，其他的都是用了尖括号包裹了起来，是成对出现的，像是这里面的<html></html>、<body></body>、<head></head>、<title></title>。

此时，这段文字我想让它居中显示，该怎么写呢？我们首先想到的就是中间的英文单词是center，所以，我们只要在文字的两边加上一对center的标签就可以了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <center>给大家推荐一首歌吧《平凡之路》,这是一首很好听的歌！！！</center>
</body>

</html>

此时，我们再去刷新一下页面，会发现刚刚的那段左对齐的文字居中了。但是，我们加入的center没有出现在两边，说明这个center的标签是有居中的作用的，也就是有一定的含义，目前你可以这么理解。

那么除了这个center标签，其实还有很多，像是button这个标签也是非常的神奇，button就是按钮的意思，我们可以试着写一下。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <center>给大家推荐一首歌吧《平凡之路》,这是一首很好听的歌！！！</center>
  <button>这是一个按钮呀</button>
</body>

</html>

此时，我们保存一下代码，一定要保存你刚写的代码，再刷新才会生效，前面忘记说了，一定要先保存再刷新，不然木得效果的，此时我们会发现，在文字的左下方出现了一个按钮

到这里，我们可以试着总结一下，像是上面代码里成对出现的标签：<html></html>、<body></body>、<head></head>、<title></title>、<center></center>、<button></button>，已经不再是普通的文字内容了，它们不会显示在页面上，每个标记都有自己的作用，这些标记超越了普通文本的意义，叫做HyperText，它们全部以标记的形式来书写，所以HTML也叫做超文本标记语言，英文是HyperText Markup Language。