iframe是什么?iframe用法详解

article/2025/9/8 1:52:01

 经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些呢?
 

iframe用法

  iframe是什么

  iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。

  iframe用法详解

  首先需要了解iframe标签的写法,和大多HTML标签写法相同,iframe标签输入形式为:<iframe>和</iframe>。以<iframe>开头,以</iframe>结尾,将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

  iframe标签的属性

  align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。

  frameborder:1、0。用于规定是否显示框架周围的边框。

  height:pixels、%。用于规定iframe的高度。

  longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。

  marginheight:pixels。定义iframe的顶部和底部的边距。 

  marginwidth:pixels。定义iframe的左侧和右侧的边距。 

  name:frame_name。规定iframe的名称。 

  scrolling:yes、no、auto。规定是否在iframe中显示滚动条。
 
  src:URL。规定在iframe中显示的文档的URL。 

  width:pixels。%。定义iframe的宽度。 
 
  iframe用法案例

  例子1。

  <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>

 width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder  边框大小;

 注意:URL建议用绝对路径

 传说中百DU用:<iframe width=0 height=0 frameborder=0 scrolling=auto src=www.zzidc.com></iframe>

  黑了88*8。。。

 例子2。

 如果一个页面里面有框架。。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定)

<iframe name=**  ></iframe>

 然后在修改默认打开模式,:网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为(**)

 例子3。

 要插入一个页面。要求只拿中间一部分。其他的都不要。,。。

 代码:

<iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://host.zzidc.com/"  frameborder=no scrolling=no  width=776  height=2500></iframe>

 控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170

 scrolling滚动条要否(auto、yes、no)   frameborder框架的边框大小,width=776  height=2500此框架的大小。

 一、页面内加入iframe

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,

scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

 二、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://host.zzidc.com></iframe>,然后,网页上的超链接语句应该写为:<a  href=URL target=aa>

 三、如果把frameborder设为1,效果就像文本框一样

 透明的iframe的用法

 必需IE5.5以上版本才支持

 在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种iframe的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:

 <iframe ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></iframe>

 <iframe ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </iframe>

 <iframe ID="Frame3" SRC="transparentBody.htm"></iframe>

 <iframe ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </iframe>


http://chatgpt.dhexx.cn/article/5TapX6vw.shtml

相关文章

MD5加密解密算法 MD5Utils

