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

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

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>

输出:

HTML | iframe1

在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>

输出:

HTML | iframe2

更改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>

输出:

HTML | iframe3

使用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>

输出:

在单击链接文本之前:

HTML | iframe4

单击链接文本后:

HTML | iframe5

支持的浏览器:

列出的浏览器支持<iframe>标记:

  • 谷歌浏览器
  • IE浏览器
  • 火狐浏览器
  • 歌剧
  • 苹果浏览器

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: