注：个人整理的标签和属性，不是很全，可以供初学者查看和学习！

标签

html 文件中由 html 标签组成，依靠 html 标签实现页面的结构 html 标签分为单标签和双标签双标签有开始标签和结束标签组成，如<h1>内容</h1> 单标签就自己一个，单标签可以省略 /, 如<hr />可以简写为<hr> 标签中可以包裹文字或其他标签 html 标签不区分大小写

属性

属性是属于 HTML 标签的属性由属性名和属性值组成，属性值可以使用双引号、单引号包裹或者没有引号不同的 HTML 标签有不同的属性标签可以设置多个属性的，同名的属性设置多次，只有第一个生效。属性名不区分大小写

HTML的标签和属性

① 主体结构2标签

标签名	语义和功能	单/双标签
html	根标签	双标签
head	头部信息	双标签
body	主体信息	双标签

② HEAD中的标签

标签名	语义和功能	属性	单/双标签
meta	设置网页元信息	charset：指定字符集编码，建议值 utf-8	单标签
title	设置标题栏标题		双标签

③ 排版格式标签

标签名	语义和功能	单标签还是双标签
h1 ~ h6	一级标题 ~ 六级标题	双标签
p	段落	双标签
hr	分割线	单标签
br	换行	单标签
div	用于表示页面布局	双标签
pre	原格式显示	双标签

④ 文本标签

标签名	语义和功能	单标签还是双标签
em	表示强调，默认表现为斜体字	双标签
strong	表示强调，默认表现为粗体字	双标签
del	表示删除的内容，默认表现为文字加删除线	双标签
ins	表示增加的内容，默认表现为文字加下划线	双标签
sub	表示下标字	双标签
sup	表示上标字	双标签

⑤ 图片标签

标签名	语义和功能	属性	单标签还是双标签
img	在页面中显示图片	src：指定图片的地址。 alt：设置图片的代替文字。 width：设置图片的宽度。 height：设置图片的高度。	单标签

⑥ a标签

标签名	语义和功能	属性	单标签还是双标签
a	设置超链接	href：设置目标文件地址。 target：设置目标文件本窗口还是新窗口打开。 name：设置锚点	双标签

⑦ 列表标签

标签名	功能和语义	单标签还是双标签
ul	无序列表	双标签
ol	有序列表	双标签
li	有序或无序列表的列表项	双标签
dl	定义列表	双标签
dt	定义列表项的标题	双标签
dd	定义列表项的描述	双标签

⑧ 表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格	width：设置表格宽度。 height：设置表格高度。 border：设置边框宽度。 cellspacing：设置单元格间距。 cellpadding：设置单元格内边距。	双标签
caption	表格标题		双标签
thead	表格头	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。	双标签
tbody	表格主体	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。	双标签
tfoot	表格脚	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。	双标签
tr	行	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。 height：设置本行高度。	双标签
td	单元格	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。 width：设置单元格宽度。 height：设置单元格高度。 rowspan：设置跨越的行数。 colspan：设置跨越的列数。	双标签
th	表头单元格	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。 width：设置单元格宽度。 height：设置单元格高度。 rowspan：设置跨越的行数。 colspan：设置跨越的列数。	双标签

⑨ 表单标签的总结

标签名	语义和功能	属性	单标签还是双标签
form	表单	action：设置提交的地址。 target：设置提交的地址在哪个窗口打开。	双标签
input	各种表单控件	type：设置表单控件的类型。 value：设置表单控件的值。 maxlength：设置最大可输入长度，用于文本输入框、密码输入框。 checked：设置默认选中，用于单选框、复选框。 name：设置名字。 disabled：设置表单控件不可用。	单标签
textarea	文本域	rows：设置默认显示的行，影响高度。 cols：设置默认显示的列数，影响宽度。 name：设置名字。 disabled：设置表单控件不可用。	双标签
select	下拉选项框	name：设置名字。 disabled：设置表单控件不可用。	双标签
option	选项	value：设置真正提交的数据。 selected：设置默认选中。 disabled：设置表单控件不可用。	双标签
button	按钮	type：设置按钮类型，值：submit、reset、button。 disabled：设置表单控件不可用。	双标签
label	与表单控件关联	for：用于与表单控件关联。	双标签

HTML5新增的标签及属性

1. 新增页面结构标签（最重要）

标签名	语义和功能	单标签还是双标签
header	页面头部	双标签
footer	页面脚部	双标签
nav	导航条	双标签
section	页面或文章中的一节	双标签
aside	侧边栏	双标签
article	文章、博客、帖子、新闻等	双标签
main	页面主要内容	双标签

2 新增状态标签（了解）

标签名	语义和功能	属性	单标签还是双标签
meter	表示静态的度量	max、min、value、high、low、optim	双标签
progress	表示动态的进度	max、value	双标签

meter 和 progress 的区别？

1. meter 表示静态的度量，如温度、磁盘容量、电池容量等
2. progress 表示动态的进度，如进度条

3 新增列表标签

标签名	语义和功能	属性	单标签还是双标签
datalist	实现搜索框提示		双标签
details	关键字和对关键字的解释	open：无需给值，展开。	双标签
summary	定义关键字或文字		双标签

4 新增注释标签（注音标签）

标签名	语义和功能	属性	单标签还是双标签
ruby	添加注音		双标签
rt	包裹在ruby的里面		双标签

5 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记标签	标记搜索结果	双标签

6 音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	视频	src：设置视频文件地址。 width：设置视频宽度。 height：设置视频高度。 controls：显示控制条，无需设置值。 muted：设置默认静音，无需设置值。 autoplay：自动播放，无需设置值。 loop：循环播放，无需设置值。 preload：预先加载，无需设置值。 poster：设置视频封面。	双标签
audio	音频	src：设置音频文件地址。 controls：显示控制条，无需设置值。 muted：设置默认静音，无需设置值。 autoplay：自动播放，无需设置值。 loop：循环播放，无需设置值。 preload：预先加载，无需设置值。	双标签
source	引入资源（音频或视频）	src：设置音频或视频地址。 type：设置音频或视频的类型。	双标签

HTMl的标签和属性