天天看點

HTML|iframe内聯架構

HTML|iframe内聯架構

1.iframe标簽

src屬性為引用頁面的位址

我們在iframe标簽中将src屬性填寫為淘寶網的網址:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内斂架構</title>
</head>
<body>

<iframe src="https://www.taobao.com/"></iframe>

</body>
</html>      
HTML|iframe内聯架構

我們可以看到,在這個網頁中就嵌入了淘寶網站,但是它的大小不太合适,我們可以用width和height屬性對其進行調整:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内斂架構</title>
</head>
<body>

<!--
iframe标簽:
src是位址
-->
<iframe src="https://www.taobao.com/" width="1200" height="600"></iframe>

</body>
</html>      
HTML|iframe内聯架構

2.name屬性

我們可以把iframe标簽添加一個name屬性:

<iframe src="https://www.taobao.com" name="My_csdn" width="1200" height="600"></iframe>      

這裡應該能猜到我要做什麼了,我再添加一個a标簽,将其href屬性設定為我的部落格網址,target設定為這個内置闆塊的name:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内斂架構</title>
</head>
<body>

<!--
iframe标簽:
src是位址
-->
<iframe src="https://www.taobao.com" name="My_csdn" width="1200" height="600"></iframe>

<!--
a标簽将target設定為内聯闆塊的name就可以使用a标簽将淘寶切換為我的部落格
-->
<a href="target="My_csdn">前往我的部落格</a>

</body>
</html>      

打開網頁可以看到再内聯網頁的下方多了我們寫上的a标簽:

HTML|iframe内聯架構

點選:

HTML|iframe内聯架構

繼續閱讀