概述
作为一名前端，HTML当然是我们理论上最了解的东西。但是很多同学可能在日常开发中都只是纯粹的搬砖完成功能而已，其实并没有真正地全面总结归纳过HTML这门语言。是的，HTML是一门语言，一门标记性语言。今天我们尝试着用历史追溯法和归纳法来看一看HTML的全貌，搞清楚它为什么要这么设计，提供这么多标签是干什么用的。
正文
通常来说，HTML可以分为以下几类
- 1.根元素和文档说明元素
这类标签是用来标识整个HTML的，主要用来说明下这个文档需要引入什么东西，需要有什么特性，标题什么的。主要是集中在文档头部。这类的标签有：
html，head，title，base，meta，style，link
- 2.内容分区类 这类的标签主要是将文档的内容进行划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。这类的标签有：
body，address，article，aside，footer，header，h1-h6，hgroup，main，nav，section，details，dialog，menu，menuitem，summary
- 3.区内内容
刚才说到了内容分区，接下来要说一下分区里面的内容了，例如body里面的内容。那么这些内容按两个大类划分，又可以划分为块级的和内联的。
其中块级的有：
main，div，ul，li，ol，p，pre，dd，dl，dt，figcaption，figure，hr，blockquote，dir
内联的有：
a，code，small，em，i，del，ins，var，u，br，abbr，b，bdi，bdo，cite，data，dfn，kbd，Mark，q，rb，rp，rt，rtc，ruby，s，samp，sub，sup，time，tt，wbr
HTML在渲染的时候都是以盒模型为单位的，有行盒和行内盒。理论上我们仅通过div和span标签就可以完成所有想要的布局了。一个是行盒，一个是行内盒，全都有了。
- 4.图片和多媒体类 HTML 支持各种多媒体资源，例如图像、音频和视频。这类的标签有
area，audio，img，map，track，video
-
5.表格类 table，thead，th，tbody，tr，td，tfoot，caption，col，colgroup
-
6.表单输入类 form，input，label，button，textarea，select，option，optgroup，meter，filedset，datalist，legend，output，progress
-
7.脚本类 canvas，noscript，script
-
8.其他 element，shadow，slot，template
加餐：关于标签语义化和无障碍
设想一下，HTML每个标签其实都是有自己的语义的，语义就是对他的功能定位和解释。为什么语义很重要呢，我们通常在编写HTML的时候都是用css、js来完善页面的美观和功能的。但是设想一下，加入用户的网络环境很差，或者因各种意外没能下载到css和js的时候，你的文档是不是完全看不了使用不了。这就是正确使用语义化的重要意义之一，他能保证我们在一些很恶劣的情况下仍然能够正常使用文档。另外一个意义就是让网页能够被特殊人群识别（如盲人），良好的语义化能够使得机器更好地识别网页内容。
参考：
