12_嵌入内容

最新推荐文章于 2024-11-06 15:47:31 发布

小倪的博客

最新推荐文章于 2024-11-06 15:47:31 发布

阅读量544

点赞数 12

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/qq_73966534/article/details/141992942

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

嵌入图像

img元素允许我们在HTML文档里嵌入图像

要嵌入一项图像需要使用src属性和alt属性

src属性指定了嵌入图像的URL, alt属性定了img元素的备用内容, 此内容会在图像无法显示的时候呈现

可以使用width和height属性来指定img元素所代表的图像的尺寸(单位是像素), 图像在HTML标记处理完毕之后才会加载, 这就已维护则你省略了width和height属性, 浏览器不支持为该图像流出多大的空间, 造成的结果是, 浏览器必须依赖图像文件本身来确定它的尺寸, 然后重定位屏幕上的内容来容纳它, 这可能会让用户感到晃荡, 因为他们可能已经开始阅读文档内容,指定width和height属性让浏览器能够在图像尚未载入时正确摆放网页中的各个元素

width和height属性告诉浏览器图像的尺寸有多大, 不是你希望它有多大

超链接中嵌入图像

img元素的一个常见用户, 就是和a元素结合, 如果点击这张图像, 浏览器会导航值父元素a的href属性所指定的URL上, 给img元素应用ismap属性就创建了一个服务端分区响应图, 意思是在图像上点击的位置附加到URL上, 举个类似, 如果点击的位置是距图像顶部4像素. 左边缘10像素, 浏览器就会导航值下面的地址http://titan/listings/otherpage.html?10,4

创建客户端分区响应图

我们可以创建一个客户端分区响应图, 通过点击某张图像上的不同区域让浏览器导航到不同的URL上, 这一过程不需要服务器引导, 因此需要使用元素来定义图像上各个区域已经他们所代表的行为, 客户端分区响应图的关键是map

map元素包含一个或多个area元素, 它们各自代表了图像上可被点击的一块区域

area元素的属性可以被分为两类, 第一类处理的是area所代表的图像区域被用户点击后浏览器会导航到的URL,

第二类则包含了更有意思的属性: shape和coords属性, 可以同这些属性来标明用户可以点击的各个图像区域, shape和coords属性是共同其作用的, coords属性的意思根据shape属性的值而定

请注意这里我给img元素添加的usemap属性, 这个属性的值必须是一个井号串引用, 意思是一个由#字符开头的字符串, 这样你就能把map元素与图像关联起来了

注意, 在制作客户端分区响应图的时候, 无需使用a元素来显示创建超链接

嵌入另一张HTML文档

iframe元素允许我们在现有的HTML文档中嵌入另一张文档

在这个例子中, 我们创建了一个name属性为myframe的iframe, 这样就创建了一个名位myframe的浏览上下文, 然后我就可以把这个浏览器上下文与其他元素(a, form, button, input, base)的的target属性结合使用, 我用a元素创建一对超链接, 把它的href属性中指定的URL载入iframe

width和height属性指定了像素尺寸, src属性指定了iframe一开始应该载入并显示的URL, 而srcdoc属性允许你可以定义一张用于内嵌显示的HTML文档

HTML5引入了两个新的iframe元素属性, 第一个是seamless, 它指示浏览器把iframe的内容显示的像猪HTML文档的一个整体组成部分, 从途中看出, 默认情况下会有一个边框, 如果内容比width和height属性所指定的属性要大, 还会出现一个滚动条

第二个属性是sandbox, 它对HTML文档进行限制, 应用这个属性时如果不附带任何值,

下面这些元素就会被禁用

脚本
表单
插件
指向其他浏览器上下文的连接

另外, iframe的内容被视为与HTML文档的其余部分来源不同, 这样会引发额外的安全措施, 可以通过定义sandbox属性的值独立启用各种功能

通过插件嵌入内容

object和embed元素最初都是作为拓展浏览器能力的一种方式, 用于添加插件的支持, 而插件能够处理浏览器不直接支持的内容

使用embed元素

src属性指定了内容的地址, type属性指定了内容的MIME类型, 这样浏览器就支持该如何处理它, width和height属性决定嵌入内容将在屏幕上占据的空间大小, 你应用的其他任何属性都会被当做是插件或内容的参数, 在这个例子中, 我应用了一个名为allowfullscreen的属性, Youtube的视频播放器通过同它来启用全屏观看功能

使用object和param元素

object元素实现的效果和embed元素一样, 但它的工作方式稍有不同, 并带有一些额外的功能

data属性提供了内容的地址, type属性和width, height属性和在embed元素一致, 使用param元素来定义要传递给插件的参数, 每个需要定义的参数都各自使用一个param元素, name和value属性定义了参数的name和value

object元素的一大优点是可以包含备用内容, 在指定内容不可用的时候显示出来,

data属性引用了一个不存在的文件, 浏览器会尝试载入这个不存在的文件, 如果失败了浏览器就会显示object元素中的内容, param元素会被忽略

请注意当type属性的不存在的时候, 浏览器会尝试从数据本身判断起内容类型, 对于某些浏览器的特定插件而言, 及时数据不存在, 插件也会加载, 这就意味着屏幕上显示的是一片空白的区域, 而不是备用的内容