HTML基础(四)

框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签(<frameset>)

框架结构标签(<frameset>)定义如何将窗口分割为框架

  • 每个 frameset 定义了一系列行
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签(Frame)

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

在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档
"frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame>
标签中加入:noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示:不能将 <body></body> 标签与
<frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes>
标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)

简单的框架嵌套:三个框架都可拖动边框修改大小

<html>
<frameset rows="50%,50%">
	<frame src="1.html">
	<frameset cols="25%,75%">
		<frame src="2.html">
		<frame src="3.html">
	</frameset>	

</frameset>
</html>
<html>

<frameset cols="50%,*,25%">
   <!-- 加入noresize后标记的框架无法拖动边框来修改大小 -->
  <frame src="1.html" noresize="noresize" />
  <frame src="2.html" />
  <frame src="3.html" />
</frameset>

</html>

内联框架

添加 iframe 的语法

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

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框:

使用 iframe 作为链接的目标

iframe 可用作链接的目标(target)。

链接的 target 属性必须引用 iframe 的 name 属性:

<html>
<body>
<!-- 设置内联框架的指向为1.html 名字是test -->
<iframe src="1.html" name="test"></iframe>
<!-- 添加的链接名称为Baidu,链接内联网页test,地址为Baidu网址 ,
点击后在内联框架中跳至Baidu -->
<p><a href="http://www.baidu.com" target="test">Baidu</a></p>

<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>

</body>
</html>

背景(Backgrounds)

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色(Bgcolor)

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

背景(Background)

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。

提示:如果你打算使用背景图片,你需要紧记一下几点:

  • 背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
  • 背景图像是否与页面中的其他图象搭配良好。
  • 背景图像是否与页面中的文字颜色搭配良好。
  • 图像在页面中平铺后,看上去还可以吗?
  • 对文字的注意力被背景图像喧宾夺主了吗?

基本的注意事项 - 有用的提示:

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和
XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

颜色由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

颜色名

大多数的浏览器都支持颜色名集合。

提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, yellow。

如果需要使用其它的颜色,需要使用十六进制的颜色值。

时间: 2024-10-04 07:57:09

HTML基础(四)的相关文章

JS基础四

1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 3.把对象的所有引用都设置为 null,可以强制性地废除对象.object  设置为null, 4.本地对象(native object) Object Function Array String Boolean Numb

Java基础四

Java基础四 一.Switch语句 二.if和switch区别 推荐使用if 三.函数 Java中的函数和方法是同一个词 四.数组 4.1.数组常见错误 五.内存机制 六.转换成十六进制 移位 &操作 6.2 查表法求十六进制 查表法很多时候都非常好用,这样就非常好了,真的非常好用 算的时候直接移四位,我喜欢,我觉得以后可以多做移位运算,真的是简单方便 6.3 查表法求星期几

C# Socket基础(四)之客户端向服务器发消息

private Socket socketClient;//客户端套接字,关于实例化请参考C# Socket基础(三)之客户端连接服务器和接收消息 客户端发送消息 1 /// <summary> 2 /// 发送数据到服务端 3 /// </summary> 4 private void Send() 5 { 6 if (socketClient == null) 7 { 8 9 ShowMsg("服务器未启动!"); 10 return; 11 } 12 by

Python全栈开发【基础四】

Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 匿名函数 lambda表达式:对于简单的函数,存在一种简便的表示方式,即lambda表达式 1 #这段代码 2 def calc(n): 3 return n**n 4 print(calc(10)) 5 6 #换成匿名函数 7 calc = lambda n:n**n 8 print(calc(10)) 匿名函数主要是和其它函数搭配使用 举例: 1 ########

Object Pascal 语法之语言基础(四)

1.8 过程与函数 过程与函数是实现一定功能的语句块,是程序中的特定功能单元.可以在程序的其他地方被调用,也可以进行递归调用.过程与函数的区别在于过程没有返回值,而函数有返回值. 1.过程与函数的定义过程与函数的定义包括过程原型或函数原型.过程体或函数体的定义.过程定义的形式如下: procedure ProcedureName(ParameterList); directives; var LocalDeclarations; begin statements end; ProcedureNa

将 Shiro 作为应用的权限基础 四:shiro的配置说明

Apache Shiro的配置主要分为四部分: SecurityManager的配置 URL过滤器的配置 静态用户配置 静态角色配置 其中,由于用户.角色一般由后台进行操作的动态数据,比如通过@RequiresRoles注解控制某方法的访问,因此Shiro配置一般仅包含前两项的配置. SecurityManager的配置:  [html] view plaincopy <span style="font-size:18px"><!--shiro securityMan

写给自己看的Linux运维基础(四) - python环境

pip - Python包管理工具 https://pip.pypa.io/en/latest/installing.html wget https://bootstrap.pypa.io/get-pip.py python get-pip.py Redis (NoSQL) http://www.redis.io/download wget http://download.redis.io/releases/redis-2.8.13.tar.gz tar xzf redis-2.8.13.tar

python之深浅拷贝(基础四)

第六章python之深浅拷贝(基础四) 6.1 小数据池 小数据池就是Python中一种提高效率的方式,固定数据类型使用同一个内存地址 小数池 -- 支持: str,int,bool a = 1 b = 1 id 查看空间的内存地址 获取开辟空间的一种地址 print(id(a)) print(id(b)) 小数据池数字支持范围: -5 ~ 256 *记住 a = 300 b = 300 print(id(a)) print(id(b)) 代码块: 一个文件,一个模块,一个函数,一个类,终端中每

python学习笔记(基础四:模块初识、pyc和PyCodeObject是什么)

一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sys.argv) #打印相对路径,在pycharm输出结果是绝对路径,因为在pycharm中调用 print(sys.argv[2]) #可以从数据列表中取值,[2]指取第三位.        标准库存放位置:C:\Python35\Lib 第三方库存放位置C:\Python35\Lib\site-p

Python基础(四) 基础拾遗、数据类型进阶

一.基础拾遗 (一).变量作用域 外层变量,可以被内层变量直接调用:内层变量,无法被外层变量使用.这种说法在其它语言中适用,在python中除了栈以外,正常的变量作用域,只要执行声明并在内存中存在,该变量就可以在下面的代码中使用. (二).位运算符.三元运算 1,位运算符,请看下面代码 1 128 64 32 16 8 4 2 1 2 0 0 0 0 0 0 0 0 3 4 5 #!/usr/bin/env python 6 7 a=60 #00111100 (将十进制转换成二进制,进行位运算)