import java.security.MessageDigest;public class MD5Utils {/*** MD5加码 生成32位md5码 */public static String string2MD5(String inStr) {MessageDigest md5 null;try {md5 MessageDigest.getInstance("MD5");} catch (Exception e) {System.out.printl…

md5 java_JAVA使用MD5加密解密

MD5消息摘要算法(英语:MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于确保信息传输完整一致。 这波解释是不是很正经严肃,好像看懂了,但是如果有人问MD5是什么,MD5就是...就是小编也不知道,通俗一…

Md5(base64)加密与解密实战

Md5&#xff08;base64&#xff09;加密与解密实战 在对某一个CMS系统进行安全检测时&#xff0c;通过注入点获取其管理员表中的管理员和密码数据&#xff0c;但由于不知道该密码数据采用何种加密方式&#xff0c;虽然知道CMS系统管理后台&#xff0c;但苦于没有破解管理员的密…

css下拉菜单汇总案例

1.基础的下拉菜单 将鼠标移到元素上时出现的下拉框。效果如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"I…

html下拉折叠菜单,纯CSS实现折叠菜单下拉菜单

莱芜网站排名的大宝给大家介绍一种纯CSS实现下拉菜单、纯CSS实现折叠菜单的方法&#xff0c;直接上代码&#xff1a;html> .renyuan {display: none;} .bm:hover .renyuan {display: block;} .bmt{background-color: aquamarine;} 部门1 人员1 人员2 人员3 部门1 人员1 人员…

CSS+JavaScript下拉菜单布局与代码执行

导读&#xff1a;今天来通过一个安居客web下拉菜单来总结一下怎么用css布局以及通过js切换css效果 头部的布局以及下拉菜单布局 实现代码&#xff1a; <html> <body><div class"box"><ul class"body"><li><a href"…

CSS实现的大型导航下拉菜单

阅读目录 阐述HTML结构CSS 预览 阐述 这是一款纯 CSS 实现的大型导航下拉菜单。 该大型菜单使用 HTML 和纯 CSS 代码制作&#xff0c;没有任何 js 代码&#xff0c;不依赖任意第三方插件。 适合用于栏目分类较多的大型网站使用。 HTML结构 该大型菜单的HTML结构如下&#x…

零基础CSS入门教程(29)–CSS下拉菜单实例

点此查看 所有教程、项目、源码导航 本文目录 1. 前言2. 开发过程2.1 HTML元素组成2.2 设定按钮样式2.3 设置菜单区域样式 2.4 设置菜单中链接样式2.5 设置下拉菜单样式 3. 小结 1. 前言 下拉菜单也是使用频率很高的网页控件&#xff0c;例如百度首页上方的【设置】按钮就是一…

css下拉菜单代码(用纯css实现下拉菜单)

用纯css代码写一个css下拉菜单&#xff0c;二级菜单opacity默认是0&#xff0c;鼠标在一级菜单hover时opacity就是1&#xff0c;opacity从0到1有一个transition过渡时间1秒钟&#xff0c;就实现了css下拉菜单动画缓慢出现效果&#xff0c;具体看下面例子代码。 css下拉菜单代码…

html用css做下拉菜单,纯css实现下拉菜单

纯css实现下拉菜单 1、效果如下&#xff1a; 2、html代码 时间最近 时间最近评论最多被赞最多 3、css代码 * { margin: 0; padding: 0; } ul { list-style: none; } .drop-box { box-sizing: border-box; width: 150px; font-size: 14px; text-align: center; border-radius: 1…

CSS下拉菜单

共有三种可悬停的下拉内容&#xff1a;下拉文本&#xff0c;下拉菜单&#xff0c;下拉式图像 一.下拉文本 当用户鼠标悬停到指定文本时&#xff0c;会出现的文本下拉框&#xff0c;下面是效果图&#xff1a; HTML <body><div class"wai"><span>把…

纯css 下拉选择,纯CSS实现的下拉菜单

实现效果 实现代码 html homewordpress themespluginstutorialsweb design resourceslinkstutorials html/cssjqueryother stuffthingsother stuffgraphic designinspirationcontactabout pure css drop down menu a simple dropdown navigation menu made with css only. drop…

CSS 下拉菜单

使用 CSS 创建可悬停的下拉列表。 1. 基础的下拉菜单 创建当用户将鼠标移到元素上时出现的下拉框。 代码如下&#xff1a; <!DOCTYPE html> <html> <head> <style> .dropdown {position: relative;display: inline-block; }.dropdown-content {dis…

html css下拉菜单居中,css如何设置下拉菜单?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版…

CSS 如何制作下拉菜单

下拉菜单 .dropdown 类使用 position:relative&#xff0c;当我们希望将下拉内容放置在下拉按钮的正下方&#xff08;使用 position:absolute&#xff09;时&#xff0c;需要使用该类。 .dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的&#xff0c;并将在悬…

Oracle Flex ASM

Oracle Flex ASM 允许 Oracle ASM 实例运行在与数据库服务器分离的物理服务器上。通过这种部署&#xff0c;更大的 Oracle ASM 实例集群可以支持更多的数据库客户端&#xff0c;同时减少整个系统的 Oracle ASM占用空间。当使用 Oracle Flex ASM 时&#xff0c;Oracle ASM 客户端…

从AssemblyInfo.cs里获得信息

AssemblyInfo.cs文件代码片段: [assembly: AssemblyTitle( "" )][assembly: AssemblyDescription( "" )][assembly: AssemblyConfiguration( "" )][assembly: AssemblyCompany( "" )][assembly: AssemblyProduct( " 飞鼠工作室 &…

.NET Assembly

Load GAC Assembly class Program ... { static void Main(string[] args) ...{ // 动态引用GAC的Assembly Assembly assembly Assembly.Load("GACDemo,Version1.0.0.0,Cultureneutral,PublicKeyTokenb821349f6886a4a6"); …

VS 创建assemblyinfo项目信息文件

1、先右键项目名称,点击“属性” 2、点击“程序集信息” 3、修改 4、生成GUID AssemblyInfo.cs主要用来设定生成的有关程序集的常规信息dll文件的一些参数请看以下具体说明://备注: [assembly:Assembly

C# 获取应用程序exe的AssemblyInfo.cs文件信息

通过 FileVersionInfo类获取应用程序AssemblyInfo的信息。 比如想获取文件说明//strPath是exe的完整路径 string strFileDescription FileVersionInfo.GetVersionInfo(strPath).FileDescription;