ホームページ > 記事 > ウェブフロントエンド > HTMLフレームタグの適用例

HTMLフレームタグの適用例

巴扎黑オリジナル: 2017-06-07 16:46:252344ブラウズ

1. HTML の主な基本タグは次のとおりです:

コメントタグ ;

タイトルタグ

h1>、このタグのパラメータは h1~h6;

改行タグ
または
;

(font)太字タグ;

(font)イタリックタグ;

下付き文字;

フォーマット済みタグ

; アドレスラベル<address></address>;<p></p>ラベルを削除<del></del>;<p></p>ラベルを挿入<ins></ins>;<p></p>接続ラベル<a></a> ; <p></p> 下の水平線ラベル <hr>; <p></p>2. 接続ラベルの構文: <a href="%E6%8E%A5%E7%B6%9A%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9">名前</a><p></p> たとえば、Baidu ホームページに接続するには: html] プレーンコピーを表示<p></p><a href="http://www.baidu.cn">Baidu</a> <p></p>画像をボタンとして指定されたパスに接続します。ここで、alt は、によって表示される名前です。マウスを動かすと、src が画像のパスになります: <p></p>[html] プレーンコピーを表示<p></p><a href="http://www.baidu.cn" alt="Baidu" src="smile.png"> <p></p> </a> <p></p>新しいブラウザで接続を開きます: <p></p>[html] プレーンコピーを表示します<p></p><a href="http://www.baidu.cn%20" target="_blank">Baidu <p></p> </a> <p></p>現在のページの指定された段落にジャンプします: <p></p>[html] プレーンコピーを表示<p></p> <p></p> <a href="#a3"> ジャンプ</a> <p></p> <a name="a1">段落 a1&lt ;/a & gt; <p></p> & lt;/p & gt; .html フレーム構造<p></p> 例1. 縦フレーム構造。ページを縦に3つの部分に分割します。 <p></p>ディレクトリ構造は図に示すとおりです: <p></p>
<p></p>
<p>f1.html コード </p><pre class="brush:html;toolbar:false"><!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>

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>

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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML の最小高さの使用法の概要次の記事：HTML の最小高さの使用法の概要

関連記事

続きを見る