Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
这是一个导航框架
Home Web Front-end HTML Tutorial Example application of HTML frame tags

Example application of HTML frame tags

巴扎黑
巴扎黑
Jun 07, 2017 pm 04:46 PM

1.The main basic tags in HTML are as follows:

Comment tag;

Paragraph tag

Title tag

, the parameters of this tag are from h1~h6;

Line break tag
or
;

(font) bold label;

(font) italic label;

subscript;

Superscript;

Preformat tag

1

 

Copy after login
;

Address tag

;

Delete tag;

Insert tag

Connection label;

Lower horizontal line label

;

2. The syntax of the connection label: Name

For example, to connect to Baidu homepage:

[html] view plain copy

Baidu

Connect the picture as a button to the specified path, where alt is the name displayed by moving the mouse, and src is the path of the picture:

[html] view plain copy

Baidu

Open the connection in a new browser:

[html] view plain copy

Baidu

Jump to the specified paragraph of the current page:

[ html] view plain copy

Jump

                                                                                       ;a name="a1">Paragraph a1

Paragraph a1

3. Frame structure in HTML

Example 1. Vertical frame structure, the page Divided vertically into three parts.

The directory structure is as shown below:


##f1.html code

1

2

3

4

5

6

7

8

9

10

<!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>

Copy after login

f2.html code

1

2

3

4

5

6

7

8

9

10

<!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>

Copy after login

f3. html codeExample application of HTML frame tags

1

2

3

4

5

6

7

8

9

10

<!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>

Copy after login

frame.html code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!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 > 

    <frame src="f2.html"> 

    <frame src="f3.html"> 

</frameset> 

</html>

Copy after login

Run result chart

Example 2. Hybrid structure frame.

The directory structure is as shown below:

Example application of HTML frame tags

##f1.html code

1

2

3

4

5

6

7

8

9

10

<!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 id="这是一个导航框架">这是一个导航框架</h1> 

</body> 

</html>

Copy after login

f2.html code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!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>

Copy after login

f3. html code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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>

Copy after login
Example application of HTML frame tagsmenu2.html code

1

2

3

4

5

6

7

8

9

10

<!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>

Copy after login

frame.html code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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>

Copy after login

Running result graph

The above is the detailed content of Example application of HTML frame tags. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide
3 weeks ago By DDD
Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
How to fix KB5055612 fails to install in Windows 10?
3 weeks ago By DDD
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Blue Prince: How To Get To The Basement
1 months ago By DDD
Show More

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial
1664
14
CakePHP Tutorial
1423
52
Laravel Tutorial
1318
25
PHP Tutorial
1269
29
C# Tutorial
1248
24
Show More
Related knowledge
Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles