HTML标签汇总（基础图像、音频、视频和链接部分）

HTML标签汇总（基础图像、音频、视频和链接部分）

---

<img>

• 向网页上嵌入了一副图像。
• 从技术上讲，<img>标签创建是被引用图像的占位空间，然后从网上链接图像

必需的属性

属性	值	描述
alt	text	规定图像的代替文本
src	URL	规定显示图形的URL

可选的属性

属性	值	描述
height	pixels %	设置图像的高度
width	pixels %	设置图像的宽度
ismap	URL	将图像定义为服务器端图像映射。 图形映射指的是带有可点击区域的图像 当用户在ismap图像上单击了某处时，浏览器会自动吧鼠标的x，y位置（相当与图像的左上角）发送到服务器端。 当点击一个服务器端图像映射时，点击坐标会以URL查询字符串的形式发送到服务器。 只有当<img>元素属于带有有效href属性的<a>元素时，才允许ismap属性。
longdesc	URL	指向包含长的图像描述文档的URL，与alt属性类似（暂时没有浏览器支持）
usemap	URL	将图像定义为客户端图像映射。 配合

详解usemap

usemap属性提供了一种“客户端”的图像映射机制，有效的消除了服务器端对鼠标的处理，以及由此带来的网络延迟问题。通过特殊的<map>和<area>标签，创作者可以提供一个描述usemap图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接URL。usemap属性的值是一个URL，它指向<map>区域。

ismap属性和usemap属性的应用差异

usemap客户端处理图像映像的好处是，它不要求由服务器或特殊的服务器软件。与ismap机制不同，它可以用在非web环境中，例如在本地文件中使用。

---

<map>

• 定义一个客户端图像映射
• area元素永远嵌套在map元素内部。area元素可以定义图像映射中的区域。
• <imp>中的usemap属性可引用<map>中的id或name属性（取决与浏览器）。

必需的属性

属性	值	描述
id	unique_name	为map标签定义唯一的名称

可选的属性

属性	值	描述
mane	mapname	为image-map规定的名称

---

<area>

• 定义图像映射中的区域
• area元素永远嵌套在

必需的属性

属性	值	描述
alt	text	定义此区域的替换文本

可选的属性

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标 coords的详细解释
href	URL	定义此区域的目标URL
nohref	nohref	从图像映射排除某个区域
shape	default——规定全部区域 rect（rectange）——定义矩形 circ（circle）——定义圆形 poly（polygon）——定于多边形	定义区域的形状 图像映射采用“先来先得”的顺序，所以默认区域应该放置在后面。 建议使用小写
target	_blank——在新窗口中打开 _self——默认。在相同的窗口打开 _parent——在父框架中打开 _top——在整个窗口中打开 framenane——在指定的框架中打开	规定在何处打开href属性指定的目标URL。

coords的详细解释

coords规定区域的x和y坐标
coords与shaoe属性配合使用，图像左上角的坐标是“0，0”

圆形：

shape="circle"，coords="x,y,z"

这里的x和y定义了圆心的位置。z是以像素为单位的圆形的半径。

多边形

shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每对“x，y”坐标都定义了多边形的一个顶点。

矩形：

shape="rectangle"，coords="x1,y1,x2,y2"

第一对坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。

---

<canvas>

• 图形容器，使用脚本来绘制图形

属性	值	描述
height	pixels	设置canvas的高度
width	pixels	设置canvas的宽度

---

<figure> 
<figcaption>

• figure规定独立的流内容（图像，图表，照片，代码等）
• figcation标签定义figure元素的标题
  <figcaption>元素应该被置于<figure>元素的第一个或最后一个子元素的位置

---

<audio>

• <audio>标签定义声音，比如音乐或其他声音流
• 可以在开始标签和结束标签放置文本内容，这样不支持该标签的浏览器可以显示出文本信息

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件。比如播放、暂停、定位、音量等
loop	loop	如果出现该属性，则每当音频结束时重新开始播放（循环播放）
muted	muted	规定音频输出是应被静音
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放 如果使用“autoplay”,则忽略该属性
src	URL	要播放的音频的URL

---

<video>

• <video>标签定义视频，比如电影片段或其他视频流
• 可以在开始标签和结束标签放置文本内容，这样不支持该标签的浏览器可以显示出文本信息

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件。比如播放、暂停、定位、音量、全屏等
loop	loop	如果出现该属性，则每当视频结束时重新开始播放（循环播放）
muted	muted	规定视频输出是应被静音
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放 如果使用“autoplay”,则忽略该属性
poster	URL	规定视频点击播放前显示的图像
src	URL	要播放的视频的URL
height	pixels	设置视频播放器的高度
width	pixels	设置视频播放器的宽度

