iframe框架实例_框架和实体字符

框架和实体字符

1. frameset框架集

frameset标签可定义一个框架集,在同一个浏览器窗口中被用来组织多个窗口(框架),每个窗口(框架)存有独立的HTML文档。在使用frameset时,不可以同时存在body标签,它和body标签是同级的

在HTML5当中,为了推进新的web前端开发模式,frameset布局将不再被推荐,但是使用它做为企业后台界面开发的还是非常多。

框架结构标签(<frameset>)

  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/cols的值规定了每行或每列占据屏幕的面积

1.1 框架标签(frame)

frame 标签定义了放置在每个框架中的 HTML 文档。

noresize="noresize" 规定无法调整框架的大小。

frameborder="no/yes" 规定是否显示框架周围的边框,同时属性值采用0和1也可以。

scrolling="no/yes" 规定是否在框架中显示滚动条,作用于frame。

实例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<frameset cols="30%, *, 30%" noresize="noresize" frameborder="no">
    <frame scrolling="no" src="index1.html"/>
    <frame src="index2.html"/>
    <frame src="index3.html"/>
</frameset>
</html>

15c1a62f1f54911c7bdda318b3aa61dc.png

实例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<frameset rows="30%, *, 30%" noresize="noresize" frameborder="no">
    <frame src="index1.html"/>
    <frame src="index2.html"/>
    <frame src="index3.html"/>
</frameset>
</html>

a7261aa366a5789e292596d560b84ec3.png

实例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<frameset rows="20%, *, 20%" noresize="noresize" frameborder="no">
    <frame src="index1.html"/>
    <frameset cols="20%, * , 20%">
        <frame src="index2.html"/>
        <frame src="index3.html"/>
        <frame src="index4.html"/>
    </frameset>
    <frame src="index5.html"/>
</frameset>
</html>

8856456096fd1260528c3e78469236e2.png

2. 内联框架

iframe 元素会创建包含另外一个文档的内联框架(即行内框架),用于一个网页中局域显示另外网页。
iframe是属于内联框架,它是body的子级,和body是父子关系。
iframe作为一个普通元素放在body里,而frameset是代替了body元素。scrolling="yes/no" 规定是否在框架中显示滚动条。

<iframe>标签属性:

1、width 可设置内联框架的宽

2、height 可设置内联框架的高

3、name 设置框架名称

4、src 设置页面的路径

<iframe src="http://www.baidu.com" width="300px" height="300px"></iframe>

3. 字符实体

HTML 中的预留字符必须被替换为字符实体,在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

b7445659336c969ea8db78ada663893b.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值