1.10 HTML框架结构_HTML视频教程

- 灬无言 - 阅 3,066

说在前面,这个已经是没人用的了,尤其是知道些SEO的。放上来,只为纪念。

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

1.10.1 框架基本概念

框架是浏览器窗口中的一个区域,通过使用它,可在同一浏览器显示不止一个页面。

框架一般由框架集和框架组成。

框架集包括了所有的框架,是框架的集合。

框架是框架集中一个独立的区域,用于显示一个独立的网页文档。

1.10.2 框架集标签

语法:<frameset></frameset>

注:Frameset元素是Frame元素的容器,html文档可包含frameset元素或body元素之一,而不能同时包含两者。但可以在<noframe></noframe>标签中加入<body></body>标签。

<frameset>属性如下几点:

  • 水平分割窗口 <frameset rows=”框架高度,框架高度,….”>

高度单位:PX或者百分比

例:

<frameset       rows=”100%,100%”>

<frame src=”1.html” name=”frame1″ />

<frame src=”2.html” name=”frame2″/>

</frameset>

  • 垂直分割窗口 <frameset cols=”框架宽度,框架宽度,….”>

例:

<frameset       cols=”100%,100%”>

<frame src=”1.html” name=”frame1″ />

<frame src=”2.html” name=”frame2″/>

</frameset>

  • 嵌套分割

第一个frameset对整体分割

第二个frame对第一次水平分割的下(右)部继续分割

当然如果继续嵌套分割原理也是一样的。

例:

<frameset rows=”100%,100%”>

<frame src=”1.html” name=”1″ />

<frameset cols=”100%,100%”>

<frame src=”表格.html” name=”2″/>

<frame src=”表单.html” name=”3″/>

</frameset>

</frameset>

  • 框架边框 <frameset frameborder=”是否显示”>

值:yes,no,或者1和0。1和yes显示,no或0不表示。

例:

<frameset frameborder=”yes”        rows=”100%,100%”>

<frame src=”1.html” name=”1″ />

</frameset>

  • 框架边框宽度 <frameset framespacing=”边框宽度”>

宽度单位:PX。默认为1,只对框架集有效,对单个框架无效。

火狐和谷歌不支持,IE8支持。

例:

<frameset frameborder=”yes” framespacing=”2px”      rows=”100%,100%”>

<frame src=”1.html” name=”1″ />

</frameset>

  • 框架边框颜色 <frameset bordercolor=”颜色”>

例:<frameset bordercolor=”red” rows=”100%,100%”>

<frame src=”1.html” name=”1″ />

</frameset>

1.10.3 窗口

语法:<frame />

Frame属性如下几点:

  • HTML文件地址:src

例:

<frame src=”1.html” name=”1″ />

  • HTML文件名称:name

便于页面查找提供的属性,只能是单词字母组合。

例:

         <frame src=”1.html” name=”1″ />

  • 禁止调整窗口尺寸:noresize

设置该属性后,将无法通过拖拽实现调整窗口效果。

例:

         <frame src=”1.html” name=”1″ noresize />

  • 边框与页面内容水平边距:marginwidth

例:

         <frame src=”1.html” name=”1″  marginwidth=”100” />

  • 边框与页面内容垂直边距:marginheight

例:

         <frame src=”1.html” name=”1″  marginheight=”100” />

  • 控制框架滚动条显示:scrolling

Scrolling三种取值:yes  no  auto。

Yes 一直显示滚动条;

No 无论什么时候都不会显示滚动条;

Auto 根据具体内容,当超出浏览器窗口范围,自动显示(系统默认)

IE8支持的,但是其他的可能支持性不好。

例:

<frame src=”1.html” name=”1″  scrolling=”no” />

  • 不支持框架:noframes

如果遇到不支持框架结构的浏览器,或者用户关闭了浏览器的框架显示功能,此时就需要用<noframes>来设置替换的内容,告诉读者浏览器无法打开框架页面。

