HTML系列（五）：超链接_html/css_WEB-ITnose
标签定义超链接，最重要的属性是 href 属性，它指示链接的目标。通过将href属性设定不同类型的值可以使链接指向不同类型的链接地址：内部链接、外部链接、锚链接。
内部链接指的是同一域名网站内部页面的相互链接；外部链接指从某一域名网页指向外部域名网站的链接；锚链接指从某个域名外部所有以文字带超链接指向这个域名的链接，是影响网站关键词在搜索引擎中排名的重要因素。
一、指向外部的超链接
二、相对路径
当源文件和引用文件在同一个目录里，直接引用文件名；使用../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推；引用下级目录文件，直接写下级目录文件名，用/隔开。
三、页面内超链接
当一张页面上篇幅较长，用户查找困难，就可以用页面内超链接作为导航。页面内超链接也称作锚链接，类似于书签的功能，实现在页面内不同位置的跳转，用户不需要反复拖动滚动条进行定位。
做法：通过a的name属性定义锚的名称，通过a的href属性可以根据name跳到对应的锚。
示例代码：
1 <body> 2 <h1 id="HTML-教程目录">HTML 教程目录</h1> 3 4 <ul> 5 <li><a href="#C1">第一章</a></li> 6 <li><a href="#C2">第二章</a></li> 7 <li><a href="#C3">第三章</a></li> 8 <li><a href="#C4">第四章</a></li> 9 <li><a href="#C5">第五章</a></li>10 <li><a href="#C6">第六章</a></li>11 <li><a href="#C7">第七章</a></li>12 <li><a href="#C8">第八章</a></li>13 </ul>14 15 <h2 id="a-name-C-第一章-a"><a name="C1">第一章</a></h2>16 <p>本章讲解的内容是 ... ...</p>17 18 <h2 id="a-name-C-第二章-a"><a name="C2">第二章</a></h2>19 <p>本章讲解的内容是 ... ...</p>20 21 <h2 id="a-name-C-第三章-a"><a name="C3">第三章</a></h2>22 <p>本章讲解的内容是 ... ...</p>23 24 <h2 id="a-name-C-第四章-a"><a name="C4">第四章</a></h2>25 <p>本章讲解的内容是 ... ...</p>26 27 <h2 id="a-name-C-第五章-a"><a name="C5">第五章</a></h2>28 <p>本章讲解的内容是 ... ...</p>29 30 <h2 id="a-name-C-第六章-a"><a name="C6">第六章</a></h2>31 <p>本章讲解的内容是 ... ...</p>32 33 <h2 id="a-name-C-第七章-a"><a name="C7">第七章</a></h2>34 <p>本章讲解的内容是 ... ...</p>35 36 <h2 id="a-name-C-第八章-a"><a name="C8">第八章</a></h2>37 <p>本章讲解的内容是 ... ...</p>38 39 </body>
使用 name 属性还是 id 属性？
在 HTML 4.0 之前的版本中，只有使用 标签的 name 属性才能创建片段标识符。随着 HTML 4.0 中 id 属性的出现，所有 HTML 或 XHTML 元素都可以是片段标识符。这是因为 id 标识符几乎可以用在所有的标签中。 标签为了能够和以前的版本相兼容而保留了 name 属性，同时也可以使用 id 属性。这些属性可以相互交换使用，可以把 id 属性看作是 name 属性的升级版本。name 和 id 属性都可以与 href 属性结合起来使用，这样一个 标签就可以同时作为超链接和片段标识符使用。
可以简单地将片段标识符看作是对许多编程语言中普遍使用的 goto 语句标签的 HTML 模拟。 标签中的 name 属性或者 或其他标签中的 id 属性会在文档中放置一个标识。当标签用于链接到该文档时，就等于告诉浏览器要转到（goto）该标识。
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。
上面的示例代码的name可以替换成id。
未完待续。。。。。。。。。。。。。。。。。。。。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Mar 17, 2025 pm 12:20 PM
Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Mar 17, 2025 pm 12:27 PM
Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?
Apr 04, 2025 pm 11:54 PM
Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...
