img标签：页面中嵌入图片，自闭合标签；
<img src=”图片地址” alt=”图像的替代文字” title=”提示文字”width=”图片宽度”height=”图片高度” />
// src：图片的url地址；alt：用来描述图片的含义，图片不显示时替代图片；title:提供额外的提示或帮助信息，鼠标移至图片上时显示提示信息；width/height：图片宽高，默认单位为px，width/height不设置默认显示原始大小。
// 实际开发中，通常会把网站应用到的图片统一存放在image或images文件夹中
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标签的应用</title>
</head>
<body>
<p>
<img src="images/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃" width="160" height="160">
</p>
<p>
楼兰蜜语 新疆野生<br>
无漂白薄皮核桃 500gx2包<br>
￥48.8
</p>
</body>
</html>
// 常见的图像格式：
JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩后体积较小，且较清晰，比较适合网页应用。
GIF格式支持透明色，同时支持”动画”— “一招鲜”
PNG兼有JPG和GIF格式的优势，但不支持动画；PNG8不支持半透明，PNG24支持半透明；
iframe内联框架
主要作用是使页面中的部分内容用框架实现，一般用在页面中引用站外的页面内容；如自己的页面中引用搜狐的新闻页面等；
<iframe src=“引用页面地址”name=“框架标识名”…>
常用属性：width、height、name/id
// name或者id可以和锚链接结合起来实现页面间的相互跳转。
操作步骤：
（1）在被打开的框架上加name或id属性，如，<iframe name=“mainFrame”src=“the_second.html”/>
（2）在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href=“the_second.html”target=“mainFrame”>下边显示第二页</a>
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe应用</title>
</head>
<body>
<h1>上方导航条</h1>
<p>
<a href="the_first.html" target="mainFrame">下面显示第一行</a>
<a href="the_second.html" target="mainFrame">下面显示第二行</a>
<a href="the_third.html" target="mainFrame">下面显示</a>
</p>
<iframe src="the_first.html" name="mainFrame" width="800px" height="150" frameborder="1"></iframe>
</body>
</html>
// 当前页面和嵌入的页面在不同的浏览器上下文中，JS/CSS是相互隔离的；在嵌入页面中的操作并不影响当前页面。
插件：object、embed
<object type=”application/x-shockwave-flash”>
<param name=”movie” value=”http://pdfReader.swf”>
<param name=”flashvars” value=”book.pdf”>
</object>
type：插件的类型 param：插件的参数 value：播放器地址
播放器地址也可以写在<object data=”” type=””></object>data属性中，但IE8及以下不兼容
也可以使用embed标签嵌入一个插件；
<embed src=”http://pdfReader.swf” type=”application/x-shockwave-flash” width=”640” height=”480”>
video 页面中播放视频，之前通过flash插件，目前使用HTML5的video标签，支持ogg、mp4、webm等视频格式；
<video src=“视频路径”controls=“controls”></video>
// src用于指定要播放的视频文件的路径；congtrols用于提供播放、暂停和音量控件；可使用width、height设置宽高。
video只有高版本浏览器才支持，若浏览器不支持，可在video元素中间插入文字用于提示，旧的浏览器就可显示给用户。
<video src=“视频路径”controls=“controls”>你的浏览器不支持video标签</video>
【示例】
// video中使用src只能设置一种格式的视频路径，但一种格式的视频很难让所有的浏览器都支持，因此，可以使用source。
// source元素嵌套在video中，可出现多次，每个source对应一种格式的视频，浏览器会自动选择第一个可以识别的格式。
<video controls=”controls” poster=”img/poster.jpg”autoplay loop>
<source src=”movie.webm” type=”video/webm”></source>
<source src=”movie.mp4” type=”video/mp4”></source>
您的浏览器不支持video格式
</video>
// src：资源URL地址（视频路径）；type：资源类型；poster：插入一个视频的封面；希望循环播放，需加loop属性。
// 视频进入的时候是暂停的，如果希望已进入就播放，可以给video加一个autoplay属性，这样页面加载后就会自动播放；
// 主流浏览器支持的视频格式
| 视频格式/浏览器 | IE | Firefox | Opera | Chrome | Safari |
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4(后缀.mp4) | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
audio 播放音频文件，支持Ogg、MP3、WAV等音频格式
// 语法类同video
// 主流浏览器对音频格式的支持情况
| 音频格式/浏览器 | IE | Firefox | Opera | Chrome | Safari |
| Ogg | 不支持 | 3.5+ | 10.5+ | 3.0+ | 不支持 |
| MP3 | 9.0+ | 不支持 | 不支持 | 3.0+ | 3.0+ |
| WAV | 不支持 | 4.0+ | 10.6+ | 不支持 | 3.0+ |
图：canvas、svg，嵌入图形图像
Canvas是基于像素的，提供了一些绘制函数，可利用脚本来绘制图形图像。
svg是矢量的，提供了一系列的图形图像，如线形、圆形、矩形。
// 静态、高保真的图形图像可以用svg；对于性能要求较高、场景较复杂的比如实时数据的展示、游戏等，可以用canvas。
热点区域：map/area，定义热点区域；
// img里的usemap属性和map里的name属性配合使用；
<img src=”1.jpg” alt=”运动” width=”1090” height=”995” usemap=”#map2”>
<map>
<area shape=”rect” cords=”669,75,1075,682” href=”xiupin.com” target=”_blank”>
<area shape=”rect” cords=”26,93,391,337” href=”xiupin.com/a.html”>
</map>
// area：定义热点；shape：形状；coords：热点区域范围(定义内容与形状有关)
Webpiece_整合分析、记录点滴
