根据元素的作用，把元素分为：根元素，文档元数据，内容分区，分组内容，文本级语意，嵌入内容，表格，表单，脚本，交互，编辑。
根元素：即html元素，表示整个文档的根，是一个顶级元素，其他元素必须是该元素的后代；
文档元数据：定义页面的一些信息，比如标题，样式，字符编码等等，也可以用于SEO优化，被搜索引起收录；
head：
title：
base：
link：
meta：
style：
内容分区元素：从内容逻辑上主持划分，可以为页面明确的制作大纲，常见的页面有：<header>头部,<nav>导航，<article>主要内容，<aside>边栏，<footer>底部；
body:
article:
section:
nav:
aside:
h1,h2,h3,h4,h5,h6:
header:
footer:
分组内容：可以组织<body>内容中的块或者章节内容,对SEO很重要；
p:
address:
hr:
pre:
blockquote:
main:
div:
ol:
ul:
li:
dl:
dt:
dd:
figure:
figcaption:
文本级语意：可以定义文档中语句，结构，可以是一个词，一段文字，比如电商网站的特价，就是<strong>包裹的；
a:
span:
em:
strong:
cite:
q:
br:
i:
b:
u:
code:
small:
s:
sub,sup:
嵌入内容相关：可以支持多种多媒体资源，比如图像，音频，视频，画布；
picture:
source:
img:
iframe:
embed:
object:
param:
video:
audio:
track:
map:
area:
template:
canvas:
表格元素：可以创建和处理表格；
table:
caption:
colgroup:
col:
tbody:
thead:
tfoot:
tr:
td:
th:
表单元素：可以创建和处理表单元素，比如登录页面就是表单元素；
form:
label:
input:
button:
select:
datalist:
optgrou:
option:
textarea:
output:
progress:
meter:
fieldset:
legend:
脚本元素：可以创建和处理表单元素，比如登录页面就是表单元素；
script:定义了内嵌或者外联的脚本，可以创建动态内容；
noscript:定义了当前页面的脚本元素不受支持，或者浏览器关闭了脚本允许时显示的内容；
交互元素：有助于创建交互式的元素，比如弹窗；
details:
summary:
dialog:
编辑元素：可以用来标识某个文档被更改过的部分，假如要显示文档更改的过程，可能就要用到以下元素；
ins:表示新插入的内容；
del:表示删除的内容；