第六十五,html嵌入元素

html嵌入元素

学习要点:

    1.嵌入元素总汇

    2.嵌入元素解析

    本章主要探讨HTML5中嵌入元素,嵌入元素主要功能是把外部的一些资源插入到HTML中。

 

一.嵌入元素总汇

这里所列出的元素,并非本节课全部涉及到,比如音频audio、视频video、以及动态图像canvas和媒体资源source、track等会在后面章节或季度讲解。

 元素名称                                 说明

img        嵌入图片

map        定义客户端分区响应图

area        表示一个用户客户端分区响应图的区域

audio       表示一个音频资源

video        表示一个视频资源

iframe       嵌入一个文档

embed       用插件在HTML中嵌入内容

canvas       生成一个动态的图形画布

meter        嵌入数值在许可值范围背景中的图形表示

object       在HTML文档中嵌入内容

param       表示将通过object元素传递给插件的参数

progress      嵌入目标进展或任务完成情况的图形表示

source       表示媒体资源

svg        表示结构化矢量内容

track        表示媒体的附加轨道(例如字幕)

 

二.嵌入元素解析

1.<img>嵌入图像

<img src="401.png" alt="风景图" width="318" height="213" title="风景图">

效果:

解释:<img>元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。img的私有属性

属性名称                                 说明

src       嵌入图像的URL

alt        当图片不加载时显示的备用内容

title  图片标题,鼠标放到图片上显示

width       定义图片的长度(单位是像素)

height      定义图片的高度(单位是像素)

ismap      创建服务器端分区响应图

usemap      关联<map>元素

创建服务器端分区响应图

<a href="1.html">
    <img src="401.png" alt="风景图" width="318" height="213" title="风景图" ismap>
</a>

分区响应图,就是鼠标在图片不同位置点击,就会将图片当前的区域参数发送到网址后面,如:http://localhost:63342/py/1.html?170,160

 

2.<map>创建分区响应图,图片地图

<imgsrc="img.png"alt="风景图"width="339"height="229"usemap="#Map">

<map name="Map">

<area shape="rect" coords="31,28,112,100"

href="http://www.baidu.com" target="_blank" alt="方形">

<area shape="circle" coords="187,142,47"

href="http://www.google.com" target="_blank" alt="圆形">

<area shape="poly" coords="287,26,240,66,308,112"

href="http://www.soso.com" target="_blank" alt="多边形">

</map>

解释:通过图片中的热点进行超链接,这里我们采用Dreamweaver进行操作生成的。

 

3.<iframe>嵌入另一个文档

<a href="https://www.so.com" target="in">好搜</a> |<a href="http://www.baidu.com" target="in">百度</a>
<br>
<iframe src="https://www.so.com" width="600" height="500" name="in"></iframe>

效果:

解释:<iframe>表示内嵌一个HTML文档。其下的src属性表示初始化时显示的页面,width和height表示内嵌文档的长度和高度,name表示用于target的名称连接。

 

4.<embed>嵌入插件内容

属性名称                                 说明

src        插件URL

type        插件类型

width  宽度
height   高度

<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="480" height="400"></embed>

效果:

解释:<embed>元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了一个土豆网的flash视频。type类型表示被插入内容的类型,这里不列出所有,后面如果遇到其他类型的文件,再继续探讨;width和height表示宽高;src表示文件路径。

 

5.<object>和<param>元素

解释:<object>元素和<embed>一样,只不过object是html4的标准,而embed是 html5的标准。而object不但可以嵌入flash,还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替,我们这里暂时不对其详细讲解。

 

6.<progress>显示进度

<progress value="30" max="100"></progress>

效果:

解释:<progress>元素可以显示一个进度条,一般通过JS控制内部的值。IE9以及更 低版本不支持此元素。

 

7.<meter>显示范围里的值,指示标识

<meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter>

效果:

解释:<meter>元素显示某个范围内的值。其下的属性包含:min和max表示范围边界,low表示小于它的值过低,high表示大于它的值过高,optimum表示最佳值,但不出现效果。IE浏览器不支持此元素。

