关闭

html中嵌入内容的元素总结

标签: htm5网页设计前端
391人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:404447次
    • 积分:5751
    • 等级:
    • 排名:第4496名
    • 原创:209篇
    • 转载:80篇
    • 译文:0篇
    • 评论:45条
    文章分类
    最新评论