HTML学习笔记_框架

学习前端知识的同时，梳理知识，也便于以后查找
tags:iframe

HTML框架

注意：各种情况下iframe标签都是需要闭合的

<iframe>标签规定一个内联框架。

• 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
• 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

语法

<iframe src="URL"></iframe>

• 该URL指向不同的网页。将窗口内容显示为URL地址指向页面。
• 会在屏幕左上角绘制一块矩形区域。

设置高度与宽度

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

<iframe src="demo_iframe.html" width="200" height="200"></iframe>

移除边框

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

• 设置属性值为 “0” 移除iframe的边框
• 如果浏览器不支持，会显示<iframe></iframe>里的内容

<iframe src="/https://www.zhihu.com/search?type=content&q=SQL%E5%AD%A6%E4%B9%A0/" width="200" height="200" frameborder="0">
<!-- 如果浏览器不支持会显示下面的内容 -->
 <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

使用iframe来显示目录链接页面

将目标链接的属性使用iframe的属性

<iframe src="/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.bilibili.com/" target="iframe_a">bilibili</a></p>

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

iframe 标准属性

属性说明	规定元素的类名（classname）
id	规定元素的唯一 id
style	规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示中显示）

HTML框架更多

1. W3C教程
2. 菜鸟教程

–END–