时间: 2024-11-03 21:20:04

第六十五,html嵌入元素的相关文章

QT开发(六十五)——QT样式表编程实例

QT开发(六十五)--QT样式表编程实例 一.QComboBox组合框样式定制 1.基本定义 QComboBox  {     border: 1px solid gray;     border-radius: 3px;     padding: 1px 2px 1px 2px;  # 针对于组合框中的文本内容     min-width: 9em;   # 组合框的最小宽度 } QComboBox::drop-down {     subcontrol-origin: padding;   

第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的查询

第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)的查询 elasticsearch(搜索引擎)的查询 elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据 查询分类: 基本查询:使用elasticsearch内置的查询条件进行查询 组合查询:把多个查询条件组合在一起进行复合查询 过滤:查询同时,通过filter条件在不影响打分的情况下筛选数据

全栈JavaScript之路( 二十五 )访问元素的样式

任何支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之对应. 这个style 对象是 CSSStyleDeclaration类型的实例,包含着html style特性的所有样式信息.但不包含 外部样式或者 内嵌样式层叠而来的样式. 在style特性中,提定的任何css属性,都将表现为这个style 对象的属性.对于使用短划线的的属性名,必须转化为驼峰大小写形式,多数情况下都可以这样转换. 也有例外, float 是javascript 关键字,不能直接转换,

【国庆六十五年纪念毛主席】诗一首

[国庆六十五年纪念毛主席] 建国华诞六五载,驾鹤西去三八年. 每逢国庆念主席,纪念堂前寄哀思. 四渡赤水过金江,三大战役攻锦州. 一颗卫星遨天游,三大导弹震地颤. 大帝远去寻伟人,试看今朝习书记.

spring boot实战(第十五篇)嵌入tomcat源码分析

嵌入tomcat源码分析 在启动spring boot工程时利用@SpringBootApplication注解,该注解启动@EnableAutoConfiguration自动配置,加载META-INF/spring.factories文件 # Auto Configure org.springframework.boot.autoconfigure.EnableAutoConfiguration=org.springframework.boot.autoconfigure.admin.Spri

六十五、SAP中通过BREAK-POINT下断点,进行调试

一.代码如下,有2个断点的按钮,可以可以写入BREAK-POINT人工断点 二.运行之后,程序会被断下来, 四个执行按钮,意思分别为:单步进入子程序,单步不进入子程序,返回外面,执行到断点处 三.我们双击变量中的ITAB5 四.在结构中可以看到他是由2个成员组成的结构体 五.我们双击内表图标 六.可以看到,此处为一个内表 七.遇到问题要沉着冷静,多调试. 原文地址:https://www.cnblogs.com/tianpan2019/p/11229187.html

一个屌丝程序猿的人生(六十五)

项目演示当天! 教室里一大早就热闹非凡. 张建派的人此刻已经聚集在一起,开始探讨起接下来的战术. "弟兄们,今天就要开战了啊." "是啊!想想还真有些小激动呢!" "对了,张建人呢?" "出去接电话了.待会儿林萧那边的人演示的时候,大家一定要记得提问啊." "必须的!我就不信就两天的时间,他们就能把这项目玩转,就算是照着林萧的项目抄也抄不明白啊." "哈哈!还是张建项目做得快,咱们可是做了快整整一

第一百六十五节,jQuery,过滤选择器

jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持.和常规 选择器一样,jQuery 为了更方便开发者使用,提供了很多独有的过滤器. 一.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类 似:使用冒号

第六十节,文本元素标签

文本元素标签 <b></b>表示关键字和产品名称如:<b>查看效果</b> 效果:加粗 查看效果 <strong></strong>表示重要的文字 如:<strong>查看效果</strong> 效果:加粗 查看效果 <br>强制换行如:<br>查看<br>效果效果:在浏览器显示换行 查看效果  <wbr>安全换行,一般只用于英文如:<wbr>查看&l