框架标签
<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>
属性 | 值 | 描述 |
0 1 | HTML5 不支持。规定是否显示框架周围的边框。 | |
URL | HTML5 不支持。规定一个包含有关框架内容的长描述的页面。 | |
pixels | HTML5 不支持。规定框架的上方和下方的边距。 | |
pixels | HTML5 不支持。规定框架的左侧和右侧的边距。 | |
name | HTML5 不支持。规定框架的名称。 | |
noresize | HTML5 不支持。规定无法调整框架的大小。 | |
yes no auto | HTML5 不支持。规定是否在框架中显示滚动条。 | |
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>
属性 | 值 | 描述 |
left right top middle bottom | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。 | |
1 0 | HTML5 不支持。规定是否显示<iframe> 周围的边框。 | |
pixels | 规定<iframe> 的高度。 | |
URL | HTML5 不支持。规定一个页面,该页面包含了有关<iframe> 的较长描述。 | |
pixels | HTML5 不支持。规定<iframe> 的顶部和底部的边距。 | |
pixels | HTML5 不支持。规定<iframe> 的左侧和右侧的边距。 | |
name | 规定<iframe> 的名称。 | |
sandboxNew | "" allow-forms allow-same-origin allow-scripts allow-top-navigation | 对<iframe> 的内容定义一系列额外的限制。 |
yes no auto | HTML5 不支持。规定是否在<iframe> 中显示滚动条。 | |
seamlessNew | seamless | 规定<iframe> 看起来像是父文档中的一部分。 |
URL | 规定在<iframe> 中显示的文档的 URL。 | |
srcdocNew | HTML_code | 规定页面中的HTML 内容显示在 <iframe> 中。 |
pixels | 规定<iframe> 的宽度。 |
图像标签
<img> 图像
定义HTML页面中的图像,必须有src和alt两个属性,将需要的图像连接到HTML页面上。
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
属性 | 值 | 描述 |
top bottom middle left right | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 | |
text | 规定图像的替代文本。 | |
pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 | |
crossoriginNew | anonymous use-credentials | 设置图像的跨域属性 |
pixels | 规定图像的高度。 | |
pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 | |
ismap | 将图像规定为服务器端图像映射。 | |
URL | HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 | |
URL | 规定显示图像的URL。 | |
#mapname | 将图像定义为客户器端图像映射。 | |
pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 | |
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>
属性 | 值 | 描述 |
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>
<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>
<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 | 设置视频播放器的宽度。 |