Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

Example application of HTML frame tags

巴扎黑

Release： 2017-06-07 16:46:25

Original

2344 people have browsed it

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

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

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

Open the connection in a new browser:

[html] view plain copy

Jump to the specified paragraph of the current page:

[ html] view plain copy

;a name="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

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

<!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 code Example application of HTML frame tags

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

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

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

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

Copy after login

f2.html code

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

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

menu2.html code

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

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

Related labels：

HTML，框架标签，实例应用

source：php.cn

Previous article：HTML min-height usage summary Next article：Summary of the role of HTML frame tags

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

Latest Articles by Author

How to add elements to php array

2023-03-14 15:58:02
Example showing JS implementing a simple multiple-choice assessment system

1970-01-01 08:00:00
PHP solution to restrict multiple submissions of the same IP

2023-03-15 07:38:01
Using regular expressions to implement form validation in HTML

1970-01-01 08:00:00
Detailed explanation of this pointing issue in JavaScript strict mode

1970-01-01 08:00:00
Example code for building a tree menu (including multi-level menu) in Java

1970-01-01 08:00:00
Detailed explanation of examples of CSS3 implementing smooth transition when hover leaves

1970-01-01 08:00:00
Swiper carousel image source code sharing analysis

1970-01-01 08:00:00
Summarize and organize VsCode plug-ins

1970-01-01 08:00:00
HttpUtils request tool class code

1970-01-01 08:00:00

Latest Issues

How can I give my box a different color in html? PS I've updated the post to be more clear! How to specify different colors for boxes in ht...

From 2024-04-02 23:21:49

0

1

302

How to make an image appear in the center of the header? First of all, my code is based on 3 files, an HTML, a CSS and a JS. It should be noted tha...

From 2024-04-01 23:49:58

0

1

372

Embedding HTML generated by an R function I want to dynamically build html and render that html in quarto. The actual application in...

From 2024-04-01 20:51:51

0

1

367

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！