图像<img>
基本语法 <img src="url" alt="text"/>
- url可以是相对路径或绝对路径
- text内容用作浏览器无法加载图像时对图像的描述
背景图
<body background="url"></body>使用CSS样式
background-image:url(“图片地址”)
background-repeat:
- repeat-x 在x轴方向重复
- repeat-y 在y轴方向重复
- norepeat 没有重复
background-size:
- 400px 500px 像素
- 50% 80% 百分比
background-position:
align属性(排列图像)
<img src="" align="bottom"/> 底部(默认)<img src="" align="middle"/> 中间<img src="" align="top"/> 顶部<img src="" align="left"/> 向左浮动<img src="" align="right"/> 向右浮动
图像大小
<img src="" width="43" height="43"/>- 直接数字指定的是像素，也可以指定百分比
创建图像映射
创建带有可供点击区域的图像地图。
其中的每个区域都是一个超级链接。
<img src="" border="0" usemap="#maxmap" alt="maxmap" />注1
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="url1.jpg" alt="map1" /> 注2
<area shape="circle" coords="129,161,10" href ="url2.jpg" alt="map2" />
<area shape="rect" coords="0,0,110,260" href ="url3.jpg" alt="map3" />
</map>- 注解1
- 加载图像地图，`usemap`属性引用了`map`元素中的`name`或`id`属性(取决与浏览器)，所以应该在`map`元素中同时添加`name`或`id`属性。
- 注解2
- "shape"属性——形状，可以是圆，三角形，矩形，多边形；
- "coords"属性——坐标，
- 以图像左上角为原点, 圆 coords="x,y,r"
矩形 coords="x1,y1,x2,y2" 两组对角的坐标
多边形 coords="x1,y1,x2,y2,x3,y3,"''',"
- 多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
- 如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。
- 浏览器会忽略超过图像边界范围之外的坐标。媒体
音频
embed标签
<object>元素定义了在 HTML 文档中嵌入的对象，如Java 小程序, PDF 阅读器, Flash 播放器),图像,网页等.<embed type="mp3" src="url" width="640" height="480">
object标签
<object>标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
不要对图像使用<object>标签，请使用标签代替。 <object type="mp3" src="url" width="100" heigth="100">text</object>无法播放时会加载text文本
audio标签
基本语法
<audio src="" controls="controls">text</audio>加载多个源
从第一个源开始，直到找到第一个能播放的，且只能播放一个
-
<audio controls><source src="url1.mp3"/><source src="url1.ogg"/><embed src="url.mp3/> text</audio>
属性
- autoplay 音频在就绪后马上播放。
- controls 向用户显示音频控件(比如播放/暂停按钮)
- loop 每当音频结束时重新开始播放。
- muted 音频输出为静音
- js插件
- audio+embed+object
视频
embed标签
object标签
video标签
- 类似与audio
