HTML如何使用iframe？用法示例介绍

2021年4月2日11:30:14 发表评论 887 次浏览

Iframe在HTML中的意义：

HTML中的iframe代表内联框架。 " iframe"标签定义了文档内的矩形区域, 浏览器可以在其中显示单独的文档, 包括滚动条和边框。内联框架用于将另一个文档嵌入当前HTML文档中。

‘src‘属性用于指定占据iframe的文档的URL。

语法：

<iframe src="URL"></iframe>

在iframe中设置高度和宽度：

height和width属性用于指定iframe的大小。默认情况下, 属性值以像素为单位指定, 但也可以以百分比形式指定, 例如" 80％"。

<!DOCTYPE html>
<html>
  
<body>
  
     <p>Content goes here</p>
  
     <iframe src = "https://ide.lsbin.org/tryit.php" 
                                 height = "300" width = "400">
     </iframe>
  
</body>
  
</html>

输出：

在iframe中删除边框：

默认情况下, iframe周围有边框。要删除边框, 我们必须使用style属性并使用CSS border属性。

例子：

<!DOCTYPE html>
<html>
  
<body>
  
     <p>Content goes here</p>
  
     <iframe src = "https://ide.lsbin.org/tryit.php" 
             height = "300" width = "400" style = "border:none;">
     </iframe>
  
</body>
  
</html>

输出：

更改iframe边框的大小, 样式和颜色：

例子：

<!DOCTYPE html>
<html>
  
<body>
  
     <p>Content goes here</p>
  
     <iframe src = "https://ide.lsbin.org/tryit.php"
      height = "300" width = "400" style = "border:4px solid orange;">
  
     </iframe>
  
</body>
  
</html>

输出：

使用Iframe链接的目标：

iframe可用作链接的目标框架。链接的目标属性必须引用iframe的名称属性。

例子：

<!DOCTYPE html>
<html>
  
<body>
  
     <p>Click the link text</p>
     <iframe height = "300" width = "350" src =
"https://media.lsbin.org/wp-content/cdn-uploads/20190717121605/Screenshot-from-2019-07-17-12-12-55.png"
             name = "iframe_a"></iframe>
  
     <p><a href =
"https://ide.lsbin.org/tryit.php" target = "iframe_a">lsbin IDE</a></p>
  
</body>
  
</html>

输出：

在单击链接文本之前：