在上节课学习中，我们已经了解了，如何在一个超文本当中，为超文本的内容添加标记，没错，就是使用称之为标签的东西，为文本内容添加标识，也正是因为一个个标签的存在，构成了我们HTML的整体结构。
在进入本节课的学习之前，首先先带领大家看一下，构成一个HTML需要的最小的结构。
如图所示的一个个元素，便构成了我们HTML当中的一个最小结构，通过上节课的学习，我们已经了解到什么是标签，其实就是由一对“<>”（在这里需要注意一下，HTML中构成标签所使用的尖括号应该是‘<>’，而不是中文的'《》'）包裹起来的内容，便是标签，那么在上图HTML的最小结构中，都有哪些标签，同学们先自己思考一下。
现在，我们通过这个最小结构来找一些，它其中所包含的标签，首先，我们采用从HTML最顶端到最低端的顺序开始，那我们发现，第一个出现在我们眼前的标签是<!DOCTYPE html>标签，出现在页面结构中的第二个标签是<html>标签，第三个标签则是<head>标签，第四个是<meta charset="UTF-8">标签，第五个是<title>标签，第六是，至此同学们是不是会存在一些疑问，说第六个标签</title>还是</head>,还是<body>呀，如果你出现这个样的困惑，那么很好，说明你是在主动思考式的学习，而不是被动灌输式的学习。
那么在这里我们需要了解一下，标签的构成了，在HTML中，我们通常所使用的标签，都是一对对构成的，就像是我们教室中的前后门一样，如<html></html>，<head></head>等，从这些标签中，我们不难发现，他们都是有<></>这样的结构构成的，只不过是尖括号中的内容有所不同吧了，而我们通常将一对标签中，像<html>这样的标签称之为开始标签，而像</html>这样的标签称之为结束标签，就像是一间教室中的前门和后门一样。而一对完整的标签也大多由开始标签和结束标签共同构成。
因此，在我们的页面结构中，我们习惯上认为</head>同属于<head>，而</title>同属于<title>，这样，在我们的页面中出现的第六个标签理所应当的便是<body>了。
其实如果我们更准确的描述页面中的标签应该是
1.<!DOCTYPE html>
2.<html></html>
3.<head><head>
4.<meta charset="UTF-8">
5.<title>Insert title here</title>
6.<body></body>
这些都是HTML中的标签，我们曾经说过，标签的作用是用来标识文本的，那么我们接下来，就来看一下，标签是如何标识文本内容的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
当我们将如上代码保存成为文件时（记得要保存成.html格式的文件），用浏览器打开时，我们是看不到任何东西的，在这里我们首先需要明确一点，标签是由浏览器解析的，在解析的过程中，浏览器不会在页面中显示标签，我们可以认为，浏览器就像是我们公司或是学校中的保安大爷，而标签就像是我们的胸牌或是学生证，保安大爷查看你的胸牌或是学生证，便知道你隶属于这个机构，是合法的人员，而对于没有胸牌或是没有学生证的人来说，保安大爷则认为他们是不合法的人员，不予通行，而我们的胸牌或是学生证，则会标明，我们是谁，那个部门或班级的，这样我们有了自己所要表示的意义（也可以将标签想象成超市物品上标签，这些物品标签上都会显示有关物品的一些相关信息，例如，生产日期、价格、原材料等，这些都是物品的一些相关标识，但我们不了解一个物品时，便可以通过这些标签来获取他们是否可食用，是否过期，是否有哪些人群不适合等）。
在HTML中标签也是同样的道理，它就好比是物品上的标签，也同样代表着某种信息，我们将标签所代表的某种信息诚挚为“语义”，每个标签，有着自己所代表的语义。而浏览器则是明确的知道这些标签所代表的意义，而浏览器并不会去显示这些标签，就好比我们从超市买了某种食物一样，我们只会去吃这个食物，而不会去食用食物上的标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>我是一段标题</h1>
</body>
</html>
只有当我们在标签中加入文本时，浏览器才会去显示其中的内容，如，我在上面的<body></body>标签中，加入另外一对标签<h1>我是一段标题</h1>（这里需要注意一点，如果我们想要让浏览器去显示内容，我们只能在<body></body>标签中添加内容，而不能在其他的地方，现在只需要记住就可以了）。
现在我们使用浏览器刷新页面，就会看到这样一段文字了。
当我们为标签中添加了相应的内容之后，我们将其标签和内容这个整体称之为元素，元素是有开始标签+文本内容+结束标签构成的，如<h1>我是一段标题</h1>，这样便构成了一个元素。此时，我们需要知道<h1>我是一段标题</h1>这个元素所代表的含义是，在整个文本中，“我是一个标题”这段文字内容，将代表文章的一个标题出现，就好比是，当我们阅读某一篇文章时，在文章的最开始部分，会存在一个标题，如“xxx明星逃税被罚”一样，在这里我们需要明确，当一段文本内容脱离了标签单独存在时，它是不具有任何意义的，就好比“我是一个标题”，这段文字，如果它脱离和<h1></h1>标签的标识，它将不再具有一个标题的意义，即使它的文本内容是‘“我是一个标题”，但它也不会是一个标题，而只是一段没有意义的普通文字，也正是这段文字有了“<h1></h1>”这样一个标签的标识和加持，才使它成为了具有标题作用意义的文字，这就好比是，如果想要从大学毕业，那我们就要拿到毕业证，只有在毕业证这个标记的加持下，我们才是算是一个合格的大学生，如果不是以这个证作为评判的标准，而是说只有在大学校园里出入过的都算大学生，那可能我们就不需要努力学习了。
同样的道理，如果想要使某个文本内容具有哪些意义，那他也需要在具有特定语义标签加持的作用下来完成，在这里我们反复强调，标签是具有某种特定的语义的，例如，使用<h1></h1>就代表文章的一个标题，使用<a></a>就代表了一个超链接。
现在，我们已经知道了，一个元素构成是由标签+内容的形式组合而成的，而一个HTML页面的整体结构，则是由代表着不同语义的元素，相互组合后构成的。
现在，我们在标签和元素的基础上，对他们做进一步的规范和扩展。
1.标签大小写：在HTML中，我们允许标签可以使用大写形式（如<HTML></HTML>）或者小写形式（如<html></html>），同时也允许标签出现大小写混合的形式（如<HTML></html>,<HtMl><htML>等），但是我们在构建HTML页面时，应尽量采用小写的形式。
2.空元素：在HTML中，我们允许标签出现没有内容，如<h1><h1>，此时我们将这对标签+空内容所构成的元素成为空元素。空元素也是有内容的，只不过他的内容为空而已，。
3.自闭合标签：当我们遇到空元素时，我们可以已一种更简洁的形式来表示，如可以将<h1></h1>,表示成<h1/>(自闭和标签和结束标签很相似，但实际上却是不同的。)
4.虚元素：这是一种特殊的元素，但是他也是一种元素，他的表现形式和自闭和标签如出一辙，但是二者却是差异明显，首先我们先来看一下虚元素长什么样子，<hr/>和<br/>这是两个虚元素，之所以将他们称之为虚元素，是因为这样的元素不是由开始标签+文本内容+结束标签，这样的结构构成的，尽管他看起来和自闭合标签很像，但是自闭合标签代表的是空元素，也就是说，自闭合标签当中，是允许有文本内容存在的，只是在某些时候，当他不具有文本内容时，我们我们为了书写方便，便将开始标签和结束标签结合在了一起，但是虚元素却不是没有文本内容的空元素，而是不允许有文本出现的一类特殊元素。
我们可以句一个简单的例子进行类比，空元素就好比是一间有两扇门空的教室，虽然教室是空的，但是并不意味着，它会一只是空的，在需要的时候，它就会被一些东西所填充，而虚元素，就好比是一间没有门的教室，我们不允许从任何地方进入这间教室，尽管这间没有门的教室，不能盛放任何实物，但是它本质上仍是一间教室。尽管虚元素不能用于标识文本内容，但是它仍是具有自己的语义的。