在HTML文档中嵌入内容，可以是你的页面更加丰富。
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>src定义了图像的URL，alt属性定义了当图像无法显示时，浏览器将显示的替代文本。图像无法显示可能有以下原因：
<a href="otherpage.html"> <img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/> </a>这样当点击该图像后，浏览器会导航至父元素a的href属性所指定的URL上。给img元素应用ismap属性就创建了一个服务器端分区响应图：
<a href="otherpage.html"> <img src="triathlon.png" alt="Triathlon Image" width="200" height="67" ismap/> </a>这样，图像的点击的位置会附加到URL上，例如，如果点击的位置是距图像顶部4像素，左边10像素，则浏览器将导航到一下URL：
<p><img src="triathlon.png" usemap="#mymap" alt="Triathlon Image"/></p> <map name="mymap"> <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/> <area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/> <area href="otherpage.html" shape="default" alt="default"/> </map>上面的脚本定义了用户如果点击图片的游泳部分，浏览器导航至swimpage.html，如果用户点击图像上的骑车部分，浏览器则会导航至cyclepage.html，点击其它部分则导航至otherpage.html。
<iframe src="demo_iframe.htm" seamless></iframe>下面是iframe的一个完整例子：
<header> <h1>Things I like</h1> <nav> <ul> <li><a href="fruits.html" target="myframe">Fruits IＬike</a></li> <li><a href="activities.html" target="myframe">Activities IＬike</a></li> </ul> </nav> </header> <iframe name="myframe" width="300" height="100"/>
<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3" type="application/x-shockwave-flash" width="560" height="340" allowfullscreen="true"/>上面使用了allowfullscreen属性，用于设置是否启用全屏观看功能。
<object width="560" height="349" data="http://titan/myimaginaryfile"> <param name="allowFullScreen" value="true"/> <b>Sorry!</b> We can‘t display this content </object>如果data属性引用的资源不存在，则显示object元素中的内容。
<progress id="myprogress" value="10" max="100"></progress>
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="90">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName(‘BUTTON‘);
var progress = document.getElementById(‘myprogress‘);
for(var i = 0;i < buttons.length; i++){
buttons[i].onclick = function(e) {
progress.value = e.target.value;
};
}
</script>上面给出的例子演示了点击不同的button让progress显示不同的值，在chrome中的效果如下：
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80"optimum="60"></meter>
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="90">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName(‘BUTTON‘);
var meter = document.getElementById(‘mymeter‘);
for(var i = 0;i < buttons.length; i++){
buttons[i].onclick = function(e) {
meter.value = e.target.value;
};
}
</script>当meter元素的value值为过低和过高，以及最佳值时，浏览器会以不同的方式呈现它们。原文：http://blog.csdn.net/tomato__/article/details/50697564