根据元素的作用,把元素分为:根元素,文档元数据,内容分区,分组内容,文本级语意,嵌入内容,表格,表单,脚本,交互,编辑。
根元素:即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:表示删除的内容;