웹 프론트엔드 HTML 튜토리얼 Frameset使用教程 小结 - 这个冬天有点冷

Frameset使用教程 小结 - 这个冬天有点冷

May 22, 2016 pm 05:19 PM

frame,是网页开发必须掌握的知识。例如后台架构、局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受。
frame知识点包括(frameset标签、frame标签、iframe标签)。下面就对其一一介绍。
 
一、frameset

1. 属性

①border

设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种:“30%、30(或者30px)、*”;数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框 架区域占全部浏览器页面区域的30%;“30”表示该区域横向宽度为30像素;“*”表示该区域占用余下页面空间。例 如:cols="25%,200,*" 表示将页面分为三部分,左面部分占页面30%,中间横向宽度为200像素,页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。

2. 用例

注意1:
cols与rows两属性尽量不要同在一个标签中使用。若要实现下图架构,代码正确写法为:
Frameset使用教程
 
 
   
   
【即,若想即使用cols又使用rows,可利用frameset嵌套实现】
注意2:
意思是:第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
意思是:浏览器窗口等分为四部分。
 
二、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
2. 用例
 
三、iframe
是浮动的框架(frame),其常用属性与frame类似,其他的主要有以下(相同的就不列举了)
1. 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。
2. 用例
注意:
iframe标签与frameset、frame标签的验证方法不同,是XHTML 1.0 Transitional。且iframe是放在body标签之内,而frameset、frame是放在body标签之外。
 
四、综合示例
综合示例

对不起,您的浏览器不支持“框架”!

【说明】
标志对也是放在标志对之间,用来在那些不支持框架的浏览器中显示文本或图像信息。在此标志对之间先紧跟标志对,然后才可以使用我们熟悉的任何标志。
 
 
最后需要说明一点:
如果将代码按照我以上所写写到VS中报错的话,例如:
Frameset使用教程
或者
Frameset使用教程
解决方法如下:
工具→选项→文本编辑器→HTML→验证→Internet Explorer 6.0
 
好了,通过以上内容,大家再多加练习,就会慢慢熟悉frame的相关知识了,用好了的话你会发现真的挺好。至于frame系列标签的事件方法,一般用的不是非常多,需要的话,大家自己再查吧。【呵呵,其实本人还没有用到过】
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

& lt; Progress & Gt의 목적은 무엇입니까? 요소?

See all articles