【HTML5学习笔记】8：嵌入元素的使用

嵌入元素主要用来把外部的一些资源插入到HTML中。

<img>用来嵌入图片，有下面这些常用属性。

src是图片的URL；

alt是当图片不加载时候(网络错误或者浏览器屏蔽了这个图片，或者找不到这个URL的时候都会这样)显示的备用的内容，有些浏览器可能不支持alt；

width和height定义图片的长度和高度；

ismap创建服务器分区的响应图，先给<img>外一个超链接链接自己这个页面，这时点击图片就相当于不断刷新这个页面。如果加上ismap之后，每点击图片就会发现浏览器的地址后面多了一个问号和后面的数字，会把每次点击的位置的坐标提交出去，在后面的学习中可以通过JavaScript获取到它；

usemap用来关联<map>元素，然后用<map>来建立一些热点区域或者叫分区响应图(上次说过圆形正方形多边形热点区域)。

在src属性中写好它的URL之后，按Ctrl+F5深度刷新(可以刷新iframe里面的东西)，就可以看到嵌入了另一个页面。将它的name属性和某些超链接的target属性设置成一样，那么那些超链接将会在这个<iframe>模块中打开。

仍然是src表示其URL，type表示其类型(往往从URL默认就能知道)，还有width和height表示长度和高度。

<progress>显示一个进度条，用value和max属性表示这个进度条有百分之多少。在IE10以上的版本支持它。一般通过JavaScript控制其内部的值。

<meter>显示范围的值，IE浏览器不支持这个元素。

min和max指定最小值和最大值，即范围。low和high指定发出提醒的过小和过大值，如果value过小或者过大，它的颜色都会改变。还有optimum属性表示最佳值，但是没有实际效果，就是即使value=optimum也不会更绿一点。

*以上例子的使用

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>嵌入元素</title>
	<meta charset="utf-8">
</head>
<body>
	<a href="index.html">
	<img ismap src="tx.jpg" alt="图片加载错误" width="200" height="300">
	</a>
	<a href="http://www.baidu.com" target="in">百度</a>
	|
	<a href="http://www.haosou.com" target="in">好搜</a>
	<iframe src="http://www.hao123.com" width="800" height="600" name="in"></iframe>
	<progress value="30" max="100">
	<br>
	<meter min="10" max="100" low="40" high="80" value="30"></meter>
</body>
</html>

运行结果：

【HTML5学习笔记】8：嵌入元素的使用

IE不支持<meter>标签，所以我代码写了也没有显示它。

吃饭。

秒客网

【HTML5学习笔记】8：嵌入元素的使用

相关文章