HTML5 2---嵌入内容

一、Iframe:嵌入技术
<iframe>元素旨在将web文档嵌入到当前文档中。这很适合将第三方内容纳入您的网站。
在这里插入图片描述
此示例包括使用以下所需的<iframe>基本要素:
在这里插入图片描述
在这里插入图片描述
注意:为了提高速度,在主内容完成加载后,使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用,并减少您的官方页面加载时间(重要的SEO指标)。
在这里插入图片描述
二、使用HTTPS:
HTTPS是HTTP的加密版本,应尽可能使用HTTPS为网站提供服务:

  1. HTTPS减少了远程内容在传输过程中被篡改的机会
  2. HTTPS防止嵌入式内容访问您的父文档中的内容,反之亦然。
    始终使用sandbox属性:
    想尽可能减少攻击者在你的网站上做坏事的机会,那么你应该给嵌入的内容仅能完成自己工作的权限。当然,这也适用于你自己的内容。一个允许包含在其里的代码以适当的方式执行或者用于测试,但不能对其他代码库(意外或恶意)造成任何损害的容器称为沙盒。
    未沙盒化(Unsandboxed)内容可以做得太多(执行JavaScript,提交表单,弹出窗口等)默认情况下,您应该使用没有参数的sandbox属性来强制执行所有可用的限制。

三、<embed><object>元素
<embed><object>元素的功能不同于<iframe>—— 这些元素是用来嵌入多种类型的外部内容的通用嵌入工具,其中包括像Java小程序和Flash,PDF(可在浏览器中显示为一个PDF插件)这样的插件技术,甚至像视频,SVG和图像的内容!
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、将SVG添加到页面
快捷方式:<img>
要通过 <img>元素嵌入SVG,你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性(或者如果您的SVG没有固有的宽高比)。
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值