HTML의 앵커 포인트 란 무엇입니까?

앵커 소개:

태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다. 요소의 가장 중요한 속성은 링크의 대상을 나타내는 href 속성입니다.

요소(또는 HTML 앵커 요소, 앵커 요소)는 일반적으로 앵커 포인트/링크를 나타내는 데 사용됩니다. 그러나 엄밀히 말하면 요소는 링크가 아니라 새 파일에 연결하고 id 속성을 사용하여 모든 요소를 ​​가리킬 수 있는 하이퍼텍스트 앵커입니다. 요소와 href 속성이 없으면 홈 링크에 자주 사용되는 원래 링크 위치의 자리 표시자로 사용할 수 있습니다. 참고: 문서 흐름 콘텐츠는 대화형 콘텐츠 카테고리(예: 버튼, 링크 등)

속성

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 이름

<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

[참고] href 속성을 비워두지 마세요. 임시로 주소를 쓸 필요가 없으면 # 또는 javascript:;를 씁니다. href를 비워두면 페이지가 새로 고쳐집니다

href와 src의 차이점

href(하이퍼텍스트 참조)는 하이퍼텍스트 참조를 나타내며 현재 페이지가 다른 콘텐츠를 참조함을 나타냅니다.

src(소스)는 소스를 나타냅니다. 주소는 현재 페이지에 포함되어 있음을 나타냅니다.

따라서 , <script>, <iframe> 등은 src를 사용해야 하고 <a> 및 <map> href<p><p><p>4. 휴대폰 번호<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/762/125/845/1611972354386177.png?x-oss-process=image/resize,p_40" class="lazy" title="1611972354386177.png" alt="HTML의 앵커 포인트 란 무엇입니까?"/> 모바일 측에서 <a href="tel:15012345678>15012345678를 사용하여 모바일 다이얼 패드 <p><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:php;toolbar:false;'>//外层框架 &lt;frameset cols = &quot;20%, *&quot;&gt; &lt;frame src=&quot;left.html&quot;&gt; &lt;frame src=&quot;right.html&quot;&gt; &lt;/frameset&gt; //里层框架 &lt;frameset rows = &quot;50%,*&quot;&gt; &lt;frame src=&quot;top.html&quot;&gt; &lt;frame src=&quot;bottom.html&quot; name=&quot;bottom&quot;&gt; &lt;/frameset&gt; //锚点页 &lt;ul class=&quot;list&quot;&gt; &lt;li class=&quot;in&quot;&gt;&lt;a href=&quot;chap1.html&quot; target=&quot;_self&quot;&gt;chap1(_self)&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;in&quot;&gt;&lt;a href=&quot;chap2.html&quot; target=&quot;_blank&quot;&gt;chap2(_blank)&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;in&quot;&gt;&lt;a href=&quot;chap3.html&quot; target=&quot;_parent&quot;&gt;chap3(_parent)&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;in&quot;&gt;&lt;a href=&quot;chap4.html&quot; target=&quot;_top&quot;&gt;chap4(_top)&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;in&quot;&gt;&lt;a href=&quot;chap5.html&quot; target=&quot;bottom&quot;&gt;chap5(framename)&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</pre><br/><br/><p>download<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/391/412/522/1611972374620647.png?x-oss-process=image/resize,p_40" class="lazy" title="1611972374620647.png" alt="HTML의 앵커 포인트 란 무엇입니까?"/> 다운로드 속성은 다운로드되는 파일의 이름을 설정하는 데 사용됩니다. (firefox/chrome/opera 지원) <p id="anchor4" style="max-width:90%"><pre class='brush:php;toolbar:false;'>&lt;a href=&quot;test.zip&quot; download=&quot;gogo&quot;&gt;test&lt;/a&gt;</pre><p><p>rel<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/897/485/223/1611972390862521.png?x-oss-process=image/resize,p_40" class="lazy" title="1611972390862521.png" alt="HTML의 앵커 포인트 란 무엇입니까?"/>rel 속성은 링크 간의 관계를 나타냅니다<p id="anchor5" style="max-width:90%"><pre class='brush:php;toolbar:false;'>alternate 相较于当前文档可替换的呈现 author 链接到当前文档或文章的作者 bookmark 链接最近的父级区块的永久链接 help 与当前上下文相关的帮助链接 license 当前文档的许可证 next 后一篇文档 prev 前一篇文档 nofollow 当前文档的原始作者不推荐超链接指向的文档 noreferer 访问时链接时不发送referer字段 prefetch 预加载链接指向的页面(对于chrome使用prerender) search 用于搜索当前文档或相关文档的资源 tag 给当前文档打上标签</pre>[응용] 긴 글이 필요할 때 여러 페이지에 표시되며, 앞 페이지와 뒷 페이지 탐색을 미리 로드하기 위해 next 또는 prev와 함께 사용할 수 있습니다. <p><pre class='brush:php;toolbar:false;'>&lt;a href=&quot;prev.html&quot; rel=&quot;prev prefetch prerender&quot;&gt;前一页&lt;/a&gt; &lt;a href=&quot;next.html&quot; rel=&quot;next prefetch prerender&quot;&gt;后一页&lt;/a&gt; //当然prefetch也可以用于预加载其他类型的资源&lt;link rel=&quot;prefetch prerender&quot; href=&quot;test.img&quot;&gt;</pre>Notes<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> 태그는 중첩될 수 없습니다.<pre class='brush:php;toolbar:false;'>&lt;div style=&quot;color: red;&quot;&gt; &lt;a href=&quot;#&quot;&gt;[1]从父级继承不到红色字体&lt;/a&gt; &lt;br&gt; &lt;a href=&quot;#&quot; style=&quot;color: green&quot;&gt;[2]下划线颜色与文本同色&lt;/a&gt; &lt;br&gt; &lt;a href=&quot;#&quot;&gt;前面&lt;a href=&quot;#&quot;&gt;[3]a标签不可嵌套&lt;/a&gt;&lt;/a&gt; &lt;/div&gt;</pre><p>相关推荐：<a href="https://www.php.cn/div-tutorial.html" target="_blank">html入门教程</script>

위 내용은 HTML의 앵커 포인트 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!