您的位置：首页 > Web前端 > HTML

html中嵌入内容的元素总结

2015-07-09 18:11 627 查看

img——在html文档里嵌入图像；

a元素里使用img——创建基于图像的超链接；

将img或object与map和area结合使用——创建客户端分区响应图；

iframe——嵌入另一张html文档；

emnbed或object——通过插件嵌入内容；

使用object元素，用它的name属性定义浏览上下文的名称——创建浏览上下文；

audio、video、source、track——不通过插件嵌入音频和视频（html5）；

canvas——在html文档里嵌入图形（html5）；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<!--另一种声明html页面所用字符编码的方法
<meta http-equiv="content-type" content="text/html charset=utf-8"/>
-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<script src="simple.js"></script>
</head>
<body>
<p>
<a href="http://www.shydzc.com">
<img src="images/xw_cenn.png" ismap alt="新华网" width="135" height="40"/>
</a>
</p>
<p>
<a href="http://www.shydzc.com">
<img src="images/xw_china.png" usemap="#mymap" alt="中华网" width="115" height="40"/>
</a>
</p>
<map name="mymap">
<area href="swim.html" shape="rect" coords="3,5,68,62" alt="swimming"/>
<area href="cycle.html" shape="circle" coords="70,55,30" alt="running"/>
<area href="other.html" shape="default" alt="default"/>
</map>
<p>
<a href="fruits.html" target="myframe">Fruits I like</a>
<iframe name="myframe" width="300" height="100"></iframe>
</p>
<p>
<embed src="http://player.youku.com/player.php/sid/XMTI3NjI2MzQ2MA==/v.swf"
allowFullScreen="true" quality="high" width="480" height="400"
align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"/>
</p>
<p>
<object width="480" height="400"
data="http://player.youku.com/player.php/sid/XMTI3NjI2MzQ2MA==/v.swf"
type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true">
<b>您的浏览器没有安装flash插件，无法显示</b>
</object>
</p>
<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>
<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>
</body>
</html>

ps:hrml5的元素需考虑是否获得主流浏览器的支持，具体可参考http://caniuse.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航