HTML 基本チュートリアルのハイパーリンク
ハイパーリンクは Web サイトのいたるところに表示されます。Baidu News を開いて任意の段落をクリックすると、ニュースの詳細ページが開きます。
次に、ハイパーリンクについて詳しく説明します
。
ハイパーリンク
文法形式:
<a 属性 = "value">...</a>注: <a> ; を含めることはできません。それ;a> タグ
共通属性
- href: ターゲット ファイルのアドレス URL は相対アドレスまたは絶対アドレスです。
- target: ターゲットファイルの表示ウィンドウ。
- _blank: 対象ファイルを新しいウィンドウで開きます。
- _self: 現在のウィンドウでターゲット ファイルを開きます (デフォルトで開きます)。「置換」操作と同等です。
- _parent: 親ウィンドウで対象ファイルを開きます。
- _top: トップレベルウィンドウでターゲットファイルを開きます。
- name: アンカーリンクの名前を定義します。
1. 絶対アドレスURL
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="http://www.php.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> </body> </html>
注: ローカルでテストしてください
(1) 現在のファイルとターゲットファイルは同レベルの関係にあり、リンクアドレスはターゲットファイル名を直接書き込みます。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="http://www.php.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> <a href="file:///D:/image.html" target="_blank">点击查看图片</a> </body> </html>
(2) 現在のファイルと対象ファイルが存在するフォルダーが同階層の関係にある場合、まず「フォルダー名」を調べ、次に「ファイル名」を調べます。
つまり、対象ファイルは次のレベルにあります。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="1.jpg">图片</a> </body> </html>
(3) 対象のファイルは上のディレクトリにあり、該当するディレクトリを上に探し、そのディレクトリ内のファイルを見つけます。
「../」記号を検索して使用してください。
「../」は上位ディレクトリを表します
「../../」は上位2階層のディレクトリを表します
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="image/1.jpg">图片</a> </body> </html>
3. 特別リンク
(1). ダウンロード リンク
どのような種類のファイルにダウンロード プロンプトが表示されますか?
一方、直接実行できるファイルと Web ページはどれですか?例: .jpg、.png、.gif、.html、.htm、.txt など。
ほとんどのファイルはブラウザで直接実行できません。例: .doc、.xls、.ppt、.rar、.psd...
直接実行できない場合は、ダウンロードボックスが表示されます
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="../image/1.jpg">图片</a> </body> </html>
(2)、メールリンク
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="image/1.rar">下载</a> </body> </html>
(3)、通常の空のリンク (#)
ジャンプ リンクを実行するステップ:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="mailto:php@php.cn">有问题的话，请给我们发邮件</a> </body> </html>
