html中嵌入内容的元素总结

原创 2015年07月09日 18:11:16

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

HTML图片热区map area的用法整理

标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下: ...
  • amy0821
  • amy0821
  • 2016年08月09日 10:21
  • 853

HTML 嵌入元素

学习要点 嵌入元素总汇 嵌入元素解析 一、嵌入元素总汇 元素名称 说明 ...

HTML热区map坐标,随窗口大小自适应办法(javascript)

为图片添加MAP: [html] view plaincopy div>   span id="lbresult">   img src='YardCr...

HTML5基础学习笔记(五)

Day05 HTML页面元素属性 四、嵌入元素 1.嵌入元素汇总 元素名称 说明 img 嵌入图片 map...

html5 图片热点area,map的用法

今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形、圆形、三角形区域都可以进入其他网页! ...
  • ly89cn
  • ly89cn
  • 2015年11月14日 10:44
  • 585

html中组织内容的元素总结

p——表示段落; div——将全局属性应用到一片内容上,但不表示任何其他内容分组; pre——保留html文档中的布局; blockquote——表示引自他处的内容; hr——表示段落级别的主题转变...
  • bboyjoe
  • bboyjoe
  • 2015年07月08日 14:29
  • 397

AngularJS实现一个HTML元素内容可编辑指令

有时我们想让用户可编辑元素某个属性内容,比如自定义数据名称,所以在此实现一个简易的指令my-editable先看效果吧: 指令代码:.directive('myEditable', function...

javascript访问html元素的内容(1)

形如如下格式的html元素:I'm BIG panda!!!有3种方式获取其内容,可以获取起全部的子内容,或是获取其子内容的text纯文本标识,或是以对象方式获取其子内容。可以使用元素对象的inner...
  • mydo
  • mydo
  • 2015年03月26日 09:44
  • 722

千呼万唤 HTML 5 (3) - 内容分组元素

原文地址:http://www.cnblogs.com/webabcd/archive/2011/09/22/2184684.html 作者:webabcd 介绍 HTM...

Extjs框架html5中input、textarea的placeholder,元素内容为空时,颜色为灰色

前端Extjs框架,使用input、textarea的属性placeholder,当元素内容为空,显示placeholder对应的值。 在Google、Firefox都显示为灰色,但是在IE11...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html中嵌入内容的元素总结
举报原因:
原因补充:

(最多只允许输入30个字)