<a>
HTML <a> タグ
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn">访问php中文网!</a> </body> </html>
インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
ブラウザのサポート
すべての主要なブラウザは <a> タグをサポートしています。
タグの定義と使用手順
タグとは何を意味しますか?
<a> タグは、あるページから別のページにリンクするために使用されるハイパーリンクを定義します。
<a> 要素の最も重要な属性は、リンクのターゲットを指定する href 属性です。
すべてのブラウザで、リンクのデフォルトの外観は次のとおりです:
未訪問のリンクは下線付きで青色です
訪問済みのリンクは下線付きで紫色です
-
アクティブなリンクは下線付きで赤色です
ヒントと注意事項
ヒント: hreflang、media、rel、target、type 属性は、href 属性を使用せずに使用することはできません。
ヒント: 他のターゲットが指定されていない限り、通常はリンクされたページを現在のブラウザウィンドウに表示します。
ヒント: リンクのスタイルを変更するにはCSSを使用してください。
HTML 4.01 と HTML5 の違い
HTML 4.01 では、<a> タグはハイパーリンクまたはアンカーのいずれかになります。 HTML5 では、<a> タグはハイパーリンクですが、href 属性がなければ、単なるハイパーリンクのプレースホルダーです。
HTML5 にはいくつかの新しい属性があり、一部の HTML 4.01 属性はサポートされなくなりました。
属性
New: HTML5 の新しい属性。
| 属性 | 値 | 説明 |
|---|---|---|
| charset | char_encoding | HTML5はサポートされていません。 対象URLの文字エンコードを指定します。 |
| 座標 | 座標 | HTML5はサポートされていません。 リンクの座標を指定します。 |
| downloadNew | filename | ダウンロードリンクを指定します |
| href | URL | リンクのターゲットURLを指定します。 |
| hreflang | language_code | ターゲット URL の基本言語を指定します。 href 属性が存在する場合にのみ使用されます。 |
| mediaNew | media_query | ターゲットURLのメディアタイプを指定します。デフォルト値: すべて。 href 属性が存在する場合にのみ使用されます。 |
| name | section_name | HTML5 はサポートされていません。 アンカーの名前を指定します。 |
| レル | 代替 著者 ブックマーク 助けて ライセンス 次へ ノーフォロー ノーリファラー 先読み 前 検索 tag | は、現在のドキュメントとターゲット URL の間の関係を指定します。 href 属性が存在する場合にのみ使用されます。 |
| rev | text | HTML5はサポートされていません。 ターゲット URL と現在のドキュメントの間の関係を指定します。 |
| 形状 | デフォルト 直方体 サークル Poly | HTML5 はサポートされていません。 リンクの形状を指定します。 |
| ターゲット | _blank _親 _自分 _top framename | は、ターゲット URL を開く場所を指定します。 href 属性が存在する場合にのみ使用されます。 |
| typeNew | MIME_type | ターゲット URL の MIME タイプを指定します。 href 属性が存在する場合にのみ使用されます。 注: MIME = 多目的インターネット メール拡張機能。 |
グローバル属性
<a> タグは HTML グローバル属性をサポートします。
イベント属性
<a> タグは HTML イベント属性をサポートします。
試してみる - 例
ハイパーリンクを作成する
この例は、HTML ドキュメントにリンクを作成する方法を示します。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
画像をリンクとして使用する
この例は、画像をリンクとして使用する方法を示しています。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 图像作为链接: <a href="http://php.cn"> <img border="0" alt="w3cschool" src="logo.png" width="100" height="100"> </a> </p> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
新しいブラウザウィンドウでリンクを開きます
この例は、新しいブラウザウィンドウでページを開く方法を示していますウィンドウなので、サイトを離れることなくユーザーにアクセスできます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" target="_blank">访问php中文网!</a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
メールリンクを作成します
この例は、メールにリンクする方法を示しています。 (この例は、メール クライアント プログラムのインストール後にのみ機能します。)
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 这是一个电子邮件链接： <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください
電子メール リンク 2 を作成します
これ例では、より複雑な電子メール リンクを示します。
インスタンス
<!DOCTYPE html> <html> <body> <p> This is another mailto link: <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
同じページ上の別の場所にジャンプするにはアンカーを使用します
この例は、アンカーの使用方法を示していますid 属性を使用してページ上の別の場所にジャンプします (HTML5 は name 属性をサポートしていません)。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2><a id="top">这是标题，底部链接可以链接到这</a></h2> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <a href="#top">链接到标题</a> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
関連記事
HTMLチュートリアル: HTMLリンク
HTML DOMリファレンスマニュアル: アンカーオブジェクト
