HTML5图像
<img>标签(空元素)
属性:
- alt text 必需,图像的替换文本
- src URL 必需,图像的URL
- height
- width
- usemap URL 将图像定义为客户端图像映射
*由于图像是独立文件存在的,如果某个HTML5文件包含10个图像,要正确显示这个页面需要加载11个文件,HTTP协议需要11次请求才能完成。
web使用的主要图像有GIF、JPEG和PNG。
<map>和<area>标签
map定义带有可单击区域的图像映射,area定义图像地图中的可单击区域
<map>和<area>标签用于创建图像地图。图像地图是指已被分为多个区域的图像,这些区域成为热点,可以创建多个热点,热点支持超链接。
<map>元素必需使用name属性定义image-map名称,name属性与<img>标签的usemap属性相关联,创建图像与映射之间的关系
<map>元素包含<area>元素,定义图像映射的可单击区域。
area属性:
- coords x1,y1,x2,y2 该值规定矩形左上角和右下角的坐标(shape属性为rect)
- x,y,radius 该值规定圆心的坐标和半径(shape属性为circle)
- x1,y1,x2,y2...x,y 该值规定了多边形各边的坐标,第一个坐标必需和最后一个坐标相同(poly)
- href URL 定义此区域的目标URL
- nohref nohref 规定该区域没有相关链接
- shape defalut (全部区域) rect(矩形区域) circle(圆形) poly(多边区域)
- target _blank (在新窗口打开被链接文档)_self(在相同窗口打开被链接文档)
例子:<img src="images/1.png" alt="封面" usemap="#maping">
<map name="maping" id="maping">
<area shape="rect" href="#" coords="100,175,179,190"/>
<area shape="circle" href="#" coords="50,50,50"/>
</map>
<figure>和<figcaption>标签
<figure>标签规定独立的内容,如图像、图表和照片等,<figcaption>标签定义<figure>元素的标题
例子:<figure>
<figcaption>图书封面</figcaption>
<img src="images/1.png" alt="封面"/>
</figure>
HTML5音视频
HTML5视频
<video>标签定义视频。使用<video>元素播放视频时不需要任何插件,只要浏览器支持HTML5就可以。
属性:
- autoplay autoplay 视频就绪后自动播放
- controls controls 显示视频播放器控件,比如播放按钮
- height
- width
- loop loop 循环播放
- poster URL 定义视频下载时显示的图像,或用户单击播放按钮前显示的图像
- src URL 播放视频的URL
- muted muted 静音
- preload 定义视频在页面加载时进行加载,并预备播放。如果使用“autoplay”,则忽略该属性。auto(默认值,预加载全部的音频/视频)metadata (仅加载音频/视频的元数据)none(不加载音频/视频)
对于不支持<video>元素的浏览器可以在元素内容中添加替换文字。例如:
<video src="other/Wiid.webm" controls="controls" autoplay>您的浏览器不支持video元素</video>
目前<video>元素 支持三种视频编码 :
OGG(.ogv) Firefox 3.5+、Chrome 3.0+、Opera 10.5+
WebM(.webm) Firefox 4.0+、Chrome 6.0+、Opera 10.6+
Mp4(.m4v) IE 9.0+、safari3.1+、iso 5.0、Android 4.0+
Mp4(.mp4) IE 9.0+、safari3.1+、iso 3.0、Android 2.3+
为了解决兼容问题,可以使用<source>元素为同一个媒体数据指定多个播放格式与编码方式,例如:
<video controls="controls" autoplay="autoplay">
<source src="other/Wild.ogv type="video/ogg">
<source src="other/Wild.mp4 type="video/mp4">
<source src="other/Wild.webm type="video/webm">
</video>
HTML5音频
<audio>元素只支持三种音频编码:
OGG(.ogg) Chrome 、Firefox、IE9、Opera
MP3(.mp3) Chrome 、IE9、Safari
WAV Firefox、Opera
<embed>标签定义嵌入的内容
一旦对象嵌入页面中,对象将成为页面的一部分,该元素主要用来嵌入视频和Flash。
属性
src URL 嵌入内容的URL
height
width
type MIME_type 定义嵌入内容的类型。参阅IANA MIME类型列表http://www.iana.org/assignments/media-types/media-types.xhtml
例子:
插入一个flash
<embed src="other/bu.swf" type="application/x-shockwave-flash" width="480px" height="360px"></embed>