HTML代码基本结构详解：从入门到精通

鸡你太美。

虽然第一个html代码写的非常随意，就四个字：鸡你太美。但是用浏览器打开之后确实是能看到是以网页的形式所展现的。这个现象就有点奇怪了，为什么？讲道理，只要是一种语言，必定有自己的语法格式，得按它的套路去写才能认为代码写的是对的，然后才能去正常的运行。

但是这里就四个字：鸡你太美，它就能把这个东西给显示出来，这是为什么？其实很简单。

·可以看一下，按一下F12，把浏览器的开发者工具给打开。

·然后选中elements标签页，如果是中文版，这里就应该是元素。

·这里有4行文本，这4行文本里面有没有一个比较熟悉的东西？鸡你太美这四个字是不是HTML代码里面写的东西？如果把这个东西改了，鸡你太美baby。

·然后就不再打开HTML文件了，直接按刷新。这里变成了鸡你太美baby，这里是不是也变成了鸡你太美baby。

·再比如加点东西，保存刷新，有没有发现什么规律？这里写什么，这一段就是什么，但其他地方是没变的。

所以有理由相信这份代码的完全体应该是什么？应该就是这个。所以先来把它复刻一下，尖括号。要注意，尖括号得是英文输入法下的尖括号。html，有个had，后面又有一个head，只不过head前面加了一个斜杠。至于这些东西到底是什么意思，等一下再说。

先把代码搞完，鸡左边有个body，后面有个body，下面又有一个斜杠。html好保存，然后刷新，效果和之前的阉割版是一样的。

然后来看一下这些尖括号到底是什么意思，其实还是挺简单的。首先在html里面，像这种用尖括号括起来的东西称之为元素。在国内有的人喜欢把它称为标签，其实都是一个意思，就是元素的意思。所以在这里有几种元素，很明显是三种，一种是html，一种是head，还有一种是body。

这个时候有的小白可能会问了，为什么有的前面是加了个斜杠的？其实是这样子的，在html里面有些元素是有包裹区间的，就比如body元素，body元素里面的数据或者叫内容是从哪到哪？很明显这个是开头，这个是结尾，然后掐头去尾，内容就在这，懂了吧？开头结尾。

所以head元素的数据在哪？就在这，什么都没有。head元素的数据在哪？很明显就是这个。知道元素的概念之后，接下来再看一下这几种元素都是什么意思。

·首先html元素是告诉浏览器，接下来是html代码。

·然后head还有body是什么意思？其实可以把HTML代码想象成是一个人，一个人有自己的头，还有身体，而且人家的脑袋里面此时此刻在想什么是看不出来的。所以head元素里面的内容一般都是去写一些对于页面的一些设置，或者在这个区域里面所看不到的一些东西。

就比如里面可以再加个元素，比如说叫title，title我相信大家应该都知道，就是标题的意思，这个也是一样的，起止。然后中间这里写什么？选项卡的这里名字就是什么？就比如坤坤牛逼，保存，然后刷新，是不是变成了坤坤牛逼？当然，想把这个东西放到别的地方也行，比如说放到body里面，然后保存，一刷新，你看也是坤坤牛逼，对吧？但是一般来说按照规范，一般是放到这种head元素里面去，这是head元素。

·然后接下来是body，body就是人的身体，人家长得什么样子，身材好不好，到底前凸不凸，后翘不翘，一眼就能看得出来，多看一眼都会爆炸的那种。所以在body元素里面，一般都是写一些在这个区域里面能看到的东西，就比如说一些文字或者说一些图片等等，所以这个才是html代码最基本的结构。

·然后回过头来再看一下最初的问题，什么？就是一开始代码不是这个样子的吗？没有，那些head、html、body却依然能在浏览器上正确的显示出来。其实很简单，就是因为虽然就写了这个东西，但是浏览器会读取代码文件里面所写的内容，写了什么就能读到什么。

如果代码不够规范，浏览器就会自动的帮你把这些元素给补齐，补齐完之后才是真正的HTML代码。有了正确的代码之后，浏览器才会根据这份代码来进行渲染，也就是现在所看到的样子。

所以代码千万条，规范第一条，因为永远都不会想知道浏览器到底会对不规范的代码进行什么样的修改，把它改成什么样子。所以html代码的最基本的格式就是html、head、body。修改后的结果:鸡你太美。