検索
ホームページウェブフロントエンドhtmlチュートリアルHTML ハイパーリンクの詳細を紹介します。
HTML ハイパーリンクの詳細を紹介します。Mar 10, 2017 am 11:38 AM
htmlハイパーリンク

この記事では、HTML ハイパーリンクの詳細な説明を紹介します

ハイパーリンクは、Web サイトのさまざまなページがハイパーリンクによって接続されており、ハイパーリンクによってページ間のジャンプが完了するため、Web サイトで頻繁に使用される HTML 要素です。ハイパーリンクはブラウザとサーバー間の対話の主な手段であり、次のテクノロジーでハイパーリンクについて徐々に詳しく学んでいきます。

— 注: 画像はリンクとしても使用できます。詳細については、次の章「Web ページ内の画像」で説明します。

4.5.1 テキストへのリンクの追加

ハイパーリンクのタグは、テキストへのハイパーリンクの追加は他の変更タグと同様です。リンクを追加した後のテキストには、他のテキストと区別するための独自の特別なスタイルがあり、デフォルトのリンク スタイルは下線付きの青色のテキストです。ハイパーリンクは別のページにジャンプします。 タグには、新しいページのアドレスを指定するための href 属性があります。 hrefで指定するアドレスは、通常は相対アドレスを使用します。

— 注: Web サイト開発では、ドキュメントの相対アドレスがより一般的に使用されます。

D:web ディレクトリに Web ページ ファイルを作成し、a.htm という名前を付け、コード 4.18 に示すようにコードを記述します。

コード 4.18 ハイパーリンク設定: a.htm

ハイパーリンク設定

< ;font size="5">

リスト設定ページに入ります

body>

ブラウザのアドレスバーに http://localhost/a.htm と入力すると、ブラウジング効果は図 4.19 のようになります。

HTML ハイパーリンクの詳細を紹介します。

図 4.19 ハイパーリンクの設定

ページ内のリンクをクリックすると、ページは同じディレクトリ内の ul_ol.htm ページにジャンプします。前のセクションのリスト設定ページ。ブラウザの「戻る」ボタンをクリックして a.htm ページに戻ると、テキスト リンクの色が紫に変わり、このリンクにアクセスしたことが表示されます。

4.5.2 リンクのウィンドウを開く方法を変更する

デフォルトでは、ハイパーリンクが新しいページを開く方法は、ハイパーリンク自体を上書きすることです。ブラウザのさまざまなニーズに応じて、読者はハイパーリンクの新しいウィンドウを開く他の方法を指定できます。ハイパーリンクタグは、設定対象の属性を提供します。値は、_self(自己上書き、デフォルト)、_blank(新しいウィンドウを作成して新しいページを開きます)、_top(ブラウザのウィンドウ全体で開きます、すべてのフレームで開きます)です。構造体は無視されます) )、_parent (前のウィンドウで開きます)。

— 注: _top メソッドと _parent メソッドはフレーム ページに使用され、次の章で詳しく説明されます。

4.5.3 リンクにプロンプ​​トテキストを追加する

多くの場合、ハイパーリンクのテキストではリンク先のコンテンツを説明するのに十分ではありません。ハイパーリンクタグは、閲覧者に簡単にプロンプ​​トを表示できるタイトル属性を提供します。 。 title 属性の値はプロンプトの内容です。ビューアのカーソルがハイパーリンク上にあると、プロンプトの内容が表示されます。これは、ページ レイアウトのきれいさには影響しません。 a.htm Web ページ ファイルを変更し、コード 4.19 に示すようにコードを記述します。

コード 4.19 ハイパーリンク設定: a.htm

ハイパーリンク設定

< ;font size="5">

図 4.20 ハイパーリンクのプロンプトテキスト

4.5.4 アンカーとは

多くの Web 記事には多くのコンテンツが含まれているため、ページが非常に長くなり、閲覧者は常にドラッグして閲覧する必要があります。ブラウザのスクロール バーを使用して、必要なコンテンツを見つけます。ハイパーリンクのアンカー機能は、アンカーを船のアンカーから導き出し、アンカーを落とした後、船が簡単に流されたり、迷ったりすることを防ぎます。実際、アンカーは 1 ページ内の別の場所にジャンプするために使用され、ブックマークと呼ばれる場所もあります。

