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。
未完待续。。。。。。。。。。。。。。。。。。。。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