---

<source>

• <source>标签为媒介元素（比如<video>和 <audio>）定义媒介资源
• 标签规定可替换视频/音频文件供浏览器根据它对媒体类型或编解码器的支持进行选择。

属性	值	描述
media	media_query	规定媒体资源的类型（没有浏览器支持）
`src	URL	规定媒体文件的URL
type	用于视频 • video/ogg • video/mp4 • video/webm 用于音频 • audio/ogg • audio/mpeg	规定媒体资源的MIME类型

---

<track>

• <track>标签为诸如video元素的媒介规定外部文本轨道

属性	值	描述
default	default	规定该轨道是默认的
kind	captions——该轨道定义将在播放器中显示简短说明 chapters——该轨道定义章节，用于导航媒介资源 descriptions——该轨道定义描述，用于在媒介内容不可播放或不可见的时候通过音频描述媒介的内容。 metadata——该轨道定义脚本使用的内容 subtitles——该轨道定义字幕，用于在视频中显示字幕	规定轨道属于什么文类型
label	label	轨道的标签或标题
src	URL	轨道的URL
srclang	language_code	轨道的语言。 若kind属性值是“subtitles”，则该属性必需的。

---

<a>

• <a>标签定义超链接，用于从一张页面链接到另一张页面
• 链接默认的外观
  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的
• 如果不使用href属性，则不可以使用：download，hreflang，media，rel，target以及type属性
• 使用CSS来设置链接的样式

属性	值	描述
charset	UTF-8 ISO-8859-1 …	规定被链接文档的字符集
coords	坐标值	规定链接的坐标和shape属性一起使用
shape	default——规定全部区域 rect（rectange——定义矩形 circ（circle）——定义圆形 poly（polygon）——定于多边形	定义区域的形状 图像映射采用“先来先得”的顺序，所以默认区域应该放置在后面。 建议使用小写
download	filename	规定被下载的超链接
href	URL	规定链接指向的页面的URL
hreflang	language_code	规定被来链接文档的语言
media	media_query	规定媒体资源的类型（没有浏览器支持）
name	section_name	规定名称
rel	text	规定当前文档与被链接文档的关系
rev	text	规定被链接文档与当前文档的关系
target	_blank——在新窗口中打开 _self——默认。在相同的窗口打开 _parent——在父框架中打开 _top——在整个窗口中打开 framenane——在指定的框架打开	规定在何处打开链接文档
type	MIME type	规定被链接文档的MIME类型

---

<nav>

• 定义导航链接的部分

<nav>
	<a href="/html/">HTML</a> |
	<a href="/css/">CSS</a> |
	<a href="/js/">JavaScript</a> |
	<a href="/jquery/">jQuery</a>
</nav>

👇运行结果👇

---

<link>

<link>标签定义文档与外部资源的关系。写在<head></head>标签中，可以出现任意次数。
<link>标签在用于样式表时几乎得到了所有浏览器的支持。但是几乎没有浏览器支持其他方面的用途。

HTML外部资源链接原件
href–规定被链接文档的位置
rel–规定当前文档和被链接文档的关系
当rel="stylesheet"代表样式表，样式表可以设置title
size–规定被链接资源的尺寸,仅适用与rel=“icon(图标)”
type–规定被链接文档的MIME类型(仅在该属性下才接受预处理，否则将忽视它)
media–规定被链接文档将被显示在什么设备上
crossorigin–是否应通过CORS请求
注意！！当rel="preload(预载)"时
as–表示特定类内容被获取的属性
audio–音频文件,通常用
doucument–使用<frame(框架)>(不建议使用)或<iframe(内联框架)>文档
embed–嵌入元素内的资源
fetch–通过提取或XHR请求访问的资源，例如ArrayBuffer或JSON文件
font–字体
image–图像文件
object–嵌入元素内的元素
script–JavaScrip文件
style–CSS样式
track–WebVTT文件
worker–JavaScript网络工作者或共享工作者
video–视频文件，通常在中使用

属性	值	描述
charset	UTF-8 ISO-8859-1 …	规定被链接文档的字符集
href	URL	规定被链接文档的位置
hreflang	language_code	规定被链接文档中文本的语言
media	screen——计算机屏幕（默认） tty——电传打字机以及类似送的使用等宽字符网络的媒体 tv——电视机类型设备（低分辨率，有限的滚动能力） projection——放映机 handheld——手持设备（小屏幕，有限带宽） print——打印预览模式/打印界面 braille——盲人电子法反馈设备 aural——语言合成器 all——适用于所有设备	规定被链接文档将被显示在什么设备上
rel	alternate——文档的替代版本（比如打印页，翻译或镜像） stylesheet——文档的外部样式表 start——集合中的第一个文档 next——记录文档的下一页（浏览器可以提前加载此页） prev——记录文档的上一页（定义浏览器的后退键） contents——文档的目录 index——文档的索引 glossary——在文档中使用的词汇的术语表（解释） copyright——包含版权信息的文档 chapter——文档的章 section——文档的节 subsection——文档的小节 appendix——文档的附录 help——帮助文档 bookmark——相关文档（书签） author——链接到该文档的作者 icon——外部的图标 licence——（H5）链接到该文档的版权信息 pingback——指向pingback服务器的URL prefetch——规定应该对目标文档进行缓存 search——链接到针对文档的搜索工具 sidebar——链接到应该显示在浏览器侧栏的文档 tag——描述当前文档的标签（关键词）	规定当前文档与被链接文档之间的关系
rev	同rel 几乎没有浏览器支持rev	规定被链接文档与当前文档之间的关系
size	heightXwidth any	规定被链接资源的尺寸（仅适用与rel=“icon”）
target	_blank——在新窗口中打开 _self——默认。在相同的窗口打开 _parent——在父框架中打开 _top——在整个窗口中打开 framenane——在指定的框架中打开	规定在何处打开链接
type	MIME_type	规定被链接文档的MIME类型

---

<ol> 
<ul>  
<li>

• <ol>标签定义有序列表
• <ul>标签定义无序列表
• <li>定义列表项目

ol

属性	值	描述
compact	compact	规定列表呈现的效果比正常的小巧（不建议使用）
reversed	reversed	规定列表顺序为降序
start	number	规定有序列表的起始值（不建议使用）
type	1(默认值。数字有序列表) a(按小写字母排序) A(按大写字母排序) i(按小写罗马字母排序) I(按大写罗马字母排序)	规定在列表中使用的标记类型（不建议使用）

ul

属性	值	描述
compact	compact	规定列表呈现的效果比正常的小巧（不建议使用）
ytpe	disc（默认值。实心圆） circle（空心圆） square（实心方块）	规定在列表中使用的标记类型（不建议使用）

li

属性	值	描述
type	1(默认值。数字有序列表) a(按小写字母排序) A(按大写字母排序) i(按小写罗马字母排序) I(按大写罗马字母排序) disc（默认值。实心圆） circle（空心圆） square（实心方块）	规定在列表中使用的标记类型（不建议使用） 从标记直到列表的结束
value	number	规定列表项目的数字（不赞成使用）

---

<dl>
   <dt>计算机</dt>
   		<dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   		<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

👇运行结果👇

• <dl>标签定义了定义列表
• <dt>标签定义了定义列表的项目
• <dd>在定义列表中描述列表的项目

---

<menu>

• <menu>标签定义命令的列表或菜单
• 目前所有主流浏览器都不支持<menu>标签

属性	值	描述
label	text	规定菜单的可见标签
type	list——默认。规定列表菜单 context——规定上下文菜单 toolbar——规定工具栏菜单	规定菜单的类型

---

<menuitem>

• 标签定用户可以从弹出菜单调用的命令/菜单项目

属性	值	描述
checked	checked	规定在页面加载后选中命令/菜单项目适用与type=“radio”或type=“checkbox”
default	default	把命令/菜单想设置为默认命令
disabled	disabled	规定命令/菜单项应该被禁用
icon	URL	归档命令/菜单项的图标
open	open	定义details是否可见
label	text	必须。规定命令/菜单项的名称
radiogroup	groupname	归档命令组的名称，命令组会在命令/菜单项本身被切换时进行切换 适用于type=“radio”
type	checkbox command radio	规定命令/菜单项的类型。默认是“command”

---

<command>

• <command>标签可以定义命令按钮，比如单选按钮、复选框按钮
• 没有浏览器支持<command>标签
• 只有当command元素位于menu元素内，该元素才是可见的。否则不会显示这个元素，但是可以用它来规定键盘快捷键。

属性	值	描述
checked	checked	定义是否被选中。 仅用于typr="radio"或type="checkbox"类型
disabled	disabled	定义command是否可用
icon	URL	定义command来显示图标的url
label	text	为command定义可见的label
radiogroup	groupname	定义command所属的组名。 仅在类型为type="radio"是使用
type	checkbox——元素表示可被切换的状态或选项 command——元素表示带有相关联动作的普通命令 radio——元素表示对列表项中一个项目的选择	定义该command的类型。默认是command