HTML 基本チュートリアルのハイパーリンク

ハイパーリンクは Web サイトのいたるところに表示されます。Baidu News を開いて任意の段落をクリックすると、ニュースの詳細ページが開きます。

次に、ハイパーリンクについて詳しく説明します

。

ハイパーリンク

文法形式:

注: <a> ; を含めることはできません。それ;a> タグ

共通属性

href: ターゲットファイルのアドレス URL は相対アドレスまたは絶対アドレスです。
target: ターゲットファイルの表示ウィンドウ。

_blank: 対象ファイルを新しいウィンドウで開きます。
_self: 現在のウィンドウでターゲットファイルを開きます (デフォルトで開きます)。「置換」操作と同等です。
_parent: 親ウィンドウで対象ファイルを開きます。
_top: トップレベルウィンドウでターゲットファイルを開きます。

_parentと_topのよく使われるフレームWebページのうち、後ほど紹介します

name: アンカーリンクの名前を定義します。

1. 絶対アドレスURL

(1) リモート絶対アドレス

リモートファイルにアクセスするには、常に「<a href="http://"」ドメイン名とホスト名を使用します「>http://」ドメイン名と「/a>」を使用します。ローカル絶対アドレスは、<a href="http://file:///.">file で始まる絶対アドレスです。 :///。 </a>

前の例に基づいて追加します:

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

注: ローカルでテストしてください

2. 相対アドレス URL (プロジェクト内のパスは通常、相対パスです) path 、ローカルでテストしてください)

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

学び続ける

新しいファイル

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

提出するリセットコード

自動運転