简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTMLフレームタグの適用例

巴扎黑
リリース： 2017-06-07 16:46:25
オリジナル
2263 人が閲覧しました

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

関連ラベル：
HTML，框架标签，实例应用
ソース：php.cn
前の記事：HTML の最小高さの使用法の概要 次の記事：HTMLフレームタグの役割のまとめ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
手動または .js/js フレームワークを使用せずに、テキストを新しい要素に自動的にラップする方法 私がやりたいことは、Photoshop/Illustrator/その他のソフトウェアのテキストボックスの折り返しに似ており、段落を書くことができますが、「オーバーフロー」した場合は...
から 2023-09-14 13:44:44
0
2
291
同じプロパティのセットを適用したときに、結果として得られる (html/css コードの実行後の) div と label のボックス サイズが異なるのはなぜですか? div,a{高さ:100px;幅:200px;境界線:5pxsolidblack;マージン:15px;}<div>このisadivタグ</div><a...
から 2023-09-12 18:39:31
0
1
182
Google 検索結果にウェブサイトを表示する 最近、地元のレストラン用の Web サイトを開発して展開しました。 HTML、CSS、JS、および Flask マイクロフレームワークを使用しました。ドメイン名は GoDaddy ...
から 2023-08-14 18:40:10
0
1
190
2018 年 9 月 20 日の教育コースのプレビュー: ブートストラップ フレームワークの基礎と実践 1. 指導トピック: ブートストラップ フレームワークの基本と実践 ブートストラップは、最も人気のある HTML、CSS、および JS フレームワークであり、応答性の高いレイアウト...
から 2018-09-20 10:43:11
0
0
1104
ローカルの win7 TP5 は Redis を使用して同時処理を実装しますか? 初心者で購入機能を作っているのですが、商品が1個しか残っていないのに2人同時に購入した場合はどうすればよいでしょうか？ TP5 フレームワークを使用して Redis について数時間...
から 2018-03-14 18:34:12
0
4
1275
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！