ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLフレームタグの適用例
HTMLフレームタグの適用例
- 巴扎黑オリジナル
- 2017-06-07 16:46:252385ブラウズ
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< ;/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 .ハイブリッド構造フレーム。
ディレクトリ構造は図に示すとおりです。
<!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>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 の最小高さの使用法の概要