非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.11 iframe和a元素的target值

╰半夏微凉° 2024-03-26 19:35 44阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.11 iframe和a元素的target值

![在这里插入图片描述][1bfc38d050bd4569a812606ce69f4b6b.png_pic_center]

#### 一 HTML+CSS ####

#### 2 HTML常见的元素 ####

##### 2.11 iframe和a元素的target值 #####

*  利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
 *  frameborder属性
    
     *  用于规定是否显示边框
        
         *  1：显示
         *  0：不显示
 *  a元素target的其他值:
    
     *  \_parent：在父窗口中打开URL
     *  \_top：在顶层窗口中打开URL

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
      <iframe src="./other/a元素所在的网页.html" frameborder="1"></iframe>
      
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <a href="http://www.taobao.com" target="_top">打开淘宝</a>
    </body>
    </html>

![在这里插入图片描述][ae25da7788784e71a49037b3ad2ee527.png_pic_center]

效果

![在这里插入图片描述][e4833d70fdb74faa989b7162f50d32e5.png_pic_center]

因为是\_top，所以点击超链接时

![在这里插入图片描述][6fc8c5ae6752432ab92f0c00a508aafc.png_pic_center]

顶部窗口打开

如果是\_self

![在这里插入图片描述][ef6f3dcbbaa04373b3edf30ec4bf8edd.png_pic_center]

没问题

如果用一个ifram 嵌套一个iframe ，看看parent的效果

![在这里插入图片描述][d60606745a51410e83789902d5f5dd38.png_pic_center]

self 效果

![在这里插入图片描述][a58d00f1c5cb4e6ab9aa61abfecd70d7.png_pic_center]

parent 效果】

![在这里插入图片描述][b9510ef790444a4ab5c64982cd55001c.png_pic_center]

top效果

![在这里插入图片描述][957755fd1f3f46cab146b4f11d6d81cb.png_pic_center]

blank 效果

![在这里插入图片描述][3c1c56047ff340409d539cb3099528b4.png_pic_center]

没问题。

[1bfc38d050bd4569a812606ce69f4b6b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/68d89209ab3745168963db812c213eeb.png
[ae25da7788784e71a49037b3ad2ee527.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b768e2c8d2ce4cfbb23f98f7bc6c2190.png
[e4833d70fdb74faa989b7162f50d32e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cfec84d425d04974897bff5d0927ecf4.png
[6fc8c5ae6752432ab92f0c00a508aafc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c533cd3b6d7f49a99d39133b8a4891c4.png
[ef6f3dcbbaa04373b3edf30ec4bf8edd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ad67d94aa07c49a2848495b93bda8f9d.png
[d60606745a51410e83789902d5f5dd38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/094ae5ec58e444b4951c872d5921c753.png
[a58d00f1c5cb4e6ab9aa61abfecd70d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aa731c90aa3541439728677f52b15555.png
[b9510ef790444a4ab5c64982cd55001c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7cd4632cb582456e975fc050291265e1.png
[957755fd1f3f46cab146b4f11d6d81cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f69fccfbc5f343c7bbb79616c8f20392.png
[3c1c56047ff340409d539cb3099528b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bdfe6edca1d945bab7505289f26b0234.png