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
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-8ISO-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-8ISO-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服务器的URLprefetch——规定应该对目标文档进行缓存search——链接到针对文档的搜索工具sidebar——链接到应该显示在浏览器侧栏的文档tag——描述当前文档的标签（关键词） | 规定当前文档与被链接文档之间的关系 |
rev | 同rel 几乎没有浏览器支持rev | 规定被链接文档与当前文档之间的关系 |
size | heightXwidthany | 规定被链接资源的尺寸（仅适用与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 commandradio | 规定命令/菜单项的类型。默认是“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 |
