집 > 기사 > 웹 프론트엔드 > HTML 프레임 태그 적용 예시

HTML 프레임 태그 적용 예시

巴扎黑원래의: 2017-06-07 16:46:252303검색

1. HTML의 주요 기본 태그는 다음과 같습니다.

댓글 태그 ;

단락 태그

; h1>, 이 태그의 매개변수는 h1~h6;

줄 바꿈 태그
또는
;

(font) 굵은 태그;

(font )입니다. 기울임꼴 태그;

위첨자; 주소 라벨

;

라벨 제거;

라벨 삽입;

연결 라벨 ;

하단 가로선 라벨

;

2. 연결 라벨 구문: 이름

예를 들어 Baidu 홈페이지에 연결하려면:

[html] 일반 사본 보기

이미지를 지정된 경로에 버튼으로 연결합니다. 여기서 alt는 표시되는 이름입니다. 마우스를 움직이면 src는 이미지의 경로입니다:

[html] view plain copy

src="smile.png">

새 브라우저에서 연결 열기:

[html] 일반 사본 보기

현재 페이지의 지정된 단락으로 이동:

[html] 일반 사본 보기

> HTML 프레임 구조

예시 1. 세로 프레임 구조, 페이지를 세로로 세 부분으로 나눕니다.

디렉토리 구조는 그림과 같습니다.

f1.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    最左边框架  
</body>  
</html>

f2.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    中间框架  
</body>  
</html>

f3.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    最右边框架  
</body>  
</html>

frame.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>框架结构</title>  
<!-- 框架结构，frameset不需要写在body里面 -->  
</head>  
<!-- 垂直结构框架用cols，水平框架用rows -->  
<frameset cols="30%,40%,30%">  
    <frame src="f1.html">  
    <frame src="f2.html">  
    <frame src="f3.html">  
</frameset>  
</html>

실행 결과 다이어그램

예 2 .하이브리드 구조 프레임.

디렉토리 구조는 그림과 같습니다:

f1.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <h1>这是一个导航框架</h1>  
</body>  
</html>

f2.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <p>菜单</p>  
    <!-- 单击菜单一跳转到menu1.html页面，并将该页面在menu框架里面打开 -->  
    <p>  
        <a href="menu1.html" target="menu">菜单一</a>  
    </p>  
    <p>  
        <a href="menu2.html" target="menu">菜单二</a>  
    </p>  
</body>  
</html>

HTML 프레임 태그 적용 예시

f3.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    菜单内容  
</body>  
</html>  
menu1.html代码
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    我是菜单一的内容  
</body>  
</html>

menu2.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    我是菜单二的内容  
</body>  
</html>

frame.html 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>混合框架结构</title>  
</head>  
<!-- 最开始为水平框架 -->  
<frameset rows="20%,*">  
    <!-- 水平框架里面最开始是一个frame和另一个垂直框架 -->  
    <!-- noresize="noresize"属性限制框架大小，设置为固定值 -->  
    <frame src="f1.html" noresize="noresize">  
    <frameset cols="20%,*">  
        <!-- 垂直框架里面有两个frame -->  
        <!-- 该框架为菜单，单击内容可以跳转页面 -->  
        <frame src="f2.html" noresize="noresize">  
        <!-- 将该框架命名为menu -->  
        <frame src="f3.html" noresize="noresize" name="menu">  
    </frameset>  
</frameset>  
  
</body>  
</html>

실행 결과 차트

위 내용은 HTML 프레임 태그 적용 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：HTML 최소 높이 사용법 요약다음 기사：HTML 최소 높이 사용법 요약

관련 기사

더보기