ホームページ > 記事 > ウェブフロントエンド > HTMLのアンカーポイントとは何ですか
アンカー ポイントの概要:
タグは、あるページから別のページにリンクするために使用されるハイパーリンクを定義します。 要素の最も重要な属性は、リンクのターゲットを示す href 属性です。
要素 (または HTML アンカー要素、アンカー要素) は通常、アンカー ポイント/リンクを表すために使用されます。ただし、厳密に言えば、 要素はリンクではなく、新しいファイルにリンクし、id 属性を使用して任意の要素をポイントできるハイパーテキスト アンカーです。 要素も href 属性も存在しない場合は、元のリンク位置のプレースホルダーとして使用でき、ホーム リンクによく使用されます。
注: ドキュメント フロー コンテンツは、限り、ネストできます。インタラクティブなコンテンツ カテゴリ (ボタン、リンクなど) ではないため、
Attribute
href
href 属性は、次の 3 つのタイプを含むアドレスを表します。
1, リンクアドレス
<a href="http://www.baidu.com">百度</a>
2. ダウンロードアドレス
<a href="test.zip">下载测试</a>
3. アンカーポイント
(1)href:#id 名前
<a href="#test">目录</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>
(学習ビデオ共有: htmlビデオチュートリアル)
(2) href: ページアドレス #id name
<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>
[注意] href 属性は空白のままにすることはできません。一時的にアドレスを記述する必要がない場合は、 # または javascript:; と書きます。 href を空白のままにすると、ページが更新されます
#href と srchref (ハイパーテキスト参照) の違いはハイパーテキスト参照を指し、現在のページが他の場所のコンテンツを参照していることを示しますsrc (source) はソース アドレスを表し、他の場所から現在のページにコンテンツを導入することを意味します。したがって、、<script>、<iframe> などは使用する必要があります。 src、一方、<a> と <map>href<p><p><img src="https://img.php.cn/upload/image/762/125/845/1611972354386177.png" title="1611972354386177.png" alt="HTMLのアンカーポイントとは何ですか"/>##4 と携帯電話番号<p> を使用する必要があります。携帯側では、<a を使用します。 href="tel:15012345678>15012345678 携帯電話のダイヤルパッドを呼び出すことができます<p>##target<p><span style="max-width:90%">target 属性はリンクの開始方法を示します 1. _self 現在のウィンドウ (デフォルト)<p> 2. _blank 新しいウィンドウ 3. _parent 親フレームセット<p> 4. _top ウィンドウ全体<br/> 5. _framename 指定されたフレーム<br/><pre class="brush:js;toolbar:false">//外层框架 <frameset cols = "20%, *"> <frame src="left.html"> <frame src="right.html"> </frameset> //里层框架 <frameset rows = "50%,*"> <frame src="top.html"> <frame src="bottom.html" name="bottom"> </frameset> //锚点页 <ul class="list"> <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li> <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li> <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li> <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li> <li class="in"><a href="chap5.html" target="bottom">chap5(framename)</a></li> </ul></pre> <br/><br/>#download<p><img src="https://img.php.cn/upload/image/391/412/522/1611972374620647.png" title="1611972374620647.png" alt="HTMLのアンカーポイントとは何ですか"/>download 属性は、ダウンロードされたファイルの名前を設定するために使用されます (Firefox/chrome/opera でサポートされています)<pre class="brush:html;toolbar:false"><a href="test.zip" download="gogo">test</a></pre><p id="anchor4" style="max-width:90%"><p>rel<p><img src="https://img.php.cn/upload/image/897/485/223/1611972390862521.png" title="1611972390862521.png" alt="HTMLのアンカーポイントとは何ですか"/>rel 属性はリンク間の関係を示します<pre class="brush:html;toolbar:false">alternate 相较于当前文档可替换的呈现 author 链接到当前文档或文章的作者 bookmark 链接最近的父级区块的永久链接 help 与当前上下文相关的帮助链接 license 当前文档的许可证 next 后一篇文档 prev 前一篇文档 nofollow 当前文档的原始作者不推荐超链接指向的文档 noreferer 访问时链接时不发送referer字段 prefetch 预加载链接指向的页面(对于chrome使用prerender) search 用于搜索当前文档或相关文档的资源 tag 给当前文档打上标签</pre><p id="anchor5" style="margin: 10px 0px; padding: 0px 6px 0px 0px; list-style-type: none; list-style-image: none; font-size: 16.8px; line-height: 1.2; border-right: 3px solid rgb(33, 117, 188); display: inline-block; color: rgb(68, 68, 68); font-family: Tahoma, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">【用途】長い記事を複数ページにまたがって表示する必要がある場合、前後ページのプリロードナビゲーションは次または前で実現できます <pre class="brush:html;toolbar:false"><a href="prev.html" rel="prev prefetch prerender">前一页</a> <a href="next.html" rel="next prefetch prerender">后一页</a> //当然prefetch也可以用于预加载其他类型的资源<link rel="prefetch prerender" href="test.img"></pre><p> 注意事項<p> 1. <a> タグのテキストの色はそれ自体でのみ設定でき、親から継承することはできません <p id="anchor6" style="margin: 10px 0px; padding: 0px 6px 0px 0px; list-style-type: none; list-style-image: none; font-size: 16.8px; line-height: 1.2; border-right: 3px solid rgb(33, 117, 188); display: inline-block; color: rgb(68, 68, 68); font-family: Tahoma, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">2. <a> タグの下線の色はテキストの色に応じて変わります。<p>3、<a> タグはネストできません<a> タグ<pre class="brush:html;toolbar:false"><div style="color: red;"> <a href="#">[1]从父级继承不到红色字体</a> <br> <a href="#" style="color: green">[2]下划线颜色与文本同色</a> <br> <a href="#">前面<a href="#">[3]a标签不可嵌套</a></a> </div></pre><p>相关推荐:<a href="https://www.php.cn/div-tutorial.html" target="_blank">html入门教程</script>以上がHTMLのアンカーポイントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。