Web前端——HTML内联框架

一. 内联框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

1. iframe语法

iframe标签可以在html页面上,打开一个小窗口,去加载一个单独的页面

<iframe src="URL">iframe>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe标签.htmltitle>
head>
<body>
    我是一个单独的完整的页面<br/><br>
	<iframe src="0-标签语法.html" width="300" height="400">iframe>
body>
html>

Web前端——HTML内联框架_第1张图片

2. Iframe设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:“80%”)。

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    
    
     <iframe src="https://www.qq.com" width="800" height="600" frameborder="3">		     
     iframe>

body>
html>

结果:
Web前端——HTML内联框架_第2张图片

3. 使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>框架title>
head>

<body>

    <iframe src="https://www.qq.com" name="iframe_a">iframe>
    <p>
        <a href="https://blog.csdn.net/qq_44853882/category_10144385.html" target="iframe_a">RUNOOB.COMa>
    p>body>

html>

注:因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,
所以在点击链接时页面会显示在 iframe框架中。

Web前端——HTML内联框架_第3张图片
Web前端——HTML内联框架_第4张图片

你可能感兴趣的:(Web前端,html)