目录
上篇提到了制作一个静态网页基本的一些元素，而本文则会介绍更多的元素来完善你的页面！
1.文档的嵌入
在上篇文章中提到了如何用某些标签来进行图片、音频、视频的嵌入，但如果我们想在我们的页面中显示别人的页面或者自己的一个文档呢？
这时候就要用<iframe>元素，它可以使得在当前页面中嵌入另一个文档。
下面我们做一个简单的示范：
我们现在有一个空白的HTML文档，如果我们想要在自己的这个空白页面上插入自己的另一个页面，我们就把它的文件路径，放到<iframe>元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello！</title>
<style>
iframe{
height: 150px;
width:350px
}
</style>
</head>
<body>
<iframe src="C:\Users\13621\Desktop\1.html">
</iframe>
</body>
</html>在<iframe>中，我们的“src”依旧是指定的目标文件路径，而我们的“1.html”则是有一个背景是瓦力的HTML文档，这样在我们回到那个原先空白的页面，我们就能发现“1.html”被嵌套在了当前的页面中。
（嵌入的有点小，没有显出瓦力的全身）
由此，你可以用<iframe>元素来嵌入一些你喜欢的网站的某个视频，丰富你的页面。
像这样
我们可以嵌入一个b站的视频放到自己的页面。
（如何嵌入？）
找到你喜欢的视频，在分享键上会有嵌入代码的选项，再复制到你的网页即可
在我们嵌入了自己的一个文档，以及一个视频之后，很多人便想嵌入一个一个自己喜欢的网站（这里以http:baidu.com，但是当我们把网址放到<iframe>中时，我们会发现结果并不是我们所想的那样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
</head>
<body>
<iframe src="http:baidu.com">
</iframe>
</body>
</html>
这是因为<iframe>既然可以嵌入你喜欢的网站，也能嵌入一些不法分子的恶意网站，不法分子可以在你的页面上嵌入一个不可见的<iframe>元素，使得你在不知情的情况下点击了里面的某个链接，从而使得不法分子能够侵入你的电脑，获取你的隐私信息，所以工作人员对网页进行设置使得你无法用<iframe>元素来嵌入他的整个页面。
在我们自己写网页时为了被他人恶意嵌入，我们会使用sandbox属性来使得自己的网页更加安全，比如当sandbox属性包含“allow-forms”或“allow-script”时，会使得<iframe>标签中的内容不能包含控制页面，有助于防范点击劫持。
2.嵌入矢量图形
在Web上我们会遇到两种类型的图片：
（1）位图：位图文件里面包含了每一个像素的位置以及该像素点的颜色信息，例如我们常见的.jpg、.png、.gif等等
（2）矢量图：矢量图文件包含了图形和路径，电脑会根据算法来渲染出它的样子
那么这两种图片有什么区别呢？
下面是两种图片放大后的对比：
上面两个图片左边的png图片而右面的是svg图片，svg会根据算法计算图形的形状，这样即使你放大后的它也不会在边缘出现像素块使得图片模糊，并且svg的体积更小，只需要少量的算法即可。
（注意：因为是截图所以在文章中的这两个都是png的图片）
那么，如何在HTML文档中嵌入一个简单的svg图像呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
</head>
<body>
<svg>
<rect width="100px" height="50px" fill="black">
</svg>
</body>
</html>
首先我们要输入一个<svg>元素，里面的rent（这个是生成一个长方形，我们还可以生成别的图形比如圆形circle）（注意这不是闭合的元素！）而后面则是规定他的长宽高。
而fill里面则是图形里面填充的颜色。
！！！这里需要注意一点，如果我们在头部针对svg写一个内部CSS，你设置了width和height，可不是对你生成的svg图形的长宽进行改变而是这个svg元素！
如果你不能理解我们会举出一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
<style>
svg {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<svg>
<rect width="100px" height="50px" fill="red">
</svg>
</body>
</html>
我们让svg元素的背景是蓝色的，而让svg图形是红色的，并且设置了不同的长度宽度。这样他们俩的区别就显而易见了。
对于svg图形我们后面会详细提到
以上就是一些进阶版的嵌入元素:)
标签：嵌入,进阶,svg,元素,HTML,文档,我们,页面 From： https://blog.csdn.net/2401_84944910/article/details/143520354