通过前几节的学习，我们知道了html中标签，元素的用法，那么本着对一切保持怀疑的态度，我们来看看他们的本质。先看几件不常见的情况。
一、一个html文档，什么也不写，直接保存用浏览器打开，会是什么样呢。动手试一下你就会发现即使你什么也不写，在源代码里面他会自动给你生成下面的代码：
<html><head></head><body></body></html>
那么我们可以得出一个结论：html文档什么都不写行不行？行，但是不推荐。个人认为没有这种必要，我们是要干大事业的人，怎么可能什么也不写呢，对不对。
二、双标签如果我们只写一个标签，会是什么结果呢？
我们可以看到运行实例是会正常显示h2标签的，在浏览器中，源代码里会自动添加结束标签，那么同样也是不推荐的，毕竟是干大事业的人，不能查这一个两个结束标签对不对。
三、我们知道元素就是页面中要展示的内容，那么元素也分为可见元素和不可见元素，比如<img><h1><p>就是可见的,不可见的比如<br>,但是我们是可以感知到他们的存在的，比如：
我们看不到br的表现，但是一定能感知到换行了，这就是不可见标签的特点。那以上三个例子简单的对钱两样的内容进行了补充，，对html标签这里理解的更深了。那么接下来，我们着重的来了解下标签的本质。
重点：标签
首先，标签是工具，标签是武器，标签是语意相关联的，他是用来描述元素的工具，是元素的代表，就比如腾讯是马化腾的代表一样。那光说腾讯可能不是所有人都知道，但是如果你说游戏，QQ，微信，那估计没有人不知道，这就是对腾讯进行了一些具体的描述，在标签中，属性就是对他进行具体描述的东西，举个例子：
萨摩耶
<h2>萨摩耶</h2> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534978948896&di=9b3a8bbdd6a1e38a5f13c7951a23b494&imgtype=0&src=http%3A%2F%2Fi.epetbar.com%2F2015-04%2F23%2Fios1429789890_4.jpg">
运行实例 »
我们可以看到这张图片并不是我们想要的大小尺寸样式，那么我们就可以用属性来进行描述，再看一个例子：
萨摩耶
<h2 style="color:red">萨摩耶</h2> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534978948896&di=9b3a8bbdd6a1e38a5f13c7951a23b494&imgtype=0&src=http%3A%2F%2Fi.epetbar.com%2F2015-04%2F23%2Fios1429789890_4.jpg" width="300px" height="400px" style="border-radius:50%;box-shadow:3px 3px 3px #888">
运行实例 »
这张就要比上一个good看多了，这就是属性对于标签的作用。
上面两个例子代码我们可以观察到有style是相同的属性，那么标签的四个重要公共属性有哪些呢？style,id,class,title。style是内联样式，id是唯一标识，class标识同类元素，titile用来提示信息，我们将这四个属性加到刚刚的代码中，看代码：
萨摩耶
<!--<h2 style="color:red">萨摩耶</h2>-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534978948896&di=9b3a8bbdd6a1e38a5f13c7951a23b494&imgtype=0&src=http%3A%2F%2Fi.epetbar.com%2F2015-04%2F23%2Fios1429789890_4.jpg" width="300px" height="400px" style="border-radius:50%;" title="萨摩耶" class="dog" id="dog1">
<style type="text/css">
.dog{
box-shadow:3px 3px 3px #888;
}
#dog1:hover{
width:450px;
}
</style>运行实例 »
我们可以看到，效果表变得好多了，这就是属性对标签的作用。
总结：
标签的一些不常见的写法（不推荐）
标签表示元素，属性描述标签
学好标签可以为你的网站增光增彩，可以做出很多好玩的东西