HTML网页内嵌iframe的简单用法

 时间:2026-02-14 06:28:37

1、打开PyCharm开发工具,新建‘iframe.html’文件,并写代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>iframe</title></head>    <body>        <iframe src="http://www.baidu.com"></iframe>    </body><body></body></html>

HTML网页内嵌iframe的简单用法

2、点击右上角浏览器图标,查看效果如下图,iframe相当于内嵌了一个网页显示百度。

HTML网页内嵌iframe的简单用法

3、更改iframe的尺寸扩大显示范围,代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>iframe</title></head>    <body>        <iframe src="http://www.baidu.com

HTML网页内嵌iframe的简单用法

4、打开浏览器查看效果如下图

HTML网页内嵌iframe的简单用法

5、去掉ifram的边框和滚动条,代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>iframe</title></head>    <body>        <iframe src="http://www.baidu.com

HTML网页内嵌iframe的简单用法

6、打开浏览器,查看效果,没有了边框和滚动条

HTML网页内嵌iframe的简单用法

7、设置链接网页在iframe中显示,增加一个a标签,代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>iframe</title></head>    <body>        <a href="http://www.coder1024.site" target="miframe">链接到coder1024</a>        <iframe src="http://www.baidu.com" name="miframe

注意要设置ifrmae的name属性和a的target属性

HTML网页内嵌iframe的简单用法

8、在浏览器中打开网页,点击链接,在iframe中显示了链接的网页

HTML网页内嵌iframe的简单用法

  • 如何设置微信单独好友提醒
  • 微信如何设置好友重要消息提醒
  • 微信怎么单独给一个人设置提示音
  • 微信怎样设置单独一个人的提示音
  • 微信指定好友消息提醒怎么设置
  • 热门搜索
    汉字手抄报图片 安全的手抄报 扫黄打非手抄报 厉行节约反对浪费手抄报 抗美援朝手抄报 四年级英语手抄报 天安城门手抄报 感恩手抄报简单又漂亮 新学期新气象手抄报 文明交通手抄报