html中嵌入内容的元素总结

最新推荐文章于 2022-04-06 10:38:47 发布

bboyjoe

最新推荐文章于 2022-04-06 10:38:47 发布

阅读量1.5k

点赞数

分类专栏： html 文章标签： htm5 网页设计前端

本文链接：https://blog.csdn.net/bboyjoe/article/details/46820255

版权

html 专栏收录该内容

12 篇文章 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].οnclick=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].οnclick=function(e){
            meter.value= e.target.value;
        }
    }
</script>
</body>
</html>

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

bboyjoe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中嵌入内容的元素总结

img——在html文档里嵌入图像；a元素里使用img——创建基于图像的超链接；将img或object与map和area结合使用——创建客户端分区响应图；iframe——嵌入另一张html文档；emnbed或object——通过插件嵌入内容；使用object元素，用它的name属性定义浏览上下文的名称——创建浏览上下文；audio、video、source、track——不
复制链接

扫一扫