例:

<noframes>对不起,您的浏览器不支持框架效果!</noframes>

1.10.4 浮动框架

语法:<iframe></iframe>

浮动框架<iframe>标签,它是一种特殊的框架,整个页面并不一定是框架页面,但要包含一个框架窗口(frameset则整个页面都是框架,不能有body前面已经介绍过了。 )。<iframe>可以放在页面的任何位置。

语法上也不同,iframe是双标签,而frame是单标签。

浮动框架<iframe>属性如下:

  • 页面源文件:src

例:

<iframe src=”1.html” ></iframe>

  • 浮动框架宽度:width

例:

<iframe src=”1.html” width=”100” ></iframe>(宽高单位均为PX)

  • 浮动框架高度:height

例:

<iframe src=”1.html” height=”100” ></iframe>(宽高单位均为PX)

  • 浮动框架对齐方式:align

两种方式:left、right即左、右。默认left。

例:

<iframe src=”1.html” align=”left” ></iframe>

  • 浮动框架滚动条显示属性:scrolling

三种方式:auto、yes、no,即自动显示、一直显示、不显示

例:

<iframe src=”1.html” scrolling=”yes” ></iframe>

1.10.5 创建框架链接

框架链接之间是通过target相互链接起来的,其中应用最广泛的就是导航。

普通框架链接步骤

  1. 创建框架链接页面,这里命名为:frame链接演示页.html

这里呢,footer.html 可以是任何一个详细页,也可不填,等于顶部空白。

注意:footer.html和top.html不能相同,导航页target需链接到footer名。

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>框架链接演示</title>

</head>

<frameset rows=”200,*” frameborder=”1″>

<frame src=”top.html” name=”top”> 这两个name不能一样

<frame src=”footer.html” name=”footer”>

</frameset>

</html>

  1. 创建导航页,这里命名为:html

代码如下:

<!DOCTYPE html>

<html>

<head><title>top</title></head>

<body>

<table align=”center”>

<tr>

<td width=”100″ height=”200″><a  href=”新闻.html” target=”footer” >新闻</a><td>

<td width=”100″><a  href=”图片.html” target=”footer” >图片</a><td>target为footer

<td  width=”100″><a href=”贴吧.html” target=”footer”>贴吧</a><td>

</tr>

</table>

</body>

</html>

  1. 创建几个底部详细页,这里命名为:新闻.html 图片.html 贴吧.html

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>top</title>

</head>

<body>

新闻

</body>

</html>

浮动框架链接步骤

  1. 创建框架链接页面,这里命名为:浮动框架链接演示.html

代码如下:

<!DOCTYPE html>

<html>

<head>              <title>浮动框架链接演示</title>        </head>

<iframe src=”浮动框架.html” name=”fudong”></iframe>

<body><br/><br/>

<table>

<tr>

<td width=”100″><a href=”浮动框架1.html” target=”fudong”>浮动框架1</a></td>

<td width=”100″><a href=”浮动框架2.html” target=”fudong”>浮动框架2</a></td>

<td width=”100″><a href=”浮动框架3.html” target=”fudong”>浮动框架3</a></td>

</tr>

</table>

</body>

</html>

  1. 创建浮动框架链接页面,这里命名为:浮动框架html

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>浮动框架链接演示</title>

</head>

<body>

浮动框架1

</body>

</html>

以上就是小小课堂SEO自学网带来的《1.10 HTML框架结构_HTML视频教程》。感谢您的观看。SEO培训认准小小课堂!

非特殊说明,本文为小小课堂SEO自学网原创,欢迎转载并保留版权 https://www.xxkt.org/

本站提供SEO培训、咨询、诊断,微信(电话):13722793092 微信公众号:xxktorg

            

一条回应:“1.10 HTML框架结构_HTML视频教程”

  1. 马慧SEO说道:

    小小课堂SEO自学网(https://www.xxkt.org/ ),全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章!