ハイパーリンク タグの name 属性は、アンカーの名前を定義するために使用されます。ハイパーリンクの href 属性は、名前に基づいて対応するアンカーにジャンプできます。 D:web ディレクトリに Web ページ ファイルを作成し、a_anchor.htm という名前を付け、コード 4.20 に示すようにコードを記述します。

コード 4.20 ハイパーリンク アンカー: a_anchor.htm

ハイパーリンク設定

< ;font size="5">

ここがトップアンカーです

1期

2期

;第3期

第4期

第5期

第6期

アメリカ

●第1期(1789-1797)これは第1期のアンカーです> ;

名前:ジョージワシントン

ジョージ・ワシントン

生没年: 1732-1799

政党:: 南部連合

●第2代 (1797-1801) これが 2 番目のアンカーです

名前: ジョン アダムス
)ここ3番目のアンカーです

名前:トーマス・ジェファーソン

トーマス・ジェファーソン

生没年:1743-1826

政党:: 中華民主共和国

●第 4 期 (1809-1817)これが第 4 の錨です

名前: ジェームズ・マディソン

ジェームズ・マディソン

生没年: 1751-1836

政党: 中国共産党

●5期( 1817-1825)第 5 期のアンカーはこちら

名前: James Monroe

James Monroe

生没: 1758-1831

政党: 中華民主共和国

> ;l>

テストする前に、読者はコード 4.20 から定義アンカーも使用されていることがわかります アンカーの名前は name 属性で定義されています (名前には制限がなく、カスタマイズ可能です)。アンカー リンクを検索する場合は、href 属性を使用して対応する名前を指定し、名前の前に # 記号を追加します。ブラウザのアドレス バーに http://localhost/a_anchor.htm と入力すると、ブラウジング効果は図 4.21 に示すようになります。

図 4.21 ハイパーリンクのアンカー

閲覧者がハイパーリンクをクリックすると、ページは href 属性値名のアンカー位置まで自動的にスクロールします。

— 注: アンカーを定義するタグ は必ずしも特定のコンテンツを必要とするわけではなく、単なる位置決めにすぎません。

HTML ハイパーリンクの詳細を紹介します。

4.5.5 電子メール、FTP、および Telnet リンク

ハイパーリンクは、Web ページの機能をさらに拡張することもできます。より一般的に使用されるのは、電子メール、FTP、および Telnet 接続です。上記の機能を完了するには、ハイパーリンクの href 値を変更するだけです。電子メールを送信するための記述形式は次のとおりです:

電子メールを送信 電子メール アドレスは、intel@qq.com など、完全である必要があります。 前述したように、Web の閲覧には http プロトコルが使用され、FTP サーバーへのリンク形式は次のとおりです:

リンク テキスト

FTP サーバー リンクと Web ページ リンクの違いは、使用されるプロトコルにあります。 FTPにはサーバー管理者からのログイン許可が必要です。ただし、一部の FTP サーバーは匿名でアクセスでき、一部の公開ファイルを取得できます。同様に、Telnet プロトコルのサーバーへの接続には、次の形式で同様の方法が使用されます:

リンク テキスト

Telnet プロトコルはほとんど使用されず、http プロトコルが主に使用されます。 D:web ディレクトリに Web ページ ファイルを作成し、mail.htm という名前を付け、コード 4.21 に示すようにコードを記述します。

コード 4.21 ハイパーリンクのその他の設定: mail.htm

ハイパーリンクのその他の設定

mail

FTP サーバーに接続します a>

Telnet サーバーに接続します

ブラウザのアドレスバーに http://localhost/mail.htm と入力すると、ブラウジング効果は図 4.22 のようになります。

HTML ハイパーリンクの詳細を紹介します。図 4.22 ハイパーリンクのその他の設定

以上がHTML ハイパーリンクの詳細を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。