HTML框架标签、图像标签、声音/视频标签

littlePig226

已于 2023-01-18 22:11:39 修改

阅读量113

点赞数

文章标签：前端 html Powered by 金山文档

于 2023-01-17 15:27:10 首次发布

原文链接：https://www.w3cschool.cn/htmltags/ref-byfunc.html

版权

框架标签

<frame> 框架集的窗口或框架 HTML5

定义<frameset>中的子窗口，HTML5中不支持此标签。

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

属性	值	描述
frameborder	0 1	HTML5 不支持。规定是否显示框架周围的边框。
longdesc	URL	HTML5 不支持。规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	HTML5 不支持。规定框架的上方和下方的边距。
marginwidth	pixels	HTML5 不支持。规定框架的左侧和右侧的边距。
name	name	HTML5 不支持。规定框架的名称。
noresize	noresize	HTML5 不支持。规定无法调整框架的大小。
scrolling	yes no auto	HTML5 不支持。规定是否在框架中显示滚动条。
src	URL	HTML5 不支持。规定在框架中显示的文档的 URL。

<frameset> 框架集 HTML5

定义一个框架集，用来组织一个或多个<frame>元素，每个<frame>有各自独立的文档，对丁框架集中存在多少列或多少行，以及每行列占用的百分比/像素。HTML5已不支持本标签。

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

属性	值	描述
cols	像素/百分比/自动	框架集中列的数目和尺寸
rows	像素/百分比/自动	框架集中行的数目和尺寸

<noframes> 针对不支持框架的用户的替代内容HTML5

为哪些不支持框架的浏览器显示文本，本元素位于frameset元素内部，HTM5不支持本标签。

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
  <noframes>抱歉，您的浏览器不支持 frame 属性！</noframes>
</frameset>

</html>

属性	值	描述
class	classname	规定元素的类名
dir	rtl ltr	规定元素中内容的文本方向
id	id	规定元素的唯一id
lang	language_code	规定元素中内容的语言代码
style	style_definition	规定元素的行内样式
title	text	规定元素的额外信息
xml:lang	language_code	规定XHTML 文档中元素内容的语言代码

<iframe> 内联框架

内联框架被用来在当前HTML文档中嵌入另一个文档，可以使用css定义样式。

<iframe src="///www.baidu.com"></iframe>

属性	值	描述
align	left right top middle bottom	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>。
frameborder	1 0	HTML5 不支持。规定是否显示<iframe> 周围的边框。
height	pixels	规定<iframe> 的高度。
longdesc	URL	HTML5 不支持。规定一个页面，该页面包含了有关<iframe> 的较长描述。
marginheight	pixels	HTML5 不支持。规定<iframe> 的顶部和底部的边距。
marginwidth	pixels	HTML5 不支持。规定<iframe> 的左侧和右侧的边距。
name	name	规定<iframe> 的名称。
sandboxNew	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	对<iframe> 的内容定义一系列额外的限制。
scrolling	yes no auto	HTML5 不支持。规定是否在<iframe> 中显示滚动条。
seamlessNew	seamless	规定<iframe> 看起来像是父文档中的一部分。
src	URL	规定在<iframe> 中显示的文档的 URL。
srcdocNew	HTML_code	规定页面中的HTML 内容显示在 <iframe> 中。
width	pixels	规定<iframe> 的宽度。

图像标签

<img> 图像

定义HTML页面中的图像，必须有src和alt两个属性，将需要的图像连接到HTML页面上。

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

属性	值	描述
align	top bottom middle left right	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。
alt	text	规定图像的替代文本。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。
crossoriginNew	anonymous use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的URL。
usemap	#mapname	将图像定义为客户器端图像映射。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。

<map> 图像映射

用于客户端图像映射（可点击）

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.gif">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venglobe.gif">
</map>

属性	值	描述
name	mapname	必需。为image-map 规定的名称。

<area> 图像地图内部的区域

定义图像映射内部的区域，始终嵌套在

<img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap">
 
<map name="planetmao">
<area shape="rect" coords="0,0,82,126" alt="sun" href="sun.gif">
<area shape="circle" coords="90,58,3" alt="sun" href="sun.gif">
<area shape="circle" coords="124,58,8" alt="sun" href="sun.gif">
</map>

属性	值	描述
alt	text	规定区域的替代文本。如果使用href属性，则该属性时必需的。
coords	coorodinates	规定区域的坐标。
href	URL	规定区域的目标URL。
hreflang	language_code	规定目标URL的语言。
media	media query	规定目标URL是为何种媒介/设备优化的。默认：all。
nohref	value	HTML5不支持。规定没有相关链接的区域。
rel	alertnate author bookmark help license next nofollow noreffer prefetch prev search tag	规定当前文档与目标URL之间的关系。
shape	default rect circle poly	规定区域的形状。
target	_blank _parent _self _top framename	规定在何处打开目标URL。
type	MIME_type	规定目标URL的MIME类型。注：MIME=Multipurpose Internet Mail Extensions。

<canvas> 通过js来绘制图形

是一个画布标签，作为一个图形容器，必须使用脚本（js）绘制图形。

<canvas id="myCanvas"></canvas>

<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

属性	值	描述
heightNew	pixels	规定画布的高度。
widthNew	pixels	规定画布的宽度。

<figcaption> 定义一个关于figure元素的标题

为<figure>标签定义标题，并且放置在<figure>标签的第一个或者最后一个子元素的位置。

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

<figure> 对元素进行组合

规定独立的流内容（图像、图表、照片、代码等等）。标签内的内容要与主内容相关，元素的内容相对于主内容时独立的，元素内容的删除不会对文档流产生影响。

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

声音/视频标签

<audio> 声音

定义声音，可以是音乐或者其他音频流。支持文中文件格式：Mp3、Wav、Ogg

属性	值	描述
autoplayNew	autoplay	如果出现该属性，则音频在就绪后马上播放。
controlsNew	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loopNew	loop	如果出现该属性，则每当音频结束时重新开始播放。
mutedNew	muted	如果出现该属性，则音频输出为静音。
preloadNew	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
srcNew	URL	规定音频文件的URL。

<source> media的媒体资源

可以为<picture>、<audio>或<video>元素指定一个或者多个的媒体资源

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

属性	值	描述
mediaNew	media_query	规定媒体资源的类型，供浏览器决定是否下载。
srcNew	URL	规定媒体文件的URL。
typeNew	MIME_type	规定媒体资源的MIME 类型。

<track> 为声音或视频定义外部文本轨道

这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。主要用在音频和视频标签中。

<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>

属性	值	描述
defaultNew	default	规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
kindNew	captions chapters descriptions metadata subtitles	规定文本轨道的文本类型。
labelNew	text	规定文本轨道的标签和标题。
srcNew	URL	必需的。规定轨道文件的URL。
srclangNew	language_code	规定轨道文本数据的语言。如果kind 属性值是 "subtitles"，则该属性是必需的。

<video> 音频或视频

将视频内容嵌入到HTML文档中，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

属性	值	描述
autoplayNew	autoplay	如果出现该属性，则视频在就绪后马上播放。
controlsNew	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
heightNew	pixels	设置视频播放器的高度。
loopNew	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedNew	muted	如果出现该属性，视频的音频输出为静音。
posterNew	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preloadNew	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
srcNew	URL	要播放的视频的URL。
widthNew	pixels	设置视频播放器的宽度。