前言，本章节主要是和大家一起分享下我所理解的HTML知识，新手小白，所以有什么不对的地方，欢迎看到的大佬不吝指正。
HTML （Hyper Text Markup Language）是一种用来描述网页的语言，被称作为 “超文本标记语言 ”****
打个比方，HTML之于网页就好比建筑图纸之于建筑。 建筑图纸是建筑师设计房子时使用的语言，工匠会根据图纸内容，修建出它所描述的房子。
而 HTML文档就是前端工程师设计网页时使用的语言，浏览器会根据 HTML 文档的描述，解析出它所描述的网页。
在我们日常的上网操作中，我们给浏览器输入网址并回车后，浏览器便开始向服务器发出请求，请求成功后浏览器返回给浏览器的便是HTML代码，紧接着浏览器会解析代码并进行渲染，呈现在我们面前的便是所看到的的网页。
【注：下面我们的示范，会用谷歌浏览器（Chrome）进行演示，火狐浏览器（Firefox）的操作方式是一样的。推荐你也使用这二者之一。】
在网页任意地方点击鼠标右键，然后点击 “查看网页原代码”（Windows系统的电脑还可以使用快捷键ctrl+u来查看网页源代码） 而后出现的一个全是源码的页面便是我们当前浏览器的网页html代码了 （此处不在贴图，以免侵权，各位可自行实验查看）。
这样查看的的好处是，整个源码都完整的呈现在你面前。但是，有个不好的地方，就是层级不清晰，对我们新手来讲阅读理解会很困难。
所以，我们使用另一种方式， “检查”。 鼠标右键点击网页任意位置，选择 “检查”（快捷方式是ctrl+shift+i），然后会得到一个许多深色小箭头和尖括号构成的代码页，这便是 “ 开发者工具栏 ” 下的网页 html 源码，我个人将之理解为 “开发者模式”。
这样查看还有的好处是，代码层级一目了然，依赖关系清晰，很利于新手学习，这也是我所了解的 html 代码学习的最好方式。
它的另一个好处就是，网页源码与网页内容，是同页显示，相互之前构成呼应，很便于我们今后学习中的标签、元素定位。
我们再来聊聊层级。 在HTML里有很多你不认识的符号和文字，但相信我嗷，很简单的，特别很好入门。
以一家科技公司来打个比方：公司一般由不同的部门组成，每个部门又分为不同的科室，而每个科室又可细分为更小的团队 team,而每个团队又有更具体的前端、后端、UI、产品、底层等等的岗位。
而HTML结构，则与之非常相似，先上个例子，便于理解：
<html> <head> <meta charset="utf-8"> </head> <body> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <p>我是一个段落啦。一级标题、二级标题和我，我们三个一起组成了body。 </p> </body> </html>在这个例子中，它的层级关系就非常明确，由网页头、网页体两部分构成。 在实际的网页结构中，有些代码前有个小三角形箭头，它可以折叠或打开，而每一个可以打开或折叠的三角形里包含的内容，都是一个层级，一层层的层级最终构成了网页。
再来说说网页的构成，网页头和网页体。在上例中 <head> xxx </head> 所构成的就是网页头。而由<body> xxxx </body>构成的则是网页体
在HTML网页中，标签是其重要的组成部分。在HTML文档中，你可以看到很多在<>里的内容，它便是标签。
标签一般会成对的出现，如：
<p> xxx </p> <span> 'saasaasss' </span> <a> 'saasaasss' </a>等等的都是成对的标签，当然也有单个的标签，如上个例子中的：
<meta charset="utf-8">它便是单个标签，这个不用细化的去理解，因为大多数标签都是成对出现的。
在这个例子中，由<p> xxx </p> 形式出现的，都可以称作 “元素”，<开始标签> 标签内容 </结束标签>便是这个元素了所有标签的名称。
注意一下：HTML标签是可以嵌套标签的，而且可以多层嵌套；这就像是在电脑中，一个硬盘可以包含数个文件夹，文件夹中还可以嵌套文件夹。
那么，在网页头和网页体中，都有那些内容呢？我们接下来看看： 首先是网页头：
<head> <meta charset="utf-8"> <title>我是网页的名字</title> </head>第二行<meta charset = ''utf-8''>,它定义了HTML的字符编码格式为utf-8 第三行<title>我是网页的名字</title>在网页头里时，它则一般用来定义网页标题，一般显示在浏览器的标签页里。标签页知道吧？就是每个网页在浏览器最顶上显示的名字。 在网页头中的编码是没办法在网页里看到的，标签页的内容也不属于网页正文。
再看网页体：
<html> <head> <meta charset="utf-8"> <title>这个书苑不太冷2.0</title> </head> <body> <h1 style="color:#20b2aa;">这个书苑不太冷</h1> <h3>吴枫推荐的书:</h3> <a href="https://spidermen.cn" target="_blank">点这里看看</a> <br> <h2>《奇点遗民》</h2> <p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。 </p> </body> </html>在<body> xxx </body>中，多了几个内容：style="color:#20b2aa;"、href="https://spidermen.cn"、target="_blank"以及<p> xxx </p>中的内容，这些便是网页体里的属性了。
style 属性定义了这行文字的颜色。它可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。
href 属性的用法——添加链接。用于规定指向页面的URL，HTML中链接一般都由标签<a>来定义。
除了上述属性，HTML中还有两个很常用的属性，即class与id。 先给出两段例题代码，做个不同点的比较：
<html> <head> <meta charset="utf-8"> <title>这个书苑不太冷2.0</title> </head> <body> <h1 style="color:#20b2aa;">这个书苑不太冷</h1> <h3>吴枫推荐的书:</h3> <a href="https://spidermen.cn">点这里看看</a> <br> <h2>《奇点遗民》</h2> <p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。 </p> </body> </html>和
<html> <head> <meta charset="utf-8"> <title>这个书苑不太冷3.0</title> <style> .book { /*以下是.book的具体样式规定*/ float: left; /*控制元素浮动*/ margin: 5px; /*外边距为5像素*/ padding: 15px; /*内边距为15像素*/ width: 350px; /*宽度为350像素*/ height: 240px; /*高度为240像素*/ border: 3px solid #20b2aa; /*边框为3像素*/ } </style> </head> <body> <h1 style="color:#20b2aa;">这个书苑不太冷</h1> <h3>吴枫喜欢的书:</h3> <a href="https://spidermen.cn">点这里看看</a> <div class="book"> <h2>《奇点遗民》</h2> <p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。 </p> </div> </body> </html>可以看到第一段代码多了个很长的 <style>元素, <style>元素的内容，是对.book的具体描述，比如float: left;，而 /*控制元素浮动*/ 是对代码的注释。
那.book是什么呢？其实在第二段代码中多了两个东西： 一个是网页头里的.book；一个是网页体里的<div class="book">。
其实.对应class，所以.book代表class book。因此，网页头中的.book和网页体中的class="book"是有联系的。
在网页头里面，定义了class属性，属性值为"book"，然后下面一长串代码是对这个class属性的描述；接着再在网页体中调用，所以看到了<div class="book">。
在HTML中，class属性也可以被多次利用。
接下来，我们看看id属性。 id属性和class属性的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。
但id属性用于标识唯一的元素，而class用于标识一系列的元素。id就像是学生的学生证号码，每个人都是唯一的；而学生们可以属于同一个班级，班级就像class。
常见HTML属性与用法
属性 用法 class 为HTML定义一个或多个类名（classname） id 定义元素的唯一id href 用来定义链接 style 规定元素的行内样式（inline style）至此，我们就讲完了HTML的组成：标签、元素、结构（网页头和网页体）、属性。 今天的内容先告一段落，我是边复习便写博客，所以很多地方可能会有点乱，思路可能会出现不清晰，希望各位耐心的看，不要有情绪哦&…& 下